人人都能懂的Vue源码系列—08—initLifecycle

Cristalven 发布于2019-08-22 17:13 / 3234人阅读

摘要：主要是通过为我们属性添加一些自定义的行为。方法用来初始化一些生命周期相关的属性，以及为等属性赋值，来看源码。名称说明指定已创建的实例之父实例，在两者之间建立父子关系。一个对象，持有已注册过的所有子组件。

上篇文章，我们讲了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一些属性赋值。这些属性的作用如下表。

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

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

GPU云服务器云服务器 vue源码 vue webrtc 源码 initLifecycle python x08

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94967.html

人人都能懂的Vue源码系列—02—Vue构造函数

摘要：果然我们找到了的构造函数定义。告诉你是一个构造函数，需要用操作符去调用。在深入方法之前，我们先把目光移到文件里在的构造函数定义之后，有一系列方法会被立即调用。下篇博文主要介绍相关的内容，涉及到原型链和构造函数以及部分的实现，敬请期待上篇博文中说到了Vue源码的目录结构是什么样的，每个目录的作用我们应该也有所了解。我们知道core/instance目录主要是用来实例化Vue对象，所以我...

X_AirDu 2019-08-22 16:32 评论0 收藏0
人人都能懂的Vue源码系列—01—Vue源码目录结构

摘要：阅读的源码，或者说阅读一个框架的源码，了解它的目录结构都是很有帮助的。人人都能懂的源码系列文章将会详细的介绍源码的方方面面。阅读Vue的源码，或者说阅读一个框架的源码，了解它的目录结构都是很有帮助的。下面我们来看看Vue源码的目录结构。showImg(https://segmentfault.com/img/bV8fLS?w=598&h=654); Vue各目录简介下图是Vue各个...

MAX_zuo 2019-08-22 16:14 评论0 收藏0
人人都能懂的Vue源码系列—04—resolveConstructorOptions函数-下

摘要：上一篇文章中说道，函数要分两种情况进行说明，第一种是为基础构造器的情况，这个已经向大家介绍过了，今天这篇文章主要介绍第二种情况，是创建的子类。表示的是当前构造器上新增的，表示的是当前构造器上新增的封装。上一篇文章中说道，resolveConstructorOptions函数要分两种情况进行说明，第一种是Ctor为基础构造器的情况，这个已经向大家介绍过了，今天这篇文章主要介绍第二种情况...

My_Oh_My 2019-08-22 16:45 评论0 收藏0
人人都能懂的Vue源码系列—04—resolveConstructorOptions函数-下

摘要：上一篇文章中说道，函数要分两种情况进行说明，第一种是为基础构造器的情况，这个已经向大家介绍过了，今天这篇文章主要介绍第二种情况，是创建的子类。表示的是当前构造器上新增的，表示的是当前构造器上新增的封装。上一篇文章中说道，resolveConstructorOptions函数要分两种情况进行说明，第一种是Ctor为基础构造器的情况，这个已经向大家介绍过了，今天这篇文章主要介绍第二种情况...

BlackHole1 2019-08-26 11:51 评论0 收藏0
人人都能懂的Vue源码系列—07—initProxy

摘要：不同的代码运行环境赋值的结果不同。当访问的属性不是类型或者属性值在被代理的对象上不存在，则抛出错误提示，否则就返回该属性值。该方法可以在开发者错误的调用属性时，提供提示作用。只不过目前规范还没有很完善，使用的时候要稍加注意。前几篇文章中，我们主要讲了merge options的一些操作。今天我们回到init方法往下讲。 if (process.env.NODE_ENV !== pro...

vspiders 2019-08-22 17:09 评论0 收藏0