通过源码理解 vue beforecreated 周期与 created 周期之间发生了什么-优快云博客

本文深入解析Vue实例初始化过程，从构造函数到_init方法，详细阐述beforeCreate与created钩子之间的状态初始化流程，包括inject、state与provide的初始化，重点关注initState函数对props、methods、data、computed与watch属性的初始化及观察者注册。

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