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

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
index 86e0b3d2fd5666afee033230cc382e035370db30..0ec807293041ed920e2284bb00ae6b473d6a1c87 100644 (file)
--- 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
index 0dca0ba9ab437216347a353dcabcec01d44fc07b..5d1ceb30cb22b67e3397e415a58edaaced1ad34e 100644 (file)
--- 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(