perf(vapor): optimize cache property lookup

Author: yyx990803

packages/runtime-vapor/src/apiCreateApp.ts

@@ -19,10 +19,13 @@ import {
 } from '@vue/runtime-dom'
 import type { RawProps } from './componentProps'
 import { getGlobalThis } from '@vue/shared'
+import { optimizePropertyLookup } from './dom/prop'
 
 let _createApp: CreateAppFunction<ParentNode, VaporComponent>
 
 const mountApp: AppMountFn<ParentNode> = (app, container) => {
+  optimizePropertyLookup()
+
   // clear content before mounting
   if (container.nodeType === 1 /* Node.ELEMENT_NODE */) {
     container.textContent = ''

packages/runtime-vapor/src/dom/prop.ts

@@ -244,3 +244,22 @@ export function setDynamicProp(
   }
   return value
 }
+
+let isOptimized = false
+
+/**
+ * Optimize property lookup for cache properties on Element and Text nodes
+ */
+export function optimizePropertyLookup(): void {
+  if (isOptimized) return
+  isOptimized = true
+  const proto = Element.prototype as any
+  proto.$evtclick = undefined
+  proto.$root = false
+  proto.$html =
+    proto.$txt =
+    proto.$cls =
+    proto.$sty =
+    (Text.prototype as any).$txt =
+      ''
+}

packages/runtime-vapor/src/vdomInterop.ts

@@ -1,4 +1,5 @@
 import {
+  type App,
   type ComponentInternalInstance,
   type ConcreteComponent,
   MoveType,
@@ -31,6 +32,7 @@ import { type RawProps, rawPropsProxyHandlers } from './componentProps'
 import type { RawSlots, VaporSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
 import { createTextNode } from './dom/node'
+import { optimizePropertyLookup } from './dom/prop'
 
 // mounting vapor components and slots in vdom
 const vaporInteropImpl: Omit<
@@ -283,4 +285,9 @@ export const vaporInteropPlugin: Plugin = app => {
     vdomUnmount: internals.umt,
     vdomSlot: renderVDOMSlot.bind(null, internals),
   })
+  const mount = app.mount
+  app.mount = ((...args) => {
+    optimizePropertyLookup()
+    return mount(...args)
+  }) satisfies App['mount']
 }