上篇文章中，我们主要讲了initLiftcycle方法，它的作用是初始化vm实例中和生命周期相关的属性。今天为大家介绍另一个方法——initEvents。

从这个方法的名称来看，我们知道它是和事件相关的方法，具体怎么相关，我们先来看源码。

export function initEvents (vm: Component) {  vm._events = Object.create(null)  vm._hasHookEvent = false  // init parent attached events  const listeners = vm.$options._parentListeners  if (listeners) {    updateComponentListeners(vm, listeners)  }}

先看第一行

vm._events = Object.create(null)

该行代码创建了一个原型为null的空对象，并把它赋值给vm实例的_events属性。关于Object.create,不明白的同学可以点。关于vm._events,很多博文中提到该属性就是笼统的说是用来存放事件的对象，那么到底存放什么事件呢？vm的所有事件都存放在里面？显然是不对的，那具体是什么，我们来看下面的例子。

html部分:

js部分

const childComponent = Vue.component('child', {      template: '
    
     
{
   {msgFromFather}} and {
   {hitFromFather}}
    
',      data: function () {        return {          childMsg: 'Hello, I am Child'        }      },      props: ['msgFromFather', 'hitFromFather'],      methods: {        showMsgFromSon () {          console.log('Hello Vue from son')        }      },      mounted () {        console.log('child mounted')      }    })    const app = new Vue({      el: '#app',      data: function () {        return {          msg: 'Hello Chris, I am your father',          hit: 'I will hit you if you do not study',        }      },      components: {        childComponent      },      methods: {        hoverFromParent () {          console.log('attch event')        },        hookFromParent () {          console.log('attch hook')        }      }    })

下图表示的是上述demo中vm._events属性的值

上面例子中，child组件上除了父组件绑定的方法之外，其组件内部还有showMsgFromSon和mounted钩子方法，但是这两个方法都没有出现在_events属性中。综上可知，vm._events表示的是父组件绑定在当前组件上的事件。

接下来看代码

vm._hasHookEvent = false

这行代码把我们vm实例上的_hasHookEvent属性设置为false。该属性表示父组件是否通过"@hook:"把钩子函数绑定在当前组件上。该用法可以在上个demo中找到，通过下列方式完成绑定。

@hook:钩子名称="绑定的函数"

继续回到源码中

// init parent attached eventsconst listeners = vm.$options._parentListeners

从英文注释中，我们知道这行代码的作用是初始化父组件添加的事件。那具体是什么意思呢？通过追踪vm.$options._parentListeners的赋值过程（这个过程有点复杂，在之后讲双向绑定和虚拟dom的时候会说到),我们知道vm.$options._parentListeners其实和上面的_events一样，都是用来表示父组件绑定在当前组件上的事件。（当然还是略有点不同，这个之后会讲解）如果存在这些绑定的事件，那么就执行下面代码

if (listeners) {   updateComponentListeners(vm, listeners) }

如果事件存在，则调用updateComponentListeners更新这些方法。

export function updateComponentListeners (  vm: Component,  listeners: Object,  oldListeners: ?Object) {  target = vm  updateListeners(listeners, oldListeners || {}, add, remove, vm)  target = undefined}

来看updateComponentListeners方法的源码

target = vm

这行代码的主要作用是保留对vm实例的引用，在执行updateListeners方法时能访问到实例对象，并执行add和remove方法。

updateListeners(listeners, oldListeners || {}, add, remove, vm)

在研究updateListeners源码之前，我们先来了解一下传入的这几个参数。listeners我们前面说过，是父组件绑定在当前组件上的事件对象，oldListeners表示当前组件上旧的事件对象，vm是vue实例对象。这三个没什么好说的，我们具体来讲讲另外两个参数add和remove。

add方法

add方法源码如下:

function add (event, fn, once) {  if (once) {    target.$once(event, fn)  } else {    target.$on(event, fn)  }}

如果第三个参数once为true，则执行vue.$once方法，否则执行vue.$on方法。我们先来看vue.$on

vue.$on方法

为什么要先讲$on方法，因为$once方法中也需要用到$on,在看$on源码之前，我们先来看看官方文档里对它的定义。

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

知道了vue.$on的定义之后，我们再来看源码。

Vue.prototype.$on = function (event: string | Array
    
     , fn: Function): Component {    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)      // optimize hook:event cost by using a boolean flag marked at registration      // instead of a hash lookup      if (hookRE.test(event)) {        vm._hasHookEvent = true      }    }    return vm  }
    

else之前的代码都很简单，先缓存this，如果传入的事件是事件数组的话，则分别对数组内的每一项调用$on绑定事件。接下来重点看看else块内的代码。

(vm._events[event] || (vm._events[event] = [])).push(fn)

我们知道_events是表示直接绑定在组件上的事件，如果是通过$on新添加的事件（也相当于直接绑定在组件上的事件）,我们也要把事件和回调方法传入到_events对象中。

回到源码中

// optimize hook:event cost by using a boolean flag marked at registration// instead of a hash lookif (hookRE.test(event)) {  vm._hasHookEvent = true}

关于这句代码的解释，网上很多文章说的都是类似下面的话

这个bool标志位来表明是否存在钩子，而不需要通过哈希表的方法来查找是否有钩子，这样做可以减少不必要的开销，优化性能。

这句话除了是翻译原文注释之外，还存在明显的错误，这个tag不是表明是否存在钩子，而是表示是否使用下面的方式绑定钩子。

如果是下列形式绑定的钩子，则_hasHookEvent属性为true。

而像下面这种形式，它也存在钩子函数，但是它的_hasHookEvent就是false。

const childComponent = Vue.component('child', {      ...      created () {        console.log('child created')      }    })

所以_hasHookEvent不是表示是否存在钩子，它表示的是父组件有没有直接绑定钩子函数在当前组件上。说这么多，只是希望大家尽可能的少被误导。那么，那句注释到底是什么意思呢？我们可以从callHook的源码中来寻找答案。

export function callHook (vm: Component, hook: string) {  const handlers = vm.$options[hook]  if (handlers) {    for (let i = 0, j = handlers.length; i < j; i++) {      try {        handlers[i].call(vm)      } catch (e) {        handleError(e, vm, `${hook} hook`)      }    }  }  if (vm._hasHookEvent) {    vm.$emit('hook:' + hook)  }}

当前实例的钩子函数如果是通过父组件的:hook方式来指定的，那么它在执行钩子函数的回调方法时就是直接触发vm.$emit来执行。（这种方式类似于dom中的addEventListener监听事件和dispatchEvent触发事件）

如果不是上面这种方法指定的钩子函数，就需要执行callhook源码上半部分的代码逻辑。找到vm实例上的钩子函数，然后执行绑定在它上面的回调。至于执行效率的问题，没有去研究过，但是原文注释里都说了是优化钩子，那么证明第一种方法执行效率应该是优于第二种方法。我们回到$on的源码中，最后是返回vm实例对象。

return vm

现在我们知道了vm.$on方法主要就是把传入的方法给push到_events属性里，方便之后被$emit调用。

vm.$once

讲过了vm.$on的主要作用之后，我们接着来分析vm.$once的源码，先看文档中关于vm.$once的定义。

监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

了解了vm.$once的定义之后，我们再来看源码

Vue.prototype.$once = function (event: string, fn: Function): Component {    const vm: Component = this    function on () {      vm.$off(event, on)      fn.apply(vm, arguments)    }    on.fn = fn    vm.$on(event, on)    return vm  }

结合上面的定义和之前讲的vm.$on方法，我们应该比较容易理解解$once了，它和$on方法的核心区别主要在on方法

function on () {      vm.$off(event, on)      fn.apply(vm, arguments)    }

on方法包装了event的回调事件，这是on和once最本质的区别，当触发once绑定的回调时候，执行on方法，先调用$off方法（这个方法是移除监听的方法，我们待会儿就会讲）移除监听，然后再执行回调函数。这样就实现了只触发一次的功能，讲到这里，add方法中所有的内容就已经讲完了。

由于文章篇幅的原因，其他关于initEvents的内容我们下篇文章继续讲，主要有$off,$emit和updateListeners相关的实现。敬请期待。