From 69422d50d874cb2bd624adac34787491f18b45cd Mon Sep 17 00:00:00 2001
From: Evan You <evan@vuejs.org>
Date: Sat, 8 Feb 2025 22:40:37 +0800
Subject: [PATCH] wip(vapor): optimize event handling

---
 packages/runtime-vapor/src/block.ts     |  8 ----
 packages/runtime-vapor/src/dom/event.ts | 53 +++++++++----------------
 2 files changed, 18 insertions(+), 43 deletions(-)

diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts
index 0b8bdee02..af1887055 100644
--- a/packages/runtime-vapor/src/block.ts
+++ b/packages/runtime-vapor/src/block.ts
@@ -132,14 +132,6 @@ export function prepend(parent: ParentNode, ...blocks: Block[]): void {
   while (i--) insert(blocks[i], parent, 0)
 }
 
-/**
- * Optimized children removal: record all parents with unmounted children
- * during each root remove call, and update their children list by filtering
- * unmounted children
- */
-// export let parentsWithUnmountedChildren: Set<VaporComponentInstance> | null =
-//   null
-
 export function remove(block: Block, parent?: ParentNode): void {
   if (block instanceof Node) {
     parent && parent.removeChild(block)
diff --git a/packages/runtime-vapor/src/dom/event.ts b/packages/runtime-vapor/src/dom/event.ts
index 4f7b516f1..55cfabfa1 100644
--- a/packages/runtime-vapor/src/dom/event.ts
+++ b/packages/runtime-vapor/src/dom/event.ts
@@ -1,10 +1,4 @@
-import {
-  getCurrentScope,
-  onEffectCleanup,
-  onScopeDispose,
-} from '@vue/reactivity'
-import { queuePostFlushCb } from '@vue/runtime-dom'
-import { remove } from '@vue/shared'
+import { onEffectCleanup } from '@vue/reactivity'
 
 export function addEventListener(
   el: Element,
@@ -22,26 +16,13 @@ export function on(
   handlerGetter: () => undefined | ((...args: any[]) => any),
   options: AddEventListenerOptions & { effect?: boolean } = {},
 ): void {
-  const handler: DelegatedHandler = eventHandler(handlerGetter)
-  let cleanupEvent: (() => void) | undefined
-  queuePostFlushCb(() => {
-    cleanupEvent = addEventListener(el, event, handler, options)
-  })
-
+  const handler = eventHandler(handlerGetter)
+  addEventListener(el, event, handler, options)
   if (options.effect) {
-    onEffectCleanup(cleanup)
-  } else if (getCurrentScope()) {
-    onScopeDispose(cleanup)
+    onEffectCleanup(() => {
+      el.removeEventListener(event, handler, options)
+    })
   }
-
-  function cleanup() {
-    cleanupEvent && cleanupEvent()
-  }
-}
-
-export type DelegatedHandler = {
-  (...args: any[]): any
-  delegate?: boolean
 }
 
 export function delegate(
@@ -49,20 +30,22 @@ export function delegate(
   event: string,
   handlerGetter: () => undefined | ((...args: any[]) => any),
 ): void {
-  const handler: DelegatedHandler = eventHandler(handlerGetter)
+  const key = `$evt${event}`
+  const handler = eventHandler(handlerGetter)
   handler.delegate = true
-
-  const cacheKey = `$evt${event}`
-  const handlers: DelegatedHandler[] = el[cacheKey] || (el[cacheKey] = [])
-  handlers.push(handler)
-  onScopeDispose(() => remove(handlers, handler))
+  ;(el[key] || (el[key] = [])).push(handler)
 }
 
-function eventHandler(getter: () => undefined | ((...args: any[]) => any)) {
-  return (...args: any[]) => {
-    let handler = getter()
-    if (!handler) return
+type DelegatedHandler = {
+  (...args: any[]): any
+  delegate?: boolean
+}
 
+function eventHandler(
+  getter: () => undefined | ((...args: any[]) => any),
+): DelegatedHandler {
+  return (...args: any[]) => {
+    const handler = getter()
     handler && handler(...args)
   }
 }