diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts index ccd87e80333..f1f30d5b89f 100644 --- a/packages/compiler-core/src/transforms/transformElement.ts +++ b/packages/compiler-core/src/transforms/transformElement.ts @@ -20,7 +20,13 @@ import { DirectiveArguments, createVNodeCall } from '../ast' -import { PatchFlags, PatchFlagNames, isSymbol, isOn } from '@vue/shared' +import { + PatchFlags, + PatchFlagNames, + isSymbol, + isOn, + isObject +} from '@vue/shared' import { createCompilerError, ErrorCodes } from '../errors' import { RESOLVE_DIRECTIVE, @@ -68,6 +74,8 @@ export const transformElement: NodeTransform = (node, context) => { const vnodeTag = isComponent ? resolveComponentType(node as ComponentNode, context) : `"${tag}"` + const isDynamicComponent = + isObject(vnodeTag) && vnodeTag.callee === RESOLVE_DYNAMIC_COMPONENT let vnodeProps: VNodeCall['props'] let vnodeChildren: VNodeCall['children'] @@ -78,15 +86,17 @@ export const transformElement: NodeTransform = (node, context) => { let vnodeDirectives: VNodeCall['directives'] let shouldUseBlock = - !isComponent && - // and 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)) + // dynamic component may resolve to plain elements + isDynamicComponent || + (!isComponent && + // and 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) {