feat(config): expose config.useEventDelegation and default to false

yyx990803 · yyx990803 · commit 3be1c5d67e8b · 2019-01-09T20:09:50.000-05:00
diff --git a/src/core/config.js b/src/core/config.js
@@ -19,6 +19,7 @@ export type Config = {
   warnHandler: ?(msg: string, vm: Component, trace: string) => void;
   ignoredElements: Array<string | RegExp>;
   keyCodes: { [key: string]: number | Array<number> };
+  useEventDelegation: boolean;
 
   // platform
   isReservedTag: (x?: string) => boolean;
@@ -83,6 +84,15 @@ export default ({
   // $flow-disable-line
   keyCodes: Object.create(null),
 
+  /**
+   * Use event delegation - this works around a few async edge cases caused by
+   * microtask / DOM event racing conditions, and should in theory save some
+   * memory.
+   *
+   * Off by default for backwards compatibility.
+   */
+  useEventDelegation: false,
+
   /**
    * Check if a tag is reserved so that it cannot be registered as a
    * component. This is platform-dependent and may be overwritten.
diff --git a/src/platforms/web/runtime/modules/events.js b/src/platforms/web/runtime/modules/events.js
@@ -1,5 +1,6 @@
 /* @flow */
 
+import config from 'core/config'
 import { isDef, isUndef } from 'shared/util'
 import { updateListeners } from 'core/vdom/helpers/index'
 import { isIE, isPhantomJS, supportsPassive } from 'core/util/index'
@@ -50,7 +51,12 @@ function add (
   capture: boolean,
   passive: boolean
 ) {
-  if (!capture && !passive && delegateRE.test(name)) {
+  if (
+    !capture &&
+    !passive &&
+    config.useEventDelegation &&
+    delegateRE.test(name)
+  ) {
     const count = eventCounts[name]
     let store = target.__events
     if (!count) {
@@ -150,7 +156,7 @@ function remove (
   _target?: HTMLElement
 ) {
   const el: any = _target || target
-  if (!capture && delegateRE.test(name)) {
+  if (!capture && config.useEventDelegation && delegateRE.test(name)) {
     el.__events[name] = null
     if (--eventCounts[name] === 0) {
       removeGlobalHandler(name)
diff --git a/test/e2e/specs/async-edge-cases.html b/test/e2e/specs/async-edge-cases.html
@@ -6,6 +6,10 @@
     <script src="../../../dist/vue.min.js"></script>
   </head>
   <body>
+    <script>
+      // this is necessary to make these cases pass
+      Vue.config.useEventDelegation = true
+    </script>
 
     <!-- #4510 click and change event on checkbox -->
     <div id="case-1">
diff --git a/types/test/vue-test.ts b/types/test/vue-test.ts
@@ -75,6 +75,7 @@ class Test extends Vue {
     config.keyCodes = { esc: 27 };
     config.ignoredElements = ['foo', /^ion-/];
     config.async = false
+    config.useEventDelegation = true
   }
 
   static testMethods() {
diff --git a/types/vue.d.ts b/types/vue.d.ts
@@ -74,6 +74,7 @@ export interface VueConfiguration {
   warnHandler(msg: string, vm: Vue, trace: string): void;
   ignoredElements: (string | RegExp)[];
   keyCodes: { [key: string]: number | number[] };
+  useEventDelegation: boolean;
   async: boolean;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -75,6 +75,7 @@ class Test extends Vue {`
`75`	`75`	`config.keyCodes = { esc: 27 };`
`76`	`76`	`config.ignoredElements = ['foo', /^ion-/];`
`77`	`77`	`config.async = false`
	`78`	`+ config.useEventDelegation = true`
`78`	`79`	`}`
`79`	`80`
`80`	`81`	`static testMethods() {`
Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,7 @@ export interface VueConfiguration {`
`74`	`74`	`warnHandler(msg: string, vm: Vue, trace: string): void;`
`75`	`75`	`ignoredElements: (string \| RegExp)[];`
`76`	`76`	`keyCodes: { [key: string]: number \| number[] };`
	`77`	`+ useEventDelegation: boolean;`
`77`	`78`	`async: boolean;`
`78`	`79`	`}`
`79`	`80`