chore: update

Co-authored-by: edison <daiwei521@126.com>
linzhe141 · Sep 24, 2024 · 3ebf43b · 3ebf43b
1 parent 874281a
commit 3ebf43b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/packages/compiler-core/__tests__/transforms/vFor.spec.ts b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
@@ -667,6 +667,20 @@ describe('compiler: v-for', () => {
       })
     })
 
+    test('element v-for key expression prefixing + v-memo', () => {
+      const {
+        node: { codegenNode },
+      } = parseWithForTransform(
+        '<span v-for="data of tableData" :key="getId(data)" v-memo="getLetter(data)"></span>',
+        { prefixIdentifiers: true },
+      )
+      const keyExp =
+        // @ts-expect-error
+        codegenNode.children.arguments[1].body.body[1].children[2].children[0]
+          .content
+      expect(keyExp).toBe('_ctx.getId')
+    })
+
     test('template v-for key no prefixing on attribute key', () => {
       const {
         node: { codegenNode },

diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -24,7 +24,7 @@ import {
   isStaticPropertyKey,
   walkIdentifiers,
 } from '../babelUtils'
-import { advancePositionWithClone, isSimpleIdentifier } from '../utils'
+import { advancePositionWithClone, findDir, isSimpleIdentifier } from '../utils'
 import {
   genPropsAccessExp,
   hasOwn,
@@ -54,6 +54,7 @@ export const transformExpression: NodeTransform = (node, context) => {
     )
   } else if (node.type === NodeTypes.ELEMENT) {
     // handle directives on element
+    const memo = findDir(node, 'memo')
     for (let i = 0; i < node.props.length; i++) {
       const dir = node.props[i]
       // do not process for v-on & v-for since they are special handled
@@ -65,7 +66,14 @@ export const transformExpression: NodeTransform = (node, context) => {
         if (
           exp &&
           exp.type === NodeTypes.SIMPLE_EXPRESSION &&
-          !(dir.name === 'on' && arg)
+          !(dir.name === 'on' && arg) &&
+          // key has been processed in transformFor(vMemo + vFor)
+          !(
+            memo &&
+            arg &&
+            arg.type === NodeTypes.SIMPLE_EXPRESSION &&
+            arg.content === 'key'
+          )
         ) {
           dir.exp = processExpression(
             exp,

diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
@@ -63,26 +63,27 @@ export const transformFor: NodeTransform = createStructuralDirectiveTransform(
       const isTemplate = isTemplateNode(node)
       const memo = findDir(node, 'memo')
       const keyProp = findProp(node, `key`, false, true)
-      if (keyProp && keyProp.type === NodeTypes.DIRECTIVE && !keyProp.exp) {
+      const isDirKey = keyProp && keyProp.type === NodeTypes.DIRECTIVE
+      if (isDirKey && !keyProp.exp) {
         // resolve :key shorthand #10882
         transformBindShorthand(keyProp, context)
       }
-
-      // #12013
-      if (keyProp && keyProp.type !== NodeTypes.ATTRIBUTE && keyProp.exp) {
-        keyProp.exp = processExpression(
-          keyProp.exp as SimpleExpressionNode,
-          context,
-        )
-      }
-
-      const keyExp =
+      let keyExp =
         keyProp &&
         (keyProp.type === NodeTypes.ATTRIBUTE
           ? keyProp.value
             ? createSimpleExpression(keyProp.value.content, true)
             : undefined
           : keyProp.exp)
+
+      if (memo && keyExp && isDirKey) {
+        if (!__BROWSER__) {
+          keyProp.exp = keyExp = processExpression(
+            keyExp as SimpleExpressionNode,
+            context,
+          )
+        }
+      }
       const keyProperty =
         keyProp && keyExp ? createObjectProperty(`key`, keyExp) : null
 
@@ -97,6 +98,12 @@ export const transformFor: NodeTransform = createStructuralDirectiveTransform(
             context,
           )
         }
+        if (keyProperty && keyProp!.type !== NodeTypes.ATTRIBUTE) {
+          keyProperty.value = processExpression(
+            keyProperty.value as SimpleExpressionNode,
+            context,
+          )
+        }
       }
 
       const isStableFragment =