人人都能懂的Vue源码系列(八)—initLifecycle

青旅半醒 2022-05-09 19:06 172阅读 0赞

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

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://cn.vuejs.org/v2/api/#parent" rel="nofollow">$parent</a></td> 
   <td>指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。</td> 
  </tr> 
  <tr> 
   <td><a href="https://cn.vuejs.org/v2/api/#vm-root" rel="nofollow">$root</a></td> 
   <td>当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。</td> 
  </tr> 
  <tr> 
   <td><a href="https://cn.vuejs.org/v2/api/#vm-children" rel="nofollow">$children</a></td> 
   <td>当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。</td> 
  </tr> 
  <tr> 
   <td><a href="https://cn.vuejs.org/v2/api/#vm-refs" rel="nofollow">$refs</a></td> 
   <td>一个对象，持有已注册过 ref 的所有子组件。</td> 
  </tr> 
  <tr> 
   <td><a href="https://cn.vuejs.org/v2/guide/reactivity.html" rel="nofollow">_watcher</a></td> 
   <td>组件实例相应的 watcher 实例对象。</td> 
  </tr> 
  <tr> 
   <td>_inactive</td> 
   <td>表示keep-alive中组件状态，如被激活，该值为false,反之为true。</td> 
  </tr> 
  <tr> 
   <td>_directInactive</td> 
   <td>也是表示keep-alive中组件状态的属性。</td> 
  </tr> 
  <tr> 
   <td>_isMounted</td> 
   <td>当前实例是否完成挂载(对应<a href="https://cn.vuejs.org/v2/guide/instance.html" rel="nofollow">生命周期图示</a>中的mounted)。</td> 
  </tr> 
  <tr> 
   <td>_isDestroyed</td> 
   <td>当前实例是否已经被销毁(对应<a href="https://cn.vuejs.org/v2/guide/instance.html" rel="nofollow">生命周期图示</a>中的destroyed)。</td> 
  </tr> 
  <tr> 
   <td>_isBeingDestroyed</td> 
   <td>当前实例是否正在被销毁,还没有销毁完成(介于<a href="https://cn.vuejs.org/v2/guide/instance.html" rel="nofollow">生命周期图示</a>中deforeDestroy和destroyed之间)。</td> 
  </tr> 
 </tbody> 
</table>

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

[vue]: https://cn.vuejs.org/v2/api/#keep-alive