diff --git a/packages/compiler-vapor/src/generators/block.ts b/packages/compiler-vapor/src/generators/block.ts index 77ba4bee8..4e568a91e 100644 --- a/packages/compiler-vapor/src/generators/block.ts +++ b/packages/compiler-vapor/src/generators/block.ts @@ -55,6 +55,12 @@ export function genBlockContent( push(...genOperations(operation, 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 `) const returnNodes = returns.map(n => `n${n}`) diff --git a/packages/compiler-vapor/src/ir/index.ts b/packages/compiler-vapor/src/ir/index.ts index 1509d3742..b048e40d7 100644 --- a/packages/compiler-vapor/src/ir/index.ts +++ b/packages/compiler-vapor/src/ir/index.ts @@ -259,6 +259,7 @@ export interface IRDynamicInfo { children: IRDynamicInfo[] template?: number hasDynamicChild?: boolean + needsKey?: boolean } export interface IREffect { diff --git a/packages/compiler-vapor/src/transforms/vIf.ts b/packages/compiler-vapor/src/transforms/vIf.ts index 8fad9c314..bf9b178fd 100644 --- a/packages/compiler-vapor/src/transforms/vIf.ts +++ b/packages/compiler-vapor/src/transforms/vIf.ts @@ -1,6 +1,7 @@ import { type ElementNode, ErrorCodes, + NodeTypes, createCompilerError, createSimpleExpression, } from '@vue/compiler-dom' @@ -123,5 +124,17 @@ export function createIfBranch( const branch: BlockIRNode = newBlock(node) const exitBlock = context.enterBlock(branch) 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] } + +function isInTransition(context: TransformContext): boolean { + const parentNode = context.parent && context.parent.node + return !!( + parentNode && + parentNode.type === NodeTypes.ELEMENT && + (parentNode.tag === 'transition' || parentNode.tag === 'Transition') + ) +}