fix(runtime-vapor): prevent event handler execution during emits lookup (#14281)

edison1105 · web-flow · commit 15f66529995c · 2026-01-06T11:21:07.000+08:00
revert #14218 close #14280
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -307,7 +307,7 @@ exports[`compiler: element transform > component > v-on="obj" 1`] = `
 export function render(_ctx) {
   const _component_Foo = _resolveComponent("Foo")
   const n0 = _createComponentWithFallback(_component_Foo, { $: [
-    () => (_toHandlers(_ctx.obj, false, true))
+    () => (_toHandlers(_ctx.obj))
   ] }, null, true)
   return n0
 }"
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap
@@ -181,7 +181,7 @@ export function render(_ctx) {
   const n0 = _createSlot("default", {
     onClick: () => _ctx.foo,
     $: [
-      () => (_toHandlers(_ctx.bar, false, true)),
+      () => (_toHandlers(_ctx.bar)),
       { baz: () => (_ctx.qux) }
     ]
   })
diff --git a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
@@ -370,7 +370,7 @@ describe('compiler: element transform', () => {
       const { code, ir } = compileWithElementTransform(`<Foo v-on="obj" />`)
       expect(code).toMatchSnapshot()
       expect(code).contains(`[
-    () => (_toHandlers(_ctx.obj, false, true))
+    () => (_toHandlers(_ctx.obj))
   ]`)
       expect(ir.block.dynamic.children[0].operation).toMatchObject({
         type: IRNodeTypes.CREATE_COMPONENT_NODE,
diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
@@ -392,13 +392,7 @@ function genDynamicProps(
         }
       } else {
         expr = genExpression(p.value, context)
-        if (p.handler)
-          expr = genCall(
-            helper('toHandlers'),
-            expr,
-            `false`, // preserveCaseIfNecessary: false, not needed for component
-            `true`, // wrap handler values in functions
-          )
+        if (p.handler) expr = genCall(helper('toHandlers'), expr)
       }
     }
     frags.push(['() => (', ...expr, ')'])
diff --git a/packages/runtime-core/src/helpers/toHandlers.ts b/packages/runtime-core/src/helpers/toHandlers.ts
@@ -8,7 +8,6 @@ import { warn } from '../warning'
 export function toHandlers(
   obj: Record<string, any>,
   preserveCaseIfNecessary?: boolean,
-  needWrap?: boolean,
 ): Record<string, any> {
   const ret: Record<string, any> = {}
   if (__DEV__ && !isObject(obj)) {
@@ -20,7 +19,7 @@ export function toHandlers(
       preserveCaseIfNecessary && /[A-Z]/.test(key)
         ? `on:${key}`
         : toHandlerKey(key)
-    ] = needWrap ? () => obj[key] : obj[key]
+    ] = obj[key]
   }
   return ret
 }
diff --git a/packages/runtime-vapor/__tests__/componentEmits.spec.ts b/packages/runtime-vapor/__tests__/componentEmits.spec.ts
@@ -99,17 +99,10 @@ describe('component: emit', () => {
     const fooSpy = vi.fn()
     const barSpy = vi.fn()
     render(
-      // v-on="{ testEvent: handler }"
-      // will be compiled to
-      // toHandlers({ testEvent: handler }, false, true)
-      toHandlers(
-        {
-          'test-event': fooSpy,
-          testEvent: barSpy,
-        },
-        false,
-        true,
-      ),
+      toHandlers({
+        'test-event': () => fooSpy,
+        testEvent: () => barSpy,
+      }),
     )
     expect(fooSpy).toHaveBeenCalledTimes(1)
     expect(barSpy).toHaveBeenCalledTimes(1)
@@ -430,4 +423,25 @@ describe('component: emit', () => {
     await nextTick()
     expect(fn).not.toHaveBeenCalled()
   })
+
+  test('should not execute handler during lookup', () => {
+    const { render } = define({
+      setup(_, { emit }) {
+        emit('click')
+        return []
+      },
+    })
+
+    const handler = vi.fn()
+    const props = {
+      $: [
+        () => ({
+          onClick: handler,
+        }),
+      ],
+    }
+    render(props as any)
+
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/runtime-vapor/src/componentEmits.ts b/packages/runtime-vapor/src/componentEmits.ts
@@ -1,6 +1,6 @@
 import { type ObjectEmitsOptions, baseEmit } from '@vue/runtime-dom'
 import type { VaporComponent, VaporComponentInstance } from './component'
-import { EMPTY_OBJ, hasOwn, isArray } from '@vue/shared'
+import { EMPTY_OBJ, hasOwn, isArray, isOn } from '@vue/shared'
 import { type RawProps, resolveSource } from './componentProps'
 import { interopKey } from './vdomInterop'
 
@@ -49,7 +49,7 @@ function propGetter(rawProps: RawProps, key: string) {
       const source = resolveSource(dynamicSources[i])
       if (hasOwn(source, key))
         // for props passed from VDOM component, no need to resolve
-        return dynamicSources[interopKey]
+        return dynamicSources[interopKey] || isOn(key)
           ? source[key]
           : resolveSource(source[key])
     }

Original file line number	Diff line number	Diff line change
`@@ -181,7 +181,7 @@ export function render(_ctx) {`
`181`	`181`	`const n0 = _createSlot("default", {`
`182`	`182`	`onClick: () => _ctx.foo,`
`183`	`183`	`$: [`
`184`		`- () => (_toHandlers(_ctx.bar, false, true)),`
	`184`	`+ () => (_toHandlers(_ctx.bar)),`
`185`	`185`	`{ baz: () => (_ctx.qux) }`
`186`	`186`	`]`
`187`	`187`	`})`
Original file line number	Diff line number	Diff line change
`@@ -392,13 +392,7 @@ function genDynamicProps(`
`392`	`392`	`}`
`393`	`393`	`} else {`
`394`	`394`	`expr = genExpression(p.value, context)`
`395`		`- if (p.handler)`
`396`		`- expr = genCall(`
`397`		`- helper('toHandlers'),`
`398`		`- expr,`
`399`		- `false`, // preserveCaseIfNecessary: false, not needed for component
`400`		- `true`, // wrap handler values in functions
`401`		`- )`
	`395`	`+ if (p.handler) expr = genCall(helper('toHandlers'), expr)`
`402`	`396`	`}`
`403`	`397`	`}`
`404`	`398`	`frags.push(['() => (', ...expr, ')'])`