vue系列之生命週期

zhouzhou發表於2018-11-08
Vue

生命週期鉤子

  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生命週期探究（二）

相關文章