wip: warn v-if/v-for co-usage

yyx990803 · yyx990803 · commit ab214689827f · 2021-04-17T14:38:30.000-04:00
diff --git a/packages/compiler-core/src/compat/compatConfig.ts b/packages/compiler-core/src/compat/compatConfig.ts
@@ -81,8 +81,10 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
   [CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE]: {
     message:
       `v-if / v-for precedence when used on the same element has changed ` +
-      `in Vue 3. It is best to avoid the ambiguity with either <template> tags ` +
-      `or a computed property that filters v-for data source.`,
+      `in Vue 3: v-if now takes higher precedence and will no longer have ` +
+      `access to v-for scope variables. It is best to avoid the ambiguity ` +
+      `with <template> tags or use a computed property that filters v-for ` +
+      `data source.`,
     link: `https://v3.vuejs.org/guide/migration/v-if-v-for.html`
   },
 
diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts
@@ -33,7 +33,8 @@ import {
 import {
   checkCompatEnabled,
   CompilerCompatOptions,
-  CompilerDeprecationTypes
+  CompilerDeprecationTypes,
+  warnDeprecation
 } from './compat/compatConfig'
 
 type OptionalOptions =
@@ -488,6 +489,29 @@ function parseTag(
     props = parseAttributes(context, type).filter(p => p.name !== 'v-pre')
   }
 
+  // warn v-if/v-for usage on the same element
+  if (__COMPAT__ && __DEV__ && !__TEST__) {
+    let hasIf = false
+    let hasFor = false
+    for (let i = 0; i < props.length; i++) {
+      const p = props[i]
+      if (p.type === NodeTypes.DIRECTIVE) {
+        if (p.name === 'if') {
+          hasIf = true
+        } else if (p.name === 'for') {
+          hasFor = true
+        }
+      }
+      if (hasIf && hasFor) {
+        warnDeprecation(
+          CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
+          context,
+          getSelection(context, start)
+        )
+      }
+    }
+  }
+
   // Tag close.
   let isSelfClosing = false
   if (context.source.length === 0) {
