使用过 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 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
我们也可以再看一下 官网的生命周期图示[1]回想一下。
针对上面的 8 个生命周期，我们可以将其分为三个阶段，分别为：创建挂载阶段、更新阶段和销毁阶段。
下面就让我们依次来确认下当组件嵌套时，这三个阶段生命周期的触发顺序是怎么样的？
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 排版
