wip: auto generate key for vif branch if it wraps in transition

This commit is contained in:
daiwei 2025-03-04 14:20:51 +08:00
parent 75de3bb9ff
commit 3a31f0845e
3 changed files with 20 additions and 0 deletions

View File

@ -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}`)

View File

@ -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 {

View File

@ -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')
)
}