Skip to content

Commit 04d2c05

Browse files
authored
fix(runtime-dom): cache event handlers by key/modifiers (#9851)
close #9849
1 parent 4e7967f commit 04d2c05

File tree

2 files changed

+39
-6
lines changed

2 files changed

+39
-6
lines changed

packages/runtime-dom/__tests__/directives/vOn.spec.ts

+28
Original file line numberDiff line numberDiff line change
@@ -135,4 +135,32 @@ describe('runtime-dom: v-on directive', () => {
135135
handler(event, 'value', true)
136136
expect(fn).toBeCalledWith(event, 'value', true)
137137
})
138+
139+
it('withKeys cache wrapped listener separately for different modifiers', () => {
140+
const el1 = document.createElement('button')
141+
const el2 = document.createElement('button')
142+
const fn = vi.fn()
143+
const handler1 = withKeys(fn, ['a'])
144+
const handler2 = withKeys(fn, ['b'])
145+
expect(handler1 === handler2).toBe(false)
146+
patchEvent(el1, 'onKeyup', null, handler1, null)
147+
patchEvent(el2, 'onKeyup', null, handler2, null)
148+
triggerEvent(el1, 'keyup', e => (e.key = 'a'))
149+
triggerEvent(el2, 'keyup', e => (e.key = 'b'))
150+
expect(fn).toBeCalledTimes(2)
151+
})
152+
153+
it('withModifiers cache wrapped listener separately for different modifiers', () => {
154+
const el1 = document.createElement('button')
155+
const el2 = document.createElement('button')
156+
const fn = vi.fn()
157+
const handler1 = withModifiers(fn, ['ctrl'])
158+
const handler2 = withModifiers(fn, ['shift'])
159+
expect(handler1 === handler2).toBe(false)
160+
patchEvent(el1, 'onClick', null, handler1, null)
161+
patchEvent(el2, 'onClick', null, handler2, null)
162+
triggerEvent(el1, 'click', e => (e.ctrlKey = true))
163+
triggerEvent(el2, 'click', e => (e.shiftKey = true))
164+
expect(fn).toBeCalledTimes(2)
165+
})
138166
})

packages/runtime-dom/src/directives/vOn.ts

+11-6
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,14 @@ const modifierGuards: Record<
3535
export const withModifiers = <
3636
T extends (event: Event, ...args: unknown[]) => any
3737
>(
38-
fn: T & { _withMods?: T },
38+
fn: T & { _withMods?: { [key: string]: T } },
3939
modifiers: string[]
4040
) => {
41+
const cache = fn._withMods || (fn._withMods = {})
42+
const cacheKey = modifiers.join('.')
4143
return (
42-
fn._withMods ||
43-
(fn._withMods = ((event, ...args) => {
44+
cache[cacheKey] ||
45+
(cache[cacheKey] = ((event, ...args) => {
4446
for (let i = 0; i < modifiers.length; i++) {
4547
const guard = modifierGuards[modifiers[i]]
4648
if (guard && guard(event, modifiers)) return
@@ -66,7 +68,7 @@ const keyNames: Record<string, string | string[]> = {
6668
* @private
6769
*/
6870
export const withKeys = <T extends (event: KeyboardEvent) => any>(
69-
fn: T & { _withKeys?: T },
71+
fn: T & { _withKeys?: { [k: string]: T } },
7072
modifiers: string[]
7173
) => {
7274
let globalKeyCodes: LegacyConfig['keyCodes']
@@ -88,9 +90,12 @@ export const withKeys = <T extends (event: KeyboardEvent) => any>(
8890
}
8991
}
9092

93+
const cache: { [k: string]: T } = fn._withKeys || (fn._withKeys = {})
94+
const cacheKey = modifiers.join('.')
95+
9196
return (
92-
fn._withKeys ||
93-
(fn._withKeys = (event => {
97+
cache[cacheKey] ||
98+
(cache[cacheKey] = (event => {
9499
if (!('key' in event)) {
95100
return
96101
}

0 commit comments

Comments
 (0)