Skip to content

Vue源码——初始化initLifecycle #30

Open
@coderInwind

Description

@coderInwind

前言

在上一篇文章中,我们外到内了解了Vue是怎么样实例化出来的,以及Vue的初始化做的事情,在_init中调用了数个初始化函数,我们逐一地深入来理解这些函数。

initLifecycle分析

export function initLifecycle (vm: Component) {
  const options = vm.$options

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

这里判断当前组件不是抽象组件或是存在着父级,那么就while向上层循环,如果父级是抽象组件或是存在父级,继续向上循环直到找到一个非抽象组件的父级为止,然后将vm添加给这个最顶层父级的$children数组中。

...
  // 父级实例
  vm.$parent = parent
  // 根实例
  vm.$root = parent ? parent.$root : vm
  // 子实例
  vm.$children = []
  // ref引用
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

有意思的是vm.$root属性,当当前实例存在的父级时,他的$root就是父级的$root,那么有人就会问了,为什么是直接赋这个值而不用像上文一样一层层遍历呢,举一个例子:$root代表你的祖先,$parentvm代表你爸爸和你,你的祖先就一定是你爸爸的祖先。而如果当前没有父级,那么根实例就是它自己,他以后儿孙的祖先就是它了。
而后就是对vm对象上的属性进行简单的赋值,这里就不一一介绍他们的用途。

总结

initLifecycle函数主要是给vm对象添加一系列的属性,以$开头的公有属性,以及以_开头的表示私有属性。

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions