Vue组件生命周期钩子和Vue-Router路由钩子的执行顺序

Vue组件生命周期钩子的执行顺序如下图所示

链接：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

这里只列出了初始化时渲染的钩子，销毁、更新时的钩子不在本次讨论的范围之内。

而在Vue-Router中，导航守卫的执行顺序如下所示

链接：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

这里存在疑惑的是组件的生命周期到底在导航守卫的哪个阶段执行，测试代码如下

执行结果截图如下

结论：从控制台结果可以看出，组件的生命周期是在Vue-Router导航守卫的DOM更新过程中执行的

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被**的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。（此过程触发组件的生命周期）
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。