test/vue
1
0
Fork 0
mirror of https://gitee.com/vuejs/vue.git synced 2024-11-30 02:57:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Evan You 2019-01-09 20:09:50 -05:00
parent 02f897a4bc
commit 3be1c5d67e
5 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/core/config.js
View File

@ -19,6 +19,7 @@ export type Config = {
warnHandler: ?(msg: string, vm: Component, trace: string) => void; warnHandler: ?(msg: string, vm: Component, trace: string) => void;
ignoredElements: Array<string | RegExp>; ignoredElements: Array<string | RegExp>;
keyCodes: { [key: string]: number | Array<number> }; keyCodes: { [key: string]: number | Array<number> };
useEventDelegation: boolean;
// platform // platform
isReservedTag: (x?: string) => boolean; isReservedTag: (x?: string) => boolean;
@ -83,6 +84,15 @@ export default ({
// $flow-disable-line // $flow-disable-line
keyCodes: Object.create(null), 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 * Check if a tag is reserved so that it cannot be registered as a
* component. This is platform-dependent and may be overwritten. * component. This is platform-dependent and may be overwritten.

10
src/platforms/web/runtime/modules/events.js
View File

@ -1,5 +1,6 @@
/* @flow */ /* @flow */
import config from 'core/config'
import { isDef, isUndef } from 'shared/util' import { isDef, isUndef } from 'shared/util'
import { updateListeners } from 'core/vdom/helpers/index' import { updateListeners } from 'core/vdom/helpers/index'
import { isIE, isPhantomJS, supportsPassive } from 'core/util/index' import { isIE, isPhantomJS, supportsPassive } from 'core/util/index'
@ -50,7 +51,12 @@ function add (
capture: boolean, capture: boolean,
passive: boolean passive: boolean
) { ) {
if (!capture && !passive && delegateRE.test(name)) { if (
!capture &&
!passive &&
config.useEventDelegation &&
delegateRE.test(name)
) {
const count = eventCounts[name] const count = eventCounts[name]
let store = target.__events let store = target.__events
if (!count) { if (!count) {
@ -150,7 +156,7 @@ function remove (
_target?: HTMLElement _target?: HTMLElement
) { ) {
const el: any = _target || target const el: any = _target || target
if (!capture && delegateRE.test(name)) { if (!capture && config.useEventDelegation && delegateRE.test(name)) {
el.__events[name] = null el.__events[name] = null
if (--eventCounts[name] === 0) { if (--eventCounts[name] === 0) {
removeGlobalHandler(name) removeGlobalHandler(name)

4
test/e2e/specs/async-edge-cases.html
View File

@ -6,6 +6,10 @@
<script src="../../../dist/vue.min.js"></script> <script src="../../../dist/vue.min.js"></script>
</head> </head>
<body> <body>
<script>
// this is necessary to make these cases pass
Vue.config.useEventDelegation = true
</script>
<!-- #4510 click and change event on checkbox --> <!-- #4510 click and change event on checkbox -->
<div id="case-1"> <div id="case-1">

1
types/test/vue-test.ts
View File

@ -75,6 +75,7 @@ class Test extends Vue {
config.keyCodes = { esc: 27 }; config.keyCodes = { esc: 27 };
config.ignoredElements = ['foo', /^ion-/]; config.ignoredElements = ['foo', /^ion-/];
config.async = false config.async = false
config.useEventDelegation = true
} }
static testMethods() { static testMethods() {

1
types/vue.d.ts vendored
View File

@ -74,6 +74,7 @@ export interface VueConfiguration {
warnHandler(msg: string, vm: Vue, trace: string): void; warnHandler(msg: string, vm: Vue, trace: string): void;
ignoredElements: (string | RegExp)[]; ignoredElements: (string | RegExp)[];
keyCodes: { [key: string]: number | number[] }; keyCodes: { [key: string]: number | number[] };
useEventDelegation: boolean;
async: boolean; async: boolean;
} }