Vue源码学习之初始化模块init.js解析

initLifecycle(vm) //生命周期变量初始化
initEvents(vm) //事件监听初始化
initRender(vm) //初始化渲染
callHook(vm, 'beforeCreate')  //回调钩子beforeCreate
initInjections(vm) //初始化注入
initState(vm)  // prop/data/computed/method/watch状态初始化
initProvide(vm)   // resolve provide after data/props
callHook(vm, 'created')   //回调钩子created
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
 vm._name = formatComponentName(vm, false)
 mark(endTag)
 measure(`${vm._name} init`, startTag, endTag)
}
if (vm.$options.el) {
 vm.$mount(vm.$options.el)
}

这里来一个插曲start

V2.1.8及以前的版本】这里比较方便理解在生命周期created之后再做render，那么在created之前就无法获取DOM。这也是在有些源码解析文章里面很容易见到的分析，也是正确的

initLifecycle(vm)
initEvents(vm)
callHook(vm, 'beforeCreate')
initState(vm)
callHook(vm, 'created')
initRender(vm) 

v2.1.9及以后的版本】但到这里一开始就懵逼了很久render提到beforeCreate之前去了，那岂不是DOM在beforeCreate之前就能获取到了？显然不对了，请注意render虽然提前了，但是后面多了一个if这个if里面才获取DOM的关键，这个if在2.1.8版本之前是在render函数里面的，在2.1.9之后被提出来，然后render函数提前了，至于为何提前暂未了解，此处只是踩了一个看其他源码解析不同版本带来的坑！

initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initState(vm)
callHook(vm, 'created')
if (vm.$options.el) {
 vm.$mount(vm.$options.el)
}

插曲end，继续

1.initLifecycle

function initLifecycle (vm: Component) {
 const options = vm.$options
 // locate first non-abstract parent
 let parent = options.parent  //我理解为父实例或者父组件
 if (parent && !options.abstract) {  //例子中没有parent，断点代码的时候自动跳过
  while (parent.$options.abstract && parent.$parent) {
   parent = parent.$parent
  }
  parent.$children.push(vm)
 }
 vm.$parent = parent
 vm.$root = parent ? parent.$root : vm
 vm.$children = [] vm.$refs = {}
 vm._watcher = null
 vm._inactive = null
 vm._directInactive = false
 vm._isMounted = false
 vm._isDestroyed = false
 vm._isBeingDestroyed = false
}

这个函数主要是有父实例的情况下处理vm.$parent和vm.$children这俩个实例属性,我此处没有就跳过，其他的就是新增了一些实例属性