Vue生命周期结合导航守卫执行顺序

不要通过console.log( this )去输出引用值，console.log并非JavaScript正式部分，是由宿主环境添加进去，不同环境有不同实现。在chrome浏览器打印的是对象当时的快照信息，当展开对象时候，会去内存读对象的属性值。所以可能会造成一种错觉。必要时使用打断点或debugger、序列化为字符串输出查看最新状态。

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

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

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