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

This commit is contained in:
daiwei 2025-01-14 21:54:58 +08:00
parent 2e6ec39811
commit cf88048190
2 changed files with 8 additions and 3 deletions

View File

@ -5,13 +5,14 @@ exports[`compiler: v-memo transform > element v-for key expression prefixing + v
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock("div", null, [ 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)) const _memo = (_ctx.getLetter(data))
if (_cached && _cached.key === _ctx.getId(data) && _isMemoSame(_cached, _memo)) return _cached if (_cached && _cached.key === _ctx.getId(data) && _isMemoSame(_cached, _memo)) return _cached
const _item = (_openBlock(), _createElementBlock("span", { const _item = (_openBlock(), _createElementBlock("span", {
key: _ctx.getId(data) key: _ctx.getId(data)
})) }))
_item.memo = _memo _item.memo = _memo
_item.cacheIndex = _key
return _item return _item
}, _cache, 0), 128 /* KEYED_FRAGMENT */)) }, _cache, 0), 128 /* KEYED_FRAGMENT */))
])) ]))
@ -53,11 +54,12 @@ exports[`compiler: v-memo transform > on template v-for 1`] = `
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock("div", null, [ 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]) const _memo = ([x, y === _ctx.z])
if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
const _item = (_openBlock(), _createElementBlock("span", { key: x }, "foobar")) const _item = (_openBlock(), _createElementBlock("span", { key: x }, "foobar"))
_item.memo = _memo _item.memo = _memo
_item.cacheIndex = _key
return _item return _item
}, _cache, 0), 128 /* KEYED_FRAGMENT */)) }, _cache, 0), 128 /* KEYED_FRAGMENT */))
])) ]))
@ -69,13 +71,14 @@ exports[`compiler: v-memo transform > on v-for 1`] = `
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock("div", null, [ 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]) const _memo = ([x, y === _ctx.z])
if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
const _item = (_openBlock(), _createElementBlock("div", { key: x }, [ const _item = (_openBlock(), _createElementBlock("div", { key: x }, [
_createElementVNode("span", null, "foobar") _createElementVNode("span", null, "foobar")
])) ]))
_item.memo = _memo _item.memo = _memo
_item.cacheIndex = _key
return _item return _item
}, _cache, 0), 128 /* KEYED_FRAGMENT */)) }, _cache, 0), 128 /* KEYED_FRAGMENT */))
])) ]))

View File

@ -218,6 +218,7 @@ export const transformFor: NodeTransform = createStructuralDirectiveTransform(
} }
if (memo) { if (memo) {
forNode.parseResult.key = createSimpleExpression('_key')
const loop = createFunctionExpression( const loop = createFunctionExpression(
createForLoopParams(forNode.parseResult, [ createForLoopParams(forNode.parseResult, [
createSimpleExpression(`_cached`), createSimpleExpression(`_cached`),
@ -234,6 +235,7 @@ export const transformFor: NodeTransform = createStructuralDirectiveTransform(
]), ]),
createCompoundExpression([`const _item = `, childBlock as any]), createCompoundExpression([`const _item = `, childBlock as any]),
createSimpleExpression(`_item.memo = _memo`), createSimpleExpression(`_item.memo = _memo`),
createSimpleExpression(`_item.cacheIndex = _key`),
createSimpleExpression(`return _item`), createSimpleExpression(`return _item`),
]) ])
renderExp.arguments.push( renderExp.arguments.push(