theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(compiler-core): handle v-memo in template v-for (#5291)

Browse Source 
fix #5288
This commit is contained in:
edison 2022-01-21 14:54:46 +08:00 committed by GitHub
parent b2bac9fa17
commit 9f55e6fbb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
View File

@ -36,7 +36,7 @@ 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 }, __, ___, _cached) => {
const _memo = ([x, y === 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

26
packages/compiler-core/src/transforms/vFor.ts
View File

@ -59,6 +59,7 @@ export const transformFor = createStructuralDirectiveTransform(
const renderExp = createCallExpression(helper(RENDER_LIST), [ const renderExp = createCallExpression(helper(RENDER_LIST), [
forNode.source forNode.source
]) as ForRenderListExpression ]) as ForRenderListExpression
const isTemplate = isTemplateNode(node)
const memo = findDir(node, 'memo') const memo = findDir(node, 'memo')
const keyProp = findProp(node, `key`) const keyProp = findProp(node, `key`)
const keyExp = const keyExp =
@ -68,22 +69,24 @@ export const transformFor = createStructuralDirectiveTransform(
: keyProp.exp!) : keyProp.exp!)
const keyProperty = keyProp ? createObjectProperty(`key`, keyExp!) : null const keyProperty = keyProp ? createObjectProperty(`key`, keyExp!) : null
if ( if (!__BROWSER__ && isTemplate) {
!__BROWSER__ && // #2085 / #5288 process :key and v-memo expressions need to be
context.prefixIdentifiers && // processed on `<template v-for>`. In this case the node is discarded
keyProperty && // and never traversed so its binding expressions won't be processed
keyProp!.type !== NodeTypes.ATTRIBUTE // by the normal transforms.
) { if (memo) {
// #2085 process :key expression needs to be processed in order for it memo.exp = processExpression(
// to behave consistently for <template v-for> and <div v-for>. memo.exp! as SimpleExpressionNode,
// In the case of `<template v-for>`, the node is discarded and never context
// traversed so its key expression won't be processed by the normal )
// transforms. }
if (keyProperty && keyProp!.type !== NodeTypes.ATTRIBUTE) {
keyProperty.value = processExpression( keyProperty.value = processExpression(
keyProperty.value as SimpleExpressionNode, keyProperty.value as SimpleExpressionNode,
context context
) )
} }
}
const isStableFragment = const isStableFragment =
forNode.source.type === NodeTypes.SIMPLE_EXPRESSION && forNode.source.type === NodeTypes.SIMPLE_EXPRESSION &&
@ -112,7 +115,6 @@ export const transformFor = createStructuralDirectiveTransform(
return () => { return () => {
// finish the codegen now that all children have been traversed // finish the codegen now that all children have been traversed
let childBlock: BlockCodegenNode let childBlock: BlockCodegenNode
const isTemplate = isTemplateNode(node)
const { children } = forNode const { children } = forNode
// check <template v-for> key placement // check <template v-for> key placement