[JavaScript知识库]Vue生命周期结合导航守卫执行顺序

不要通过console.log( this )去输出引用值，console.log属于异步函数会先加入到队列中，不会阻塞代码的执行。等到执行打印到控制台期间，可能会对引用值内部修改，造成一种错觉。

对照官网：完整的导航解析流程

1. 导航被触发
2. 调用 失活 组件守卫：beforeRouteLeave
3. 调用全局守卫：beforeEach
4. 调用 重用 组件守卫：beforeRouteUpdate
5. 调用路由守卫：beforeEnter
6. 解析异步路由组件
7. 调用 激活 组件守卫：beforeRouteEnter
8. 调用全局守卫：beforeResolve
9. 导航被确认
10. 调用全局守卫：afterEach
11. 触发DOM更新（以下顺序成立前提：子组件没有通过v-if状态false变为true）
    （-------同步加载子组件，即import Test from “./components/Test.vue”-------）
    • 父组件: beforeCreate
    • 父组件: created
    • 父组件: beforeMount
    • 子组件: beforeCreate
    • 子组件: created
    • 子组件: beforeMount
    • 失活父组件: beforeDestroy
    • 失活子组件: beforeDestroy
    • 失活子组件: destroyed
    • 失活父组件: destroyed
    • 父组件前置守卫回调函数：beforeRouteEnter next
    • 子组件: mounted
    • 父组件: mounted

以上是自己实践过得出（其中beforeDestroy和destroyed在beforeRouteEnter next前还是后，没确定），方便之后忘记回过来复习的。