Vue组件嵌套时生命周期函数触发顺序是什么？

使用过 Vue 的你们，对于生命周期必定都很熟悉，在官方文档一开始，就给咱们介绍了 Vue 的生命周期有哪些，是怎么样的顺序。这个难不倒你们。

但若是是问当组件嵌套时，父子组件的生命周期函数触发的顺序是什么样的？你是否是会有一丝丝不肯定呢?

若是有的话，就让咱们一块儿动动手来确认下这个简单的问题吧。

首先，一个 Vue 实例/组件的生命周期中的 8 个关键阶段：

1. beforeCreate：在实例初始化以后，数据观测 (data observer) 和 event/watcher 事件配置以前被调用。
2. created：在实例建立完成后被当即调用。在这一步，实例已完成数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
3. beforeMount：在挂载开始以前被调用：相关的 render 函数首次被调用。
4. mounted：实例被挂载后调用，这时 el 被新建立的 vm.$el 替换了。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁以前。
6. updated：虚拟 DOM 从新渲染和打补丁以后。
7. beforeDestory：实例销毁以前调用。在这一步，实例仍然彻底可用。
8. destoryed：实例销毁后调用。对应 Vue 实例的全部指令都被解绑，全部的事件监听器被移除，全部的子实例也都被销毁。

咱们也能够再看一下 官网的生命周期图示^[1]回想一下。

来源：https://cn.vuejs.org/

针对上面的 8 个生命周期，咱们能够将其分为三个阶段，分别为：建立挂载阶段、更新阶段和销毁阶段。

下面就让咱们依次来确认下当组件嵌套时，这三个阶段生命周期的触发顺序是怎么样的？

示例代码：codesandbox.io/s/qiantaozu…

1. 建立挂载阶段

若是你仔细阅读各阶段的描述，你应该能想到当组件嵌套时，子组件的建立挂载是在父组件挂载的时候才触发的。下面咱们来确认下。

打开示例代码，默认状况下是没有渲染组件的。这个时候咱们点击：勾选显示组件，你会看到以下页面，父子组件会渲染出来。

此时，能够看到console中输出了父子组件的触发顺序。

顺序以下：

能够看到子组件的建立挂载阶段确实是在父组件的挂载阶段完成的，开始于父组件的beforeMount以后，结束于父组件的mounted以前。

2. 更新阶段

一样的，更新阶段比较简单，有了上面的经验，基本能够肯定子组件的更新过程是在父组件的beforeUpdate和updated之间。

修改页面中的父组件的名称，能够看到输出的生命周期触发顺序确实如预期，以下：

3. 销毁阶段

说到这里，销毁阶段应该没啥好说的了，子组件的销毁是在父组件的beforeDestroy和destroyed之间完成的。

点击示例代码，取消勾选显示组件，能够看到以下顺序：

如今让咱们在官方的生命周期图示上作一点拓展，加上组件嵌套时的生命周期。以下图所示：

组件嵌套时的生命周期图示

好了，今天要分享的内容到这里就结束了。

---

哈哈，开个玩笑，显然不会这么水，否则歪马本身都看不下去。

下面咱们继续。上面咱们经过简单直观的方式确认了下组件嵌套时，生命周期函数触发的顺序是什么样的。然而缜密的你可能已经发现了，上面的示例都是以同步组件为例的。当组件为异步组件时会发生什么变化呢？

3. 当组件是异步组件时

前面，歪马留了一手，官方文档上有指出以下内容：“mounted 不会保证全部的子组件也都一块儿被挂载”、“updated 不会保证全部的子组件也都一块儿被重绘。”。

之因此官网会给出如此说明，是由于当组件为异步组件时，生命周期的触发顺序会和上面多有不一样。

异步子组件的建立和挂载

话很少说，咱们先把组件改为异步的，看看结果。从 demo 中找到src/components/OuterBox.vue，将InnerBox改成异步加载。如：

// 异步组件
InnerBox: () => import("./InnerBox")
复制代码

而后咱们从新勾选显示页面，能够发现，当子组件为异步，子组件的建立挂载阶段发生在父组件的beforeUpdate和updated之间。

咱们稍微翻一下 Vue 的源码，能够看到当组件是异步组件时，会执行异步组件的工厂函数，在组件加载完成以后，会强制更新全部包含该组件的父组件。

异步函数的工厂函数就是上面的() => import("./InnerBox")，官方文档指出，只要是一个返回值是 Promise 的函数就行。返回值也能够是更复杂的带有加载状态的对象，能够参见文档。

// ...
var forceRender = function (renderCompleted) {
  for (var i = 0, l = owners.length; i < l; i++) {
    // 依次强制更新父组件
    (owners[i]).$forceUpdate();
  }
};

var resolve = once(function (res) {
  factory.resolved = ensureCtor(res, baseCtor);
  // 若是是异步组件，则在resolve时强制更新父组件。
  if (!sync) {
    forceRender(true);
  } else {
    owners.length = 0;
  }
});

var reject = once(function (reason) {//...});

// 执行异步组件的工厂函数
var res = factory(resolve, reject);
复制代码

父组件更新时同理，若是存在新的异步加载组件，则不会等待。

好了，今天要分享的内容就是这么简单，就是想动动手确认下组件嵌套时，父子组件生命周期的执行顺序是什么。

参考资料

[1]

生命周期图示: https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

本文使用 mdnice 排版