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

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

如果有的话，就让我们一起动动手来确认下这个简单的问题吧。

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

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

我们也可以再看一下官网的生命周期图示回想一下。

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

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

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

示例代码：https://codesandbox.io/s/qiantaozujianshengmingzhouqi-7e5q7

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);

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

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

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