脚本宝典收集整理的这篇文章主要介绍了人人都能懂的Vue源码系列—08—initLifecycle，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

上篇文章，我们讲了vm._renderProxy相关的内容。主要是通过Proxy为我们vm属性添加一些自定义的行为。今天我们回到init方法中，为大家讲解initLifecycle。
initLifeCycle方法用来初始化一些生命周期相关的属性，以及为parent,child等属性赋值，来看源码。

export function initLifecycle (vm: Component) {
  const options = vm.$options
  // locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    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
}

一行一行分析

const options = vm.$options

把mergeOptions后的options赋值给options变量。

// locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

我们注意到，vue作者对这段代码提供了一行注释

locate first non-abstract parent

定位第一个"非抽象"的父组件，注意非抽象这三个字。什么是非抽象呢？最初自己也很疑惑，最后在vue文档中找到了答案。

抽象组件的定义如上图所示，注意这句话，不会出现在父组件链中。明白了这点我们再去看上面的代码就不会有那么迷糊了。

let parent = options.parent
if (parent && !options.abstract) {
    ... 
}

当前vm实例有父实例parent，则赋值给parent变量。如果父实例存在，且该实例不是抽象组件。则执行下面代码

while (parent.$options.abstract && parent.$parent) {
  parent = parent.$parent
}
parent.$children.push(vm)

注意while循环内的条件parent.$options.abstract && parent.$parent,如果父实例parent是抽象组件，则继续找parent上的parent。直到找到非抽象组件为止。之后把当前vm实例push到定位的第一个非抽象parent的$children属性上。这样我们就说完了怎么找vm的parent属性。
之后我们回到initLifecycle继续往下看

  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一些属性赋值。这些属性的作用如下表。

initLifecycle方法的逻辑比较简单，主要对vue实例一些属性进行赋值。所以这里就不画流程图来进行说明了。下篇文章我们主要讲initEvents方法，敬请期待。

脚本宝典总结

以上是脚本宝典为你收集整理的人人都能懂的Vue源码系列—08—initLifecycle全部内容，希望文章能够帮你解决人人都能懂的Vue源码系列—08—initLifecycle所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。