通过 vue-router 导航时组件生命周期钩子的优先级是多少

Question

我注意到当从起点导航到目的地时，目标组件的 created 挂钩出现在起点组件的 beforeDestroy 钩子之前。假设我们有这个路由器：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ],
})

组件生命周期钩子的实际优先级是多少(beforeCreate, created, beforeMount, mounted, activated, deactivated, beforeDestroy, destroyed) 当从 /foo 导航到 /bar?

以及结合导航守卫的完整导航流程是什么(beforeRouteLeave, beforeEach, beforeRouteUpdate, beforeEnter beforeRouteEnter, beforeResolve, afterEach)?

Answer 1

根据 this fiddle，这是从 Foo 导航到 Bar 时生命周期挂钩的优先级：

1. Bar: beforeCreate
2. Bar: created
3. Bar: beforeMount
4. Foo: beforeDestroy
5. Foo: destroyed
6. Bar: mounted

下面是完整的导航流程：

1. 来源：beforeRouteLeave 后卫。
2. 全球：beforeEach后卫。
3. 目的地：beforeEnter gaurd.
4. 目的地：beforeRouteEnter 守卫。
5. 全球：beforeResolve后卫。
6. 全球：afterEach后卫。
7. 目的地：beforeCreate 生命周期钩子。
8. 目的地：created 生命周期钩子。
9. 目的地：beforeMount 生命周期钩子。
10. 目的地：回调传递给 beforeRouteEnter 守卫中的 next。
11. 来源：beforeDestroy 生命周期钩子。
12. 来源：destroyed 生命周期钩子。
13. 目的地：mounted 生命周期钩子。

使用keep-alive时：

9. ...
10. 目的地：回调传递给 beforeRouteEnter 守卫中的 next。
11. 来源：deactivated 生命周期钩子。
12. 目的地：mounted 生命周期钩子。
13. 目的地：activated 生命周期钩子。