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

fix(compiler-core): elements with dynamic keys should be forced into blocks

Browse Source 
fix #916
This commit is contained in:
Evan You 2020-04-07 18:44:21 -04:00
parent 2c9374dd91
commit d531686f91
4 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
View File

@ -292,10 +292,10 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic k
return function render(_ctx, _cache) {
with (_ctx) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const { openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"div\\", { key: foo })
(_openBlock(), _createBlock(\\"div\\", { key: foo }))
]))
}
}"

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

@ -36,7 +36,7 @@ exports[`compiler: v-for codegen keyed v-for 1`] = `
return function render(_ctx, _cache) {
with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\", { key: item }))

13
packages/compiler-core/__tests__/transforms/transformElement.spec.ts
View File

@ -861,4 +861,17 @@ describe('compiler: element transform', () => {
isBlock: true
})
})
// #938
test('element with dynamic keys should be forced into blocks', () => {
const ast = parse(`<div><div :key="foo" /></div>`)
transform(ast, {
nodeTransforms: [transformElement]
})
expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
type: NodeTypes.VNODE_CALL,
tag: `"div"`,
isBlock: true
})
})
})

16
packages/compiler-core/src/transforms/transformElement.ts
View File

@ -77,12 +77,16 @@ export const transformElement: NodeTransform = (node, context) => {
let dynamicPropNames: string[] | undefined
let vnodeDirectives: VNodeCall['directives']
// <svg> and <foreignObject> must be forced into blocks so that block
// updates inside get proper isSVG flag at runtime. (#639, #643)
// This is technically web-specific, but splitting the logic out of core
// leads to too much unnecessary complexity.
let shouldUseBlock =
!isComponent && (tag === 'svg' || tag === 'foreignObject')
!isComponent &&
// <svg> and <foreignObject> must be forced into blocks so that block
// updates inside get proper isSVG flag at runtime. (#639, #643)
// This is technically web-specific, but splitting the logic out of core
// leads to too much unnecessary complexity.
(tag === 'svg' ||
tag === 'foreignObject' ||
// #938: elements with dynamic keys should be forced into blocks
findProp(node, 'key', true))
// props
if (props.length > 0) {
@ -188,7 +192,7 @@ export const transformElement: NodeTransform = (node, context) => {
vnodePatchFlag,
vnodeDynamicProps,
vnodeDirectives,
shouldUseBlock,
!!shouldUseBlock,
false /* isForBlock */,
node.loc
)