vue源码解析：vue事件方法之$on方法的实现原理

vue中事件方法一共就四个，挂载在vue实例上的$on用来监听自定义事件时，通常会用到，那么$on的内部实现原理是什么呢？下面我们来详细说下$on:

vm.$on( event, callback )

参数：

• {string | Array<string>} event (数组只在 2.2.0+ 中支持)
• {Function} callback

作用：

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

事例：

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

 原理：

$on也是采用了经典的发布订阅者设计模式，首先定义一个事件中心，通过$on订阅事件，将事件存储在事件中心里面，然后通过$emit触发事件中心里面存储的订阅事件。

Vue.prototype.$on = function (event, fn) {
    const vm: Component = this
    if (Array.isArray(event)) {
        for (let i = 0, l = event.length; i < l; i++) {
            this.$on(event[i], fn)
        }
    } else {
        (vm._events[event] || (vm._events[event] = [])).push(fn)
    }
    return vm
}

看代码，逻辑很简单,$on函数接收俩个参数，第一个是订阅的事件名，可以是多个，如果是多个就传入一个事件名数组。另一个是回调函数。 首先判断传入的事件是不是一个数组，如果是，那么遍历这个数组，将数组中的每一个事件都递归调用$on方法将其作为单个事件订阅。如过不是数组，那就当做单个事件名来处理，以该事件名作为key，先尝试在当前实例的_events属性中获取其对应的事件列表，如果获取不到就给其赋空数组为默认值，并将第二个参数回调函数添加进去。

多说一句，实例的_events是什么？这就是在事件初始化的时候，initEvents函数中绑定了_event属性并给其赋值为空对象。这个_events属性就是用来作为当前实例的事件中心，所有绑定在这个实例上的事件都会存储在事件中心_events属性中。

这就是$on的内部原理。请查收。