通过源码理解 vue beforecreated 周期与 created 周期之间发生了什么

1,694 阅读1分钟

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赋值的原因。