前言

前面我們簡單的瞭解了 vue 初始化時的一些大概的流程，這裡我們詳細的瞭解下具體的內容；這塊建議搭建可以根據 demo 進行 debugger 來觀察；

內容

這一塊主要圍繞init.ts中的initLifecycle進行剖析。

initLifecycle

initLifecycle的方法位於scr/core/instance/lifecycle.ts中；

export function initLifecycle(vm: Component) {
  // 合併後的options
  const options = vm.$options

  // locate first non-abstract parent
  let parent = options.parent
  // 存在父級並且不是抽象組件（如：keep-alive、transition）
  if (parent && !options.abstract) {
    // 找到不是抽象組件的實例
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    // 將該實例推入父實例的$children數組中
    parent.$children.push(vm)
  }
  // https://v2.cn.vuejs.org/v2/api/#vm-parent
  // 父實例
  vm.$parent = parent
  // https://v2.cn.vuejs.org/v2/api/#vm-root
  // 如果當前實例沒有父實例那實例就是自己
  vm.$root = parent ? parent.$root : vm
  // https://v2.cn.vuejs.org/v2/api/#vm-children
  // 當前實例的子組件，$children既不保證順序也不是響應式的；
  vm.$children = []
  // https://v2.cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0
  // 當 ref 和 v-for 一起使用的時候，你得到的 ref 將會是一個包含了對應數據源的這些子組件的數組
  // $refs 只會在組件渲染完成之後生效，並且它們不是響應式的。
  // 避免在模板或計算屬性中訪問 $refs
  vm.$refs = {}

  // 如果父實例不存在那就賦予_provided空對象
  vm._provided = parent ? parent._provided : Object.create(null)
  // 初始化監聽屬性
  vm._watcher = null
  // 初始化active屬性
  vm._inactive = null
  // 標記指令狀態
  vm._directInactive = false
  // 標記mounted狀態
  vm._isMounted = false
  // 標記destroyed狀態
  vm._isDestroyed = false
  // 標記BeingDestroyed狀態
  vm._isBeingDestroyed = false
}

?> 估計有朋友肯定發現了lifecycleMixin方法，這就是scr/core/instance/index.ts中生命周期混入的方法，不過這個我們不放在這裡講，我們放到後面再說；