理解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)