通過原始碼理解 vue beforecreated 週期與 created 週期之間發生了什麼

_冰點發表於2019-04-11
原始碼Vue

vue例項初始化時，Vue類的建構函式執行了this._init方法

function Vue (options) {
  this._init(options)
}
Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    ...省略部分程式碼
    vm._self = vm
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')   
    ...省略部分程式碼
}

複製程式碼

由_init方法可以看出，呼叫beforecreate與created鉤子之間，依次發生了初始化inject，初始化state，以及初始化provide這幾個過程。 在此我們主要關注平常最常用到的initState過程

function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
複製程式碼

initState函式中，首先為vm例項初始化了存放觀察者的_watchers屬性， 然後依次對props，methods，data，computed，watch屬性進行了初始化與觀察者的註冊。

注意props與methods的初始化是在data之前的。這就是在data屬性的宣告過程中可以呼叫props與methods中的方法或屬性為data賦值的原因。

相關文章