理解vue的生命周期钩子

Vue 实例有一个完整的生命周期，从开始创建到实例销毁整个过程，vue都提供了事件钩子，给我们提供了执行自定义逻辑的机会。

官网提供的生命周期图示：

例如，在实例挂载完成，模版中的html渲染到页面之后，可以通过mounted进行我们自定义的事件：

var vm = new Vue({
  data: {
    a: “实例挂载完成”
  },
  mounted: function () {
      console.log(this.a)
  }
})

生命周期钩子的使用方法就是在vue实例化的参数中，添加上mounted，beforeMount等方法。

那么，他们究竟是如何实现的呢？

查看vue源码，会发现在vue实例初始化（_init）、挂载（$mount ）等过程中，都调用了一个叫callHook的方法，如下图：

vue在处理生命周期的lifecycle.js（src/core/instance/lifecycle.js）中定义了一个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)
  }
}

可以看出，vue实例在各个生命周期阶段，都会去调用钩子callHook，当options中有对应的内容时，就会去运行相关的方法。

例如上面的例子中，vue初始化的时候，会赋值给$options

vm.$options如下图：

当执行callHook(vm, ‘mounted’)时，$options.mounted里边的方法就会执行

比如例子中的 console.log(this.a)