fix(compiler-core): template v-if should never be treated as dev root…

… fragment close vuejs#5189
iwusong · May 13, 2022 · ca38b2f · ca38b2f
1 parent 1b213c6
commit ca38b2f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
@@ -259,6 +259,7 @@ export interface IfBranchNode extends Node {
   condition: ExpressionNode | undefined // else
   children: TemplateChildNode[]
   userKey?: AttributeNode | DirectiveNode
+  isTemplateIf?: boolean
 }
 
 export interface ForNode extends Node {

diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
@@ -209,15 +209,14 @@ export function processIf(
 }
 
 function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode {
+  const isTemplateIf = node.tagType === ElementTypes.TEMPLATE
   return {
     type: NodeTypes.IF_BRANCH,
     loc: node.loc,
     condition: dir.name === 'else' ? undefined : dir.exp,
-    children:
-      node.tagType === ElementTypes.TEMPLATE && !findDir(node, 'for')
-        ? node.children
-        : [node],
-    userKey: findProp(node, `key`)
+    children: isTemplateIf && !findDir(node, 'for') ? node.children : [node],
+    userKey: findProp(node, `key`),
+    isTemplateIf
   }
 }
 
@@ -272,13 +271,10 @@ function createChildrenCodegenNode(
       let patchFlagText = PatchFlagNames[PatchFlags.STABLE_FRAGMENT]
       // check if the fragment actually contains a single valid child with
       // the rest being comments
-      const commentNodeCount = children.filter(
-        c => c.type === NodeTypes.COMMENT
-      ).length
       if (
         __DEV__ &&
-        commentNodeCount &&
-        children.length - commentNodeCount === 1
+        !branch.isTemplateIf &&
+        children.filter(c => c.type !== NodeTypes.COMMENT).length === 1
       ) {
         patchFlag |= PatchFlags.DEV_ROOT_FRAGMENT
         patchFlagText += `, ${PatchFlagNames[PatchFlags.DEV_ROOT_FRAGMENT]}`