initLifecycle 初始化生命周期

export function initLifecycle (vm: Component) {
  const options = vm.$options
  // locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }
  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

const options = vm.$options mergeOptions后的options赋值给options变量

// locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

定位第一个"非抽象"的父组件

<keep-alive> 是一个抽象组件，他自身不会渲染一个DOM元素，也不会出现在父组件链中

当前vm实例有父实例parent，则赋值给parent变量。如果父实例存在，且该实例不是抽象组件

注意while循环内的条件parent.$options.abstract && parent.$parent,如果父实例parent是抽象组件，则继续找parent上的parent。直到找到非抽象组件为止。之后把当前vm实例push到定位的第一个非抽象parent的$children属性上。这样我们就说完了怎么找vm的parent属性

  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false

initLifecycle方法的逻辑比较简单，主要对vue实例一些属性进行赋值

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

const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

输出 "My name is Matthew. Am I human? true"

vm._events用于存放事件

<div id="app">
    <child
      @hook:created="hookFromParent"
      @hover="hoverFromParent"
      :msg-from-father="msg" 
      :hit-from-father="hit"
    >
    </child>
</div>

const childComponent = Vue.component('child', {
  template: '<div><p @click="showMsgFromSon">{{msgFromFather}} and {{hitFromFather}}</p></div>',
  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')
    }
  }
})

结果：

_events : {
  hook : created : [f] ,
  hover : [f]
}

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

vm._hasHookEvent = false 这行代码把我们vm实例上的_hasHookEvent属性设置为false。该属性表示父组件是否通过"@hook:"把钩子函数绑定在当前组件上

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

// init parent attached events
const listeners = vm.$options._parentListeners

从英文注释中，我们知道这行代码的作用是初始化父组件添加的事件。那具体是什么意思呢？通过追踪vm.options._parentListeners的赋值过程,我们知道vm.options.parentListeners的赋值过程,我们知道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实例对象

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

如果第三个参数once为true，则执行vue.once方法，否则执行vue.once方法，否则执行vue.on方法

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

Vue.prototype.$on = function (event: string | Array<string>, 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 look
if (hookRE.test(event)) {
  vm._hasHookEvent = true
}

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

<child
  @hook:created="hookFromParent"
>

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

_hasHookEvent : 表示的是父组件有没有直接绑定钩子函数在当前组件上

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属性里，方便之后被on方法主要就是把传入的方法给push到events属性里，方便之后被emit调用

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
  }

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

on方法包装了event的回调事件，这是on和once最本质的区别，当触发once绑定的回调时候，执行on方法，先调用$off方法移除监听，然后再执行回调函数。这样就实现了只触发一次的功能。