perf(transform-vif): don't need to createBlock for a component (#853)

Author: ysj16

packages/compiler-core/__tests__/transforms/vIf.spec.ts

@@ -12,7 +12,8 @@ import {
   SimpleExpressionNode,
   ConditionalExpression,
   IfConditionalExpression,
-  VNodeCall
+  VNodeCall,
+  ElementTypes
 } from '../../src/ast'
 import { ErrorCodes } from '../../src/errors'
 import { CompilerOptions, generate } from '../../src'
@@ -77,6 +78,22 @@ describe('compiler: v-if', () => {
       expect(node.branches[0].children[2].type).toBe(NodeTypes.ELEMENT)
       expect((node.branches[0].children[2] as ElementNode).tag).toBe(`p`)
     })
+  
+    test('component v-if', () => {
+      const { node } = parseWithIfTransform(`<Component v-if="ok"></Component>`)
+      expect(node.type).toBe(NodeTypes.IF)
+      expect(node.branches.length).toBe(1)
+      expect((node.branches[0].children[0] as ElementNode).tag).toBe(
+        `Component`
+      )
+      expect((node.branches[0].children[0] as ElementNode).tagType).toBe(
+        ElementTypes.COMPONENT
+      )
+      expect(
+        ((node.branches[0].children[0] as ElementNode)!
+          .codegenNode as VNodeCall)!.isBlock
+      ).toBe(false)
+    })
 
     test('v-if + v-else', () => {
       const { node } = parseWithIfTransform(`<div v-if="ok"/><p v-else/>`)

packages/compiler-core/src/transforms/vIf.ts

@@ -212,7 +212,12 @@ function createChildrenCodegenNode(
     const vnodeCall = (firstChild as ElementNode)
       .codegenNode as BlockCodegenNode
     // Change createVNode to createBlock.
-    if (vnodeCall.type === NodeTypes.VNODE_CALL) {
+    if (
+      vnodeCall.type === NodeTypes.VNODE_CALL &&
+      // component vnodes are always tracked and its children are
+      // compiled into slots so no need to make it a block
+      (firstChild as ElementNode).tagType !== ElementTypes.COMPONENT
+    ) {
       vnodeCall.isBlock = true
       helper(OPEN_BLOCK)
       helper(CREATE_BLOCK)