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 5fc14defb43..b1f750f15d8 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap @@ -37,7 +37,7 @@ export function render(_ctx, _cache) { return (_openBlock(), _createElementBlock("div", null, [ (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => { const _memo = ([x, y === _ctx.z]) - if (_cached && _cached.el && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached + if (_cached && _cached.el && _cached.key === (x) && _isMemoSame(_cached, _memo)) return _cached const _item = (_openBlock(), _createElementBlock("span", { key: x }, "foobar")) _item.memo = _memo return _item @@ -53,7 +53,7 @@ export function render(_ctx, _cache) { return (_openBlock(), _createElementBlock("div", null, [ (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => { const _memo = ([x, y === _ctx.z]) - if (_cached && _cached.el && _cached.key === _ctx.get(x) && _isMemoSame(_cached, _memo)) return _cached + if (_cached && _cached.el && _cached.key === (_ctx.get(x)) && _isMemoSame(_cached, _memo)) return _cached const _item = (_openBlock(), _createElementBlock("span", { key: _ctx.get(x) }, "foobar")) @@ -71,7 +71,7 @@ export function render(_ctx, _cache) { return (_openBlock(), _createElementBlock("div", null, [ (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => { const _memo = ([x, y === _ctx.z]) - if (_cached && _cached.el && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached + if (_cached && _cached.el && _cached.key === (x) && _isMemoSame(_cached, _memo)) return _cached const _item = (_openBlock(), _createElementBlock("div", { key: x }, [ _createElementVNode("span", null, "foobar") ])) @@ -89,7 +89,7 @@ export function render(_ctx, _cache) { return (_openBlock(), _createElementBlock("div", null, [ (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => { const _memo = ([x, y === _ctx.z]) - if (_cached && _cached.el && _cached.key === _ctx.get(x) && _isMemoSame(_cached, _memo)) return _cached + if (_cached && _cached.el && _cached.key === (_ctx.get(x)) && _isMemoSame(_cached, _memo)) return _cached const _item = (_openBlock(), _createElementBlock("div", { key: _ctx.get(x) }, [ diff --git a/packages/compiler-core/__tests__/transforms/vMemo.spec.ts b/packages/compiler-core/__tests__/transforms/vMemo.spec.ts index ae21bf9fa1d..11db25934a7 100644 --- a/packages/compiler-core/__tests__/transforms/vMemo.spec.ts +++ b/packages/compiler-core/__tests__/transforms/vMemo.spec.ts @@ -75,6 +75,16 @@ describe('compiler: v-memo transform', () => { ).toMatchSnapshot() }) + test('on v-for w/ conditional key expression', () => { + const code = compile( + `
+ foobar +
`, + ) + + expect(code).toContain(`_cached.key === (x ? x : y)`) + }) + test('on template v-for', () => { expect( compile( diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts index ebf67d3d7d1..7899fb813d0 100644 --- a/packages/compiler-core/src/transforms/vFor.ts +++ b/packages/compiler-core/src/transforms/vFor.ts @@ -225,7 +225,7 @@ export const transformFor: NodeTransform = createStructuralDirectiveTransform( createCompoundExpression([`const _memo = (`, memo.exp!, `)`]), createCompoundExpression([ `if (_cached && _cached.el`, - ...(keyExp ? [` && _cached.key === `, keyExp] : []), + ...(keyExp ? [` && _cached.key === (`, keyExp, `)`] : []), ` && ${context.helperString( IS_MEMO_SAME, )}(_cached, _memo)) return _cached`,