vue生命週期

生命週期

Created: 可改變數據，不會進入beforeupdate, updated
Mounted: 特殊狀況監測不到數據的變動，會進入beforeupdate, updated
beforeupdate, updated：若是發生變動的數據在模板中並無使用（包括直接和間接，間接：好比某個依賴該數據的計算屬性在模板中使用了），則不會觸發更新流程！！！

生命週期鉤子

1. 組件鉤子：8個
   beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
2. 路由鉤子
   全局路由鉤子
   beforeEach、afterEach、beforeResolve
   路由獨享鉤子
   beforeEnter
   組件路由鉤子
   beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
3. 指令的週期： 5個
   bind、inserted、update、componentUpdated、unbind

組件鉤子

參考連接：Vue生命週期深刻

路由鉤子

全局路由鉤子

beforeEach

通常在這個勾子的回調中，對路由進行攔截。

值得注意的是，若是沒有調用next方法，那麼頁面將卡在那。

next的四種用法
1.next() 跳入下一個頁面
2.next('/path') 改變路由的跳轉方向，使其跳到另外一個路由
3.next(false)  返回原來的頁面
4.next((vm)=>{})  僅在beforeRouteEnter中可用，vm是組件實例。

afterEach

在全部路由跳轉結束的時候調用，和beforeEach是相似的，可是它沒有next方法

組件路由鉤子

beforeRouteEnter (to, from, next)

1. 在渲染該組件的對應路由被 confirm 前調用
2. 不！能！獲取組件實例 `this`
3. 由於當守衛執行前，組件實例還沒被建立

beforeRouteUpdate (to, from, next)

1. 在當前路由改變，可是該組件被複用時調用
2. 能夠訪問組件實例 `this`

beforeRouteLeave (to, from, next)

1. 導航離開該組件的對應路由時調用
2. 能夠訪問組件實例 `this`

參考連接：vue生命週期探究（二）