Skip to content

Commit

Permalink
fix(compiler-core): handle v-memo in template v-for (#5291)
Browse files Browse the repository at this point in the history
fix #5288
  • Loading branch information
edison1105 authored Jan 21, 2022
1 parent b2bac9f commit 9f55e6f
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ 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) => {
const _memo = ([x, y === z])
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
Expand Down
34 changes: 18 additions & 16 deletions packages/compiler-core/src/transforms/vFor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export const transformFor = createStructuralDirectiveTransform(
const renderExp = createCallExpression(helper(RENDER_LIST), [
forNode.source
]) as ForRenderListExpression
const isTemplate = isTemplateNode(node)
const memo = findDir(node, 'memo')
const keyProp = findProp(node, `key`)
const keyExp =
Expand All @@ -68,21 +69,23 @@ export const transformFor = createStructuralDirectiveTransform(
: keyProp.exp!)
const keyProperty = keyProp ? createObjectProperty(`key`, keyExp!) : null

if (
!__BROWSER__ &&
context.prefixIdentifiers &&
keyProperty &&
keyProp!.type !== NodeTypes.ATTRIBUTE
) {
// #2085 process :key expression needs to be processed in order for it
// to behave consistently for <template v-for> and <div v-for>.
// In the case of `<template v-for>`, the node is discarded and never
// traversed so its key expression won't be processed by the normal
// transforms.
keyProperty.value = processExpression(
keyProperty.value as SimpleExpressionNode,
context
)
if (!__BROWSER__ && isTemplate) {
// #2085 / #5288 process :key and v-memo expressions need to be
// processed on `<template v-for>`. In this case the node is discarded
// and never traversed so its binding expressions won't be processed
// by the normal transforms.
if (memo) {
memo.exp = processExpression(
memo.exp! as SimpleExpressionNode,
context
)
}
if (keyProperty && keyProp!.type !== NodeTypes.ATTRIBUTE) {
keyProperty.value = processExpression(
keyProperty.value as SimpleExpressionNode,
context
)
}
}

const isStableFragment =
Expand Down Expand Up @@ -112,7 +115,6 @@ export const transformFor = createStructuralDirectiveTransform(
return () => {
// finish the codegen now that all children have been traversed
let childBlock: BlockCodegenNode
const isTemplate = isTemplateNode(node)
const { children } = forNode

// check <template v-for> key placement
Expand Down

0 comments on commit 9f55e6f

Please sign in to comment.