perf(runtime-dom): cache modifier wrapper functions

close #8882

Author: yyx990803

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

@@ -32,14 +32,20 @@ const modifierGuards: Record<
 /**
  * @private
  */
-export const withModifiers = (fn: Function, modifiers: string[]) => {
-  return (event: Event, ...args: unknown[]) => {
-    for (let i = 0; i < modifiers.length; i++) {
-      const guard = modifierGuards[modifiers[i]]
-      if (guard && guard(event, modifiers)) return
-    }
-    return fn(event, ...args)
-  }
+export const withModifiers = (
+  fn: Function & { _withMods?: Function },
+  modifiers: string[]
+) => {
+  return (
+    fn._withMods ||
+    (fn._withMods = (event: Event, ...args: unknown[]) => {
+      for (let i = 0; i < modifiers.length; i++) {
+        const guard = modifierGuards[modifiers[i]]
+        if (guard && guard(event, modifiers)) return
+      }
+      return fn(event, ...args)
+    })
+  )
 }
 
 // Kept for 2.x compat.
@@ -57,7 +63,10 @@ const keyNames: Record<string, string | string[]> = {
 /**
  * @private
  */
-export const withKeys = (fn: Function, modifiers: string[]) => {
+export const withKeys = (
+  fn: Function & { _withKeys?: Function },
+  modifiers: string[]
+) => {
   let globalKeyCodes: LegacyConfig['keyCodes']
   let instance: ComponentInternalInstance | null = null
   if (__COMPAT__) {
@@ -77,40 +86,43 @@ export const withKeys = (fn: Function, modifiers: string[]) => {
     }
   }
 
-  return (event: KeyboardEvent) => {
-    if (!('key' in event)) {
-      return
-    }
-
-    const eventKey = hyphenate(event.key)
-    if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
-      return fn(event)
-    }
+  return (
+    fn._withKeys ||
+    (fn._withKeys = (event: KeyboardEvent) => {
+      if (!('key' in event)) {
+        return
+      }
 
-    if (__COMPAT__) {
-      const keyCode = String(event.keyCode)
-      if (
-        compatUtils.isCompatEnabled(
-          DeprecationTypes.V_ON_KEYCODE_MODIFIER,
-          instance
-        ) &&
-        modifiers.some(mod => mod == keyCode)
-      ) {
+      const eventKey = hyphenate(event.key)
+      if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
         return fn(event)
       }
-      if (globalKeyCodes) {
-        for (const mod of modifiers) {
-          const codes = globalKeyCodes[mod]
-          if (codes) {
-            const matches = isArray(codes)
-              ? codes.some(code => String(code) === keyCode)
-              : String(codes) === keyCode
-            if (matches) {
-              return fn(event)
+
+      if (__COMPAT__) {
+        const keyCode = String(event.keyCode)
+        if (
+          compatUtils.isCompatEnabled(
+            DeprecationTypes.V_ON_KEYCODE_MODIFIER,
+            instance
+          ) &&
+          modifiers.some(mod => mod == keyCode)
+        ) {
+          return fn(event)
+        }
+        if (globalKeyCodes) {
+          for (const mod of modifiers) {
+            const codes = globalKeyCodes[mod]
+            if (codes) {
+              const matches = isArray(codes)
+                ? codes.some(code => String(code) === keyCode)
+                : String(codes) === keyCode
+              if (matches) {
+                return fn(event)
+              }
             }
           }
         }
       }
-    }
-  }
+    })
+  )
 }