# 生命週期

注意

App.vue 本身是所有程序的進入點，而且並沒有符合整個根目錄的任何組件或是執行方法。

所以，App.vue 自身是沒有辦法使用 Router 的 Hooks 方法的。

# 路由流程

父組件 ➡️ 父組件 (Hello ➡️ Kitty)

Hello beforeRouteLeave
Kitty beforeEnter
Kitty beforeRouteEnter
App beforeUpdate
Kitty beforeCreate
Kitty created
Kitty beforeMount
Hello beforeDestroy
Hello destroyed
Kitty mounted
App updated

1
2
3
4
5
6
7
8
9
10
11

Hello.vue 的 beforeDestory 與 destroyed 是會發生於 Kitty.vue 的 created，beforeMount 之後，且在 mounted 之前。

父組件 ➡️ 子組件 (Hello ➡️ HelloKitty)

Hello beforeRouteUpdate   # 因為組件重複而觸發
HelloKitty beforeEnter
HelloKitty beforeRouteEnter
App beforeUpdate
Hello beforeUpdate
HelloKitty beforeCreate
HelloKitty created
HelloKitty beforeMount
HelloKitty mounted
Hello updated
App updated

1
2
3
4
5
6
7
8
9
10
11

父組件 ➡️ 其他父組件的子組件 (Kitty ➡️ HelloKitty)

Kitty beforeRouteLeave
Hello beforeEnter
HelloKitty beforeEnter
Hello beforeRouteEnter
HelloKitty beforeRouteEnter
App beforeUpdate
Hello beforeCreate
Hello created
Hello beforeMount
HelloKitty beforeCreate
HelloKitty created
HelloKitty beforeMount
Kitty beforeDestroy
Kitty destroyed
HelloKitty mounted    # 注意：子組件會先 mounted，再來是父組件
Hello mounted
App updated

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相同父組件的子組件 ➡️ 同層子組件 (HelloKitty ➡️ HelloWorld)

HelloKitty beforeRouteLeave
Hello beforeRouteUpdate
HelloWorld beforeEnter
HelloWorld beforeRouteEnter
App beforeUpdate
Hello beforeUpdate
HelloWorld beforeCreate
HelloWorld created
HelloWorld beforeMount
HelloKitty beforeDestroy
HelloKitty destroyed
HelloWorld mounted
Hello updated
App updated

1
2
3
4
5
6
7
8
9
10
11
12
13
14

比起從其他路徑進來的過程，如果都是在 同一個 父層級路由當中變換，那麼 Hello.vue 的 mounted 就不會再被觸發，且 Hello.vue 的 beforeRouteUpdate 會在每個子路由離開 (beforeRouteLeave) 後，銷毀之前執行。

# 路由順序

beforeCreate, created, beforeMount 順序 父組件 > 子組件。

舉例：一父組件進入另一父組件的子組件，會先執行另一父組件的beforeCreate, created, beforeMount才是子組件的。
mounted 順序 子組件 > 父組件。
同父組件，以下事件只會做 1 次：
1. beforeEnter
2. beforeRouteEnter
3. beforeCreate
4. created
5. beforeMount
6. mounted
子組件在完全離開時才會執行 beforeRouteLeave。
在路由當中「重新整理頁面」的順序不太一樣，以 /hello/kitty 列舉如下：
1. 先執行父組件 Hello.vue 的 beforeEnter。
2. 接著子組件 HelloKitty.vue 的 beforeEnter。
3. 然後才是 App.vue 的系列動作：
  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
4. 接著是 Hello.vue 的 beforeRouteEnter
5. 接著子組件 HelloKitty.vue 的 beforeRouteEnter
6. 全局的 beforeResolve
7. 再來是 App.vue 的 beforeUpdate
8. 後續是 Hello.vue 、 HelloKitty.vue 與其他組件系列動作 (父組件 > 子組件)
  1. beforeCreated
  2. created
  3. beforeMount
9. 最後在依照路由順序 mounted，內部組件理論上會優先 (子組件 > 父組件)
10. 最後的最後 App.vue 的 updated

# 參考

Router 進階應用 (opens new window)

← 路由守衛路由封裝 →