fix(vMemo/vFor): add cacheIndex to v-for items for clean renderCache …

…during unmounting
vuejs · Jan 14, 2025 · cf88048 · cf88048
1 parent 2e6ec39
commit cf88048
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
@@ -5,13 +5,14 @@ exports[`compiler: v-memo transform > element v-for key expression prefixing + v
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock("div", null, [
-    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.tableData, (data, __, ___, _cached) => {
+    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.tableData, (data, _key, ___, _cached) => {
       const _memo = (_ctx.getLetter(data))
       if (_cached && _cached.key === _ctx.getId(data) && _isMemoSame(_cached, _memo)) return _cached
       const _item = (_openBlock(), _createElementBlock("span", {
         key: _ctx.getId(data)
       }))
       _item.memo = _memo
+      _item.cacheIndex = _key
       return _item
     }, _cache, 0), 128 /* KEYED_FRAGMENT */))
   ]))
@@ -53,11 +54,12 @@ exports[`compiler: v-memo transform > on template v-for 1`] = `
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock("div", null, [
-    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
+    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, _key, ___, _cached) => {
       const _memo = ([x, y === _ctx.z])
       if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
       const _item = (_openBlock(), _createElementBlock("span", { key: x }, "foobar"))
       _item.memo = _memo
+      _item.cacheIndex = _key
       return _item
     }, _cache, 0), 128 /* KEYED_FRAGMENT */))
   ]))
@@ -69,13 +71,14 @@ exports[`compiler: v-memo transform > on v-for 1`] = `
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock("div", null, [
-    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
+    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, _key, ___, _cached) => {
       const _memo = ([x, y === _ctx.z])
       if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
       const _item = (_openBlock(), _createElementBlock("div", { key: x }, [
         _createElementVNode("span", null, "foobar")
       ]))
       _item.memo = _memo
+      _item.cacheIndex = _key
       return _item
     }, _cache, 0), 128 /* KEYED_FRAGMENT */))
   ]))

diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
@@ -218,6 +218,7 @@ export const transformFor: NodeTransform = createStructuralDirectiveTransform(
         }
 
         if (memo) {
+          forNode.parseResult.key = createSimpleExpression('_key')
           const loop = createFunctionExpression(
             createForLoopParams(forNode.parseResult, [
               createSimpleExpression(`_cached`),
@@ -234,6 +235,7 @@ export const transformFor: NodeTransform = createStructuralDirectiveTransform(
             ]),
             createCompoundExpression([`const _item = `, childBlock as any]),
             createSimpleExpression(`_item.memo = _memo`),
+            createSimpleExpression(`_item.cacheIndex = _key`),
             createSimpleExpression(`return _item`),
           ])
           renderExp.arguments.push(