mirror of https://github.com/vuejs/core.git
wip: auto generate key for vif branch if it wraps in transition
This commit is contained in:
parent
75de3bb9ff
commit
3a31f0845e
|
@ -55,6 +55,12 @@ export function genBlockContent(
|
||||||
push(...genOperations(operation, context))
|
push(...genOperations(operation, context))
|
||||||
push(...genEffects(effect, context))
|
push(...genEffects(effect, context))
|
||||||
|
|
||||||
|
if (dynamic.needsKey) {
|
||||||
|
for (const child of dynamic.children) {
|
||||||
|
push(NEWLINE, `n${child.id}.key = ${JSON.stringify(child.id)}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
push(NEWLINE, `return `)
|
push(NEWLINE, `return `)
|
||||||
|
|
||||||
const returnNodes = returns.map(n => `n${n}`)
|
const returnNodes = returns.map(n => `n${n}`)
|
||||||
|
|
|
@ -259,6 +259,7 @@ export interface IRDynamicInfo {
|
||||||
children: IRDynamicInfo[]
|
children: IRDynamicInfo[]
|
||||||
template?: number
|
template?: number
|
||||||
hasDynamicChild?: boolean
|
hasDynamicChild?: boolean
|
||||||
|
needsKey?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IREffect {
|
export interface IREffect {
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import {
|
import {
|
||||||
type ElementNode,
|
type ElementNode,
|
||||||
ErrorCodes,
|
ErrorCodes,
|
||||||
|
NodeTypes,
|
||||||
createCompilerError,
|
createCompilerError,
|
||||||
createSimpleExpression,
|
createSimpleExpression,
|
||||||
} from '@vue/compiler-dom'
|
} from '@vue/compiler-dom'
|
||||||
|
@ -123,5 +124,17 @@ export function createIfBranch(
|
||||||
const branch: BlockIRNode = newBlock(node)
|
const branch: BlockIRNode = newBlock(node)
|
||||||
const exitBlock = context.enterBlock(branch)
|
const exitBlock = context.enterBlock(branch)
|
||||||
context.reference()
|
context.reference()
|
||||||
|
// generate key for branch result when it's in transition
|
||||||
|
// the key will be used to cache node at runtime
|
||||||
|
branch.dynamic.needsKey = isInTransition(context)
|
||||||
return [branch, exitBlock]
|
return [branch, exitBlock]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isInTransition(context: TransformContext<ElementNode>): boolean {
|
||||||
|
const parentNode = context.parent && context.parent.node
|
||||||
|
return !!(
|
||||||
|
parentNode &&
|
||||||
|
parentNode.type === NodeTypes.ELEMENT &&
|
||||||
|
(parentNode.tag === 'transition' || parentNode.tag === 'Transition')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue