Vue源码分析-自定义事件处理
Vue.js中有四个事件API可以用来处理自定义事件，分别是$on，$once，$off，$emit。
初始化
当引入Vue.js时会给Vue Function原型上绑定一些方法和属性。源码在vue-2.6.11/src/core/instance/index.js
function Vue (options) {
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
其中eventsMixin方法中给Vue Function原型上绑定了$on，$once，$off，$emit四个方法。源码在vue-2.6.11/src/core/instance/index.js
export function eventsMixin (Vue) {
Vue.prototype.$on = function (event, fn) {
}
Vue.prototype.$once = function (event, fn) {
}
Vue.prototype.$off = function (event, fn) {
}
Vue.prototype.$emit = function (event) {
}
}
在initMixin方法中调用了initEvents方法初始化了事件对象。源码在vue-2.6.11/src/core/instance/index.js
export function initEvents (vm: Component) {
vm._events = Object.create(null)
}
$on
$on方法用来在vm实例上监听一个自定义事件，该事件可用$emit触发。
用法
第一个参数是字符串或者数组，第二个是回调函数。
this.$on('event',()=>{
})
this.$on(['event1','event2'],()=>{
})
源码
Vue.prototype.$on = function (event: string | Array<string>, fn: Function){
const vm = this
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
vm.$on(event[i], fn)
}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn)
}
return vm
}
源码意思是当在实例上使用$on监听一个自定义事件时，会执行原型上的$on方法。先判断第一个参数event是否是个数组，如果是个数组就扁平处理，直到它不是个数组为止。不是数组的话先判断事件对象_event中有没有key为event的属性，如果没有就给_event对象上建立一个key为event的空数组，然后将回调函数fn添加到数组中。如果有key为event属性的数组，就直接将fn添加到数组中。最后事件对象就是这样子：
_event:{
event: [func1, func2, func3]
}
$once
$once监听一个只能触发一次的事件，在触发以后会自动移除该事件。
用法
第一个参数是字符串，第二个是回调函数。
this.$once('event',()=>{
})
源码
Vue.prototype.$once = function (event: string, fn: Function){
const vm = this
function on () {
vm.$off(event, on)
fn.apply(vm, arguments)
}
on.fn = fn
vm.$on(event, on)
return vm
}
源码意思是当在实例上监听一个只能触发一次的自定义事件时，会执行$once方法。先定义了一个on函数。然后将回调函数fn绑定在on函数上（原因在解释$off上会说明）。最后调用了$on方法监听事件，第二参数变为了on函数。on函数中先移除自定义事件再执行了回调函数。其实$once就是对回调函数fn做了重写，为了让回调函数fn只执行一次就移除。
$off
$off用来移除自定义事件.
用法
第一个参数是字符串或数组，第二个是回调函数。
- 情况1：如果没有提供参数，则移除所有的事件监听器；
- 情况2：如果只提供了事件，则移除该事件所有的监听器；
- 情况3：如果同时提供了事件与回调，则只移除这个回调的监听器。
this.$off()
this.$off('event')
this.$off('event',callback)
源码
Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function){
const vm = this
// all
if (!arguments.length) {
vm._events = Object.create(null)
return vm
}
// array of events
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
vm.$off(event[i], fn)
}
return vm
}
// specific event
const cbs = vm._events[event]
if (!cbs) {
return vm
}
if (!fn) {
vm._events[event] = null
return vm
}
// specific handler
let cb
let i = cbs.length
while (i--) {
cb = cbs[i]
if (cb === fn || cb.fn === fn) {
cbs.splice(i, 1)
break
}
}
return vm
}
源码意思是当在实例上移除自定义事件时，会执行$off方法。
-
如果没有参数就直接将事件对象_event变为空对象并return。对应情况1。
-
否则判断事件event是不是个数组，如果是数组就扁平处理，直到不是个数组。然后获取到事件对象_event中key为event的值。如果不存在就return。否则继续判断如果回调函数fn不存在就会将事件名为event的属性值变为null然后return。对应情况2。
-
如果事件存在，并且回调函数也存在，则循环事件对象中对应属性event中的数组。直到在数组中找到和回调函数fn相同的引用。这里有两种情况，一种就是直接使用$on监听的事件，另一种是使用$once监听的事件，使用$once监听的事件因为重写导致事件对象_event对应key的值添加的是on函数。执行$off的话会在数组中找不到对应得回调函数。所以在$once中给on函数绑定了原始的回调函数fn。找到后删除数组中对应事件并退出循环。对应情况3。
$emit
$emit用来触发指定的自定义事件。
用法
第一个参数是事件名，类型为字符串，附加参数都会传给监听器回调。
this.$emit('event')
this.$emit('event','n1','n2')
源码
Vue.prototype.$emit = function (event: string){
const vm = this
let cbs = vm._events[event]
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs
const args = toArray(arguments, 1)
const info = `event handler for "${
event}"`
for (let i = 0, l = cbs.length; i < l; i++) {
//args ? handler.apply(context, args) : handler.call(context)
invokeWithErrorHandling(cbs[i], vm, args, vm, info)
}
}
return vm
}
源码意思是当在实例上触发一个自定义事件时，会执行$emit方法。先在事件对象_event中获取对应的事件值。如果存在就获取除了第一个参数后的所有参数。然后转为数组。最后循环执行事件数组中的方法。并把参数数组传给对应得回调函数。
总结
以上就是自定义事件处理的原理。阅读源码后有三个疑问。
- 使用$once，为什么第一个参数不能为数组，官网文档和源码中第一个参数类型只有字符串，没写数组。我测试传入数组是没问题的啊。
- 使用$off移除事件在最后的while循环中为什么找到后只执行一次就break了，如果数组里面还存在相同的呢。针对这个问题，我用$on监听了两个相同事件和相同回调函数。再使用$off移除相同事件和相同的回调函数，结果只移除了一个，还有一个存在。不知道为什么这么做。
- 在$emit中为什么要执行
cbs = cbs.length > 1 ? toArray(cbs) : cbs这句。toArray这个在源码中意思是将类数组转为数组。在这看cbs一定是个数组不需要转啊。不知道是为什么考虑的。