fix(compiler-sfc): refactor resolveTemplateVModelIdentifiers and improve template analysis caching

Author: edison1105

packages/compiler-sfc/src/compileScript.ts

@@ -1,10 +1,7 @@
 import {
   BindingTypes,
-  NodeTypes,
-  type TemplateChildNode,
   UNREF,
   isFunctionType,
-  isSimpleIdentifier,
   unwrapTSNode,
   walkIdentifiers,
 } from '@vue/compiler-dom'
@@ -67,7 +64,10 @@ import {
   isTS,
 } from './script/utils'
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
-import { isImportUsed } from './script/importUsageCheck'
+import {
+  isImportUsed,
+  resolveTemplateVModelIdentifiers,
+} from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
 
 export interface SFCScriptCompileOptions {
@@ -141,36 +141,6 @@ export interface SFCScriptCompileOptions {
   customElement?: boolean | ((filename: string) => boolean)
 }
 
-function resolveTemplateVModelIdentifiers(sfc: SFCDescriptor): Set<string> {
-  const ids = new Set<string>()
-  const template = sfc.template
-  if (!template?.ast) return ids
-
-  template.ast.children.forEach(walk)
-
-  function walk(node: TemplateChildNode) {
-    switch (node.type) {
-      case NodeTypes.ELEMENT:
-        for (let i = 0; i < node.props.length; i++) {
-          const prop = node.props[i]
-          if (prop.type === NodeTypes.DIRECTIVE && prop.name === 'model') {
-            const exp = prop.exp
-            if (exp && exp.type === NodeTypes.SIMPLE_EXPRESSION) {
-              const expString = exp.content.trim()
-              if (isSimpleIdentifier(expString) && expString !== 'undefined') {
-                ids.add(expString)
-              }
-            }
-          }
-        }
-        node.children.forEach(walk)
-        break
-    }
-  }
-
-  return ids
-}
-
 export interface ImportBinding {
   isType: boolean
   imported: string

packages/compiler-sfc/src/script/importUsageCheck.ts

@@ -4,6 +4,7 @@ import {
   NodeTypes,
   type SimpleExpressionNode,
   type TemplateChildNode,
+  isSimpleIdentifier,
   parserOptions,
   walkIdentifiers,
 } from '@vue/compiler-dom'
@@ -19,16 +20,33 @@ export function isImportUsed(local: string, sfc: SFCDescriptor): boolean {
   return resolveTemplateUsedIdentifiers(sfc).has(local)
 }
 
-const templateUsageCheckCache = createCache<Set<string>>()
+const templateAnalysisCache = createCache<{
+  usedIds: Set<string>
+  vModelIds: Set<string>
+}>()
+
+export function resolveTemplateVModelIdentifiers(
+  sfc: SFCDescriptor,
+): Set<string> {
+  return resolveTemplateAnalysisResult(sfc).vModelIds
+}
 
 function resolveTemplateUsedIdentifiers(sfc: SFCDescriptor): Set<string> {
+  return resolveTemplateAnalysisResult(sfc).usedIds
+}
+
+function resolveTemplateAnalysisResult(sfc: SFCDescriptor): {
+  usedIds: Set<string>
+  vModelIds: Set<string>
+} {
   const { content, ast } = sfc.template!
-  const cached = templateUsageCheckCache.get(content)
+  const cached = templateAnalysisCache.get(content)
   if (cached) {
     return cached
   }
 
   const ids = new Set<string>()
+  const vModelIds = new Set<string>()
 
   ast!.children.forEach(walk)
 
@@ -51,6 +69,20 @@ function resolveTemplateUsedIdentifiers(sfc: SFCDescriptor): Set<string> {
               ids.add(`v${capitalize(camelize(prop.name))}`)
             }
 
+            // collect v-model target identifiers (simple identifiers only)
+            if (prop.name === 'model') {
+              const exp = prop.exp
+              if (exp && exp.type === NodeTypes.SIMPLE_EXPRESSION) {
+                const expString = exp.content.trim()
+                if (
+                  isSimpleIdentifier(expString) &&
+                  expString !== 'undefined'
+                ) {
+                  vModelIds.add(expString)
+                }
+              }
+            }
+
             // process dynamic directive arguments
             if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
               extractIdentifiers(ids, prop.arg)
@@ -81,8 +113,9 @@ function resolveTemplateUsedIdentifiers(sfc: SFCDescriptor): Set<string> {
     }
   }
 
-  templateUsageCheckCache.set(content, ids)
-  return ids
+  const result = { usedIds: ids, vModelIds }
+  templateAnalysisCache.set(content, result)
+  return result
 }
 
 function extractIdentifiers(ids: Set<string>, node: ExpressionNode) {