perf(vapor): improve component instantiation by using class

Mounting 10k components went from ~100ms to ~60ms with this change.

Author: yyx990803

packages/runtime-vapor/src/apiCreateComponent.ts

@@ -1,7 +1,6 @@
 import {
   type Component,
-  type ComponentInternalInstance,
-  createComponentInstance,
+  ComponentInternalInstance,
   currentInstance,
 } from './component'
 import { setupComponent } from './apiRender'
@@ -24,7 +23,7 @@ export function createComponent(
     return fallbackComponent(comp, rawProps, slots, current, singleRoot)
   }
 
-  const instance = createComponentInstance(
+  const instance = new ComponentInternalInstance(
     comp,
     singleRoot ? withAttrs(rawProps) : rawProps,
     slots,
@@ -42,7 +41,7 @@ export function createComponent(
   setupComponent(instance)
 
   // register sub-component with current component for lifecycle management
-  current.comps.add(instance)
+  // current.comps.add(instance)
 
   return instance
 }

packages/runtime-vapor/src/apiCreateFor.ts

@@ -13,8 +13,7 @@ import {
 } from './dom/element'
 import { type Block, type Fragment, fragmentKey } from './block'
 import { warn } from './warning'
-import { currentInstance } from './component'
-import { componentKey } from './component'
+import { currentInstance, isVaporComponent } from './component'
 import type { DynamicSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
 
@@ -382,7 +381,7 @@ function normalizeAnchor(node: Block): Node {
     return node
   } else if (isArray(node)) {
     return normalizeAnchor(node[0])
-  } else if (componentKey in node) {
+  } else if (isVaporComponent(node)) {
     return normalizeAnchor(node.block!)
   } else {
     return normalizeAnchor(node.nodes!)

packages/runtime-vapor/src/apiCreateVaporApp.ts

@@ -1,8 +1,7 @@
 import { NO, getGlobalThis, isFunction, isObject } from '@vue/shared'
 import {
   type Component,
-  type ComponentInternalInstance,
-  createComponentInstance,
+  ComponentInternalInstance,
   validateComponentName,
 } from './component'
 import { warn } from './warning'
@@ -126,7 +125,7 @@ export function createVaporApp(
           container.textContent = ''
         }
 
-        instance = createComponentInstance(
+        instance = new ComponentInternalInstance(
           rootComponent,
           rootProps,
           null,

packages/runtime-vapor/src/apiRender.ts

@@ -1,9 +1,9 @@
 import {
   type ComponentInternalInstance,
-  componentKey,
   createSetupContext,
   getAttrsProxy,
   getSlotsProxy,
+  isVaporComponent,
   setCurrentInstance,
   validateComponentName,
 } from './component'
@@ -60,9 +60,9 @@ export function setupComponent(instance: ComponentInternalInstance): void {
       if (
         stateOrNode &&
         (stateOrNode instanceof Node ||
+          isVaporComponent(stateOrNode) ||
           isArray(stateOrNode) ||
-          fragmentKey in stateOrNode ||
-          componentKey in stateOrNode)
+          fragmentKey in stateOrNode)
       ) {
         block = stateOrNode
       } else if (isObject(stateOrNode)) {

packages/runtime-vapor/src/block.ts

@@ -1,5 +1,5 @@
 import { isArray } from '@vue/shared'
-import { type ComponentInternalInstance, componentKey } from './component'
+import { type ComponentInternalInstance, isVaporComponent } from './component'
 
 export const fragmentKey: unique symbol = Symbol(__DEV__ ? `fragmentKey` : ``)
 
@@ -17,7 +17,7 @@ export function normalizeBlock(block: Block): Node[] {
     nodes.push(block)
   } else if (isArray(block)) {
     block.forEach(child => nodes.push(...normalizeBlock(child)))
-  } else if (componentKey in block) {
+  } else if (isVaporComponent(block)) {
     nodes.push(...normalizeBlock(block.block!))
   } else if (block) {
     nodes.push(...normalizeBlock(block.nodes))
@@ -34,7 +34,7 @@ export function findFirstRootElement(
 }
 
 export function getFirstNode(block: Block | null): Node | undefined {
-  if (!block || componentKey in block) return
+  if (!block || isVaporComponent(block)) return
   if (block instanceof Node) return block
   if (isArray(block)) {
     if (block.length === 1) {