Vue 源码阅读 $on、$off、$emit 的实现

这些方法都是通过 eventsMixin() 方法进行初始化挂载在Vue原型上。

eventsMixin()的位置：

eventsMixin的实现逻辑：

把 $on、$once、$off、$emit 方法添加到Vue的原型上。

$on:

支持传入 单个事件名、或者事件名数组，

如果是数组，那么遍历调用$on()，把事件添加到组件实例的_events对象上

添加到事件列表中，事件列表的存在 _events这个对象上，每个key就是事件名，每个value就是事件的回调函数。

比方添加一个事件名为example的事件，那么

const vm = {
  _events: {
    example: [fn1, fn2, fn3]
  }
}

$off

• https://v2.vuejs.org/v2/api/#vm-off

如果没有传递参数，那么就会清空当前组件实例的所有自定义事件的监听。慎用

Vue.prototype.$off = function (
   event?: string | Array<string>,
   fn?: Function
 ): Component {
   const vm: Component = this
   if (!arguments.length) {
     vm._events = Object.create(null)
     return vm
   }
 }