初始化生命周期

源码位置：src/core/instance/lifecycle.ts

源码：

export function initLifecycle(vm: Component) {
  const options = vm.$options; // 合并后的选项

  // locate first non-abstract parent
  // 找到第一个非抽象父级（非抽象父组件，例如：keep-alive就是抽象父级）
  let parent = options.parent;
  if (parent && !options.abstract) {
    // keep-alive 的abstract=true
    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._provided = parent ? parent._provided : Object.create(null);
  vm._watcher = null;
  vm._inactive = null;
  vm._directInactive = false;
  vm._isMounted = false;
  vm._isDestroyed = false;
  vm._isBeingDestroyed = false;
}

提示

vue 开发中常用的抽象组件有<keep-alive>、<transition>、<transition-group>等，这些组件的实现是一个对象，它们有一个属性 abstract，属性值为 true时，表明是它一个抽象组件;

抽象组件自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

这一步做的事件很简单

构建组件层级关系
- 若有父级，将当前组件实例加入父组件的$children中，在此之前还会用while先向上递归，找到自己的第一个非抽象父级
- 指定父级vm.$parent = parent
- 指定根实例 vm.$root = parent ? parent.$root : vm;
一系列属性的初始化

vm.$children = [];vm.$refs = {};

vm._provided = parent ? parent._provided : Object.create(null);vm._watcher = null;vm._inactive = null;vm._directInactive = false;vm._isMounted = false;vm._isDestroyed = false;vm._isBeingDestroyed = false;

初始化生命周期 ​

初始化生命周期