refactor(runtime-vapor): cache event handlers on element (#12610)

packages/runtime-vapor/src/componentMetadata.ts

@@ -1,25 +0,0 @@
-import { remove } from '@vue/shared'
-import type { DelegatedHandler } from './dom/event'
-
-export enum MetadataKind {
-  prop,
-  event,
-}
-
-export type ComponentMetadata = [
-  props: Record<string, any>,
-  events: Record<string, DelegatedHandler[]>,
-]
-
-export function getMetadata(
-  el: Node & { $$metadata?: ComponentMetadata },
-): ComponentMetadata {
-  return el.$$metadata || (el.$$metadata = [{}, {}])
-}
-
-export function recordEventMetadata(el: Node, key: string, value: any) {
-  const metadata = getMetadata(el)[MetadataKind.event]
-  const handlers = (metadata[key] ||= [])
-  handlers.push(value)
-  return (): void => remove(handlers, value)
-}

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

@@ -3,12 +3,8 @@ import {
   onEffectCleanup,
   onScopeDispose,
 } from '@vue/reactivity'
-import {
-  MetadataKind,
-  getMetadata,
-  recordEventMetadata,
-} from '../componentMetadata'
 import { queuePostFlushCb } from '@vue/runtime-dom'
+import { remove } from '@vue/shared'
 
 export function addEventListener(
   el: Element,
@@ -49,13 +45,17 @@ export type DelegatedHandler = {
 }
 
 export function delegate(
-  el: HTMLElement,
+  el: any,
   event: string,
   handlerGetter: () => undefined | ((...args: any[]) => any),
 ): void {
   const handler: DelegatedHandler = eventHandler(handlerGetter)
   handler.delegate = true
-  recordEventMetadata(el, event, handler)
+
+  const cacheKey = `$evt${event}`
+  const handlers: DelegatedHandler[] = el[cacheKey] || (el[cacheKey] = [])
+  handlers.push(handler)
+  onScopeDispose(() => remove(handlers, handler))
 }
 
 function eventHandler(getter: () => undefined | ((...args: any[]) => any)) {
@@ -98,7 +98,7 @@ const delegatedEventHandler = (e: Event) => {
     },
   })
   while (node !== null) {
-    const handlers = getMetadata(node)[MetadataKind.event][e.type]
+    const handlers = node[`$evt${e.type}`] as DelegatedHandler[]
     if (handlers) {
       for (const handler of handlers) {
         if (handler.delegate && !node.disabled) {