Vue的鉤子函數路由導航守衛、keep-alive、生命周期鉤子

前言

說到Vue的鉤子函數，可能很多人只停留在一些很簡單常用的鉤子(,)，而且對於裡面的區別，什麼時候該用什麼鉤子，並沒有仔細的去研究過，且Vue的生命周期在面試中也算是比較高頻的考點，那麼該如何回答這類問題，讓人有眼前一亮的感覺呢…

個人博客了解一下：obkoro1.com

Vue-Router導航守衛：

有的時候，我們需要通過路由來進行一些操作，比如最常見的登錄許可權驗證，當用戶滿足條件時，才讓其進入導航，否則就取消跳轉，並跳到登錄頁面讓其登錄。

為此我們有很多種方法可以植入路由的導航過程：全局的, 單個路由獨享的, 或者組件級的,推薦優先閱讀路由文檔

全局守衛

vue-router全局有三個守衛：

router.beforeEach 全局前置守衛 進入路由之前

router.beforeResolve 全局解析守衛(2.5.0+) 在beforeRouteEnter調用之後調用

router.afterEach 全局後置鉤子 進入路由之後

使用方法：

to,from,next 這三個參數：

to和from是將要進入和將要離開的路由對象,路由對象指的是平時通過獲取到的路由對象。

next:Function這個參數是個函數，且必須調用，否則不能進入路由(頁面空白)。

next() 進入該路由。

next(false): 取消進入路由，url地址重置為from路由地址(也就是將要離開的路由地址)。

next 跳轉新路由，當前的導航被中斷，重新開始一個新的導航。

路由獨享守衛

如果你不想全局配置守衛的話，你可以為某些路由單獨配置守衛：

路由組件內的守衛：

beforeRouteEnter 進入路由前

beforeRouteUpdate (2.2) 路由復用同一個組件時

beforeRouteLeave 離開當前路由時

文檔中的介紹：

beforeRouteEnter訪問this

因為鉤子在組件實例還沒被創建的時候調用，所以不能獲取組件實例 ，可以通過傳一個回調給來訪問組件實例

。

但是回調的執行時機在mounted後面,所以在我看來這裡對this的訪問意義不太大，可以放在或者裡面。

beforeRouteLeave：

導航離開該組件的對應路由時調用，我們用它來禁止用戶離開，比如還未保存草稿，或者在用戶離開前，將銷毀，防止離開之後，定時器還在調用。

關於鉤子的一些知識：

路由鉤子函數的錯誤捕獲

如果我們在全局守衛/路由獨享守衛/組件路由守衛的鉤子函數中有錯誤，可以這樣捕獲：

在路由文檔中還有更多的實例方法：動態添加路由等，有興趣可以了解一下。

跳轉死循環，頁面永遠空白

我了解到的，很多人會碰到這個問題，來看一下這段偽代碼：

看邏輯貌似是對的，但是當我們跳轉到之後，因為此時還是未登錄狀態，所以會一直跳轉到然後死循環，頁面一直是空白的，所以：我們需要把判斷條件稍微改一下。

全局後置鉤子的跳轉：

文檔中提到因為router.afterEach不接受函數所以也不會改變導航本身，意思就是只能當成一個鉤子來使用，但是我自己在試的時候發現，我們可以通過這種形式來實現跳轉：

額，通過router.beforeEach 也完全可以實現且更好，我就騷一下。

完整的路由導航解析流程(不包括其他生命周期)：

觸發進入其他路由。

調用要離開路由的組件守衛

調用局前置守衛：

在重用的組件里調用

調用路由獨享守衛 。

解析非同步路由組件。

在將要進入的路由組件中調用

調用全局解析守衛

導航被確認。

調用全局後置鉤子的 鉤子。

觸發DOM更新()。

執行 守衛中傳給 next 的回調函數

你不知道的keep-alive[我猜你不知道]

在開發Vue項目的時候，大部分組件是沒必要多次渲染的，所以Vue提供了一個內置組件來緩存組件內部狀態，避免重新渲染，文檔在這裡。

文檔：和 相似， 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。

用法：

緩存動態組件：

包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們，此種方式並無太大的實用意義。

緩存路由組件：

使用可以將所有路徑匹配到的路由組件都緩存起來，包括路由組件裡面的組件，大多數使用場景就是這種。

生命周期鉤子：

這篇既然是Vue鉤子函數的專場，那肯定要扣題呀~

在被包含的組件/路由中，會多出兩個生命周期的鉤子: 與 。

文檔：在 2.2.0 及其更高版本中，activated 和 deactivated 將會在樹內的所有嵌套組件中觸發。

activated在組件第一次渲染時會被調用，之後在每次緩存組件被激活時調用。

activated調用時機：

第一次進入緩存路由/組件，在後面，守衛傳給 next 的回調函數之前調用：

因為組件被緩存了，再次進入緩存路由/組件時，不會觸發這些鉤子：

所以之後的調用時機是：

deactivated：組件被停用(離開路由)時調用

使用了就不會調用(組件銷毀前鉤子)和(組件銷毀)，因為組件沒被銷毀，被緩存起來了。

這個鉤子可以看作的替代，如果你緩存了組件，要在組件銷毀的的時候做一些事情，你可以放在這個鉤子里。

如果你離開了路由，會依次觸發：

那麼，如果我只是想緩存其中幾個路由/組件，那該怎麼做？

緩存你想緩存的路由：

Vue2.1.0之前:

想實現類似的操作，你可以：

配置一下路由元信息

創建兩個標籤

使用通過路由元信息判斷緩存哪些路由。

使用路由元信息的方式，要多創建一個標籤，並且每個路由都要配置一個元信息，是可以實現我們想要的效果，但是過於繁瑣了點。

幸運的是在Vue2.1.0之後，Vue新增了兩個屬性配合來有條件地緩存 路由/組件。

新增屬性：

：匹配的 路由/組件 會被緩存

：匹配的 路由/組件 不會被緩存

和支持三種方式來有條件的緩存路由：採用逗號分隔的字元串形式，正則形式，數組形式。

正則和數組形式，必須採用形式來使用。

緩存組件的使用方式：

但更多場景中，我們會使用來緩存路由：

匹配規則：

首先匹配組件的name選項，如果選項不可用。

則匹配它的局部註冊名稱。 (父組件 選項的鍵值)

匿名組件，不可匹配。

比如路由組件沒有選項，並且沒有註冊的組件名。

只能匹配當前被包裹的組件，不能匹配更下面嵌套的子組件。

比如用在路由上，只能匹配路由組件的選項，不能匹配路由組件裡面的嵌套組件的選項。

文檔：不會在函數式組件中正常工作，因為它們沒有緩存實例。

`exclude`的優先順序大於`include`

也就是說：當和同時存在時，生效，不生效。

當組件被匹配，該組件將不會被緩存，不會調用 和。

組件生命周期鉤子：

關於組件的生命周期，是時候放出這張圖片了：

這張圖片已經講得很清楚了，很多人這部分也很清楚了，大部分生命周期並不會用到，這裡提一下幾點：

ajax請求最好放在裡面，因為此時已經可以訪問了，請求到數據就可以直接放在裡面。

這裡也碰到過幾次，面試官問：ajax請求應該放在哪個生命周期。

關於dom的操作要放在裡面，在前面訪問dom會是。

每次進入/離開組件都要做一些事情，用什麼鉤子：

不緩存：

進入的時候可以用和鉤子，離開的時候用和鉤子,可以訪問，不可以訪問。

緩存了組件：

緩存了組件之後，再次進入組件不會觸發、 、、 ，如果你想每次進入組件都做一些事情的話，你可以放在進入緩存組件的鉤子中。

同理：離開緩存組件的時候，和並不會觸發，可以使用離開緩存組件的鉤子來代替。

觸發鉤子的完整順序：

將路由導航、、和組件生命周期鉤子結合起來的，觸發順序，假設是從a組件離開，第一次進入b組件：

:路由組件的組件離開路由前鉤子，可取消路由離開。

: 路由全局前置守衛，可用於登錄驗證、全局路由loading等。

: 路由獨享守衛

: 路由組件的組件進入路由前鉤子。

:路由全局解析守衛

:路由全局後置鉤子

:組件生命周期，不能訪問。

:組件生命周期，可以訪問，不能訪問dom。

:組件生命周期

: 離開緩存組件a，或者觸發a的和組件銷毀鉤子。

:訪問/操作dom。

:進入緩存組件，進入a的嵌套子組件(如果有的話)。

執行beforeRouteEnter回調函數next。

結語

Vue提供了很多鉤子，但很多鉤子我們幾乎不會用到，只有清楚這些鉤子函數的觸發順序以及背後的一些限制等，這樣我們才能夠正確的使用這些鉤子，希望看了本文的同學，能對這些鉤子有更加清晰的認識，使用起來更加得心應手。

希望看完的朋友可以點個喜歡/關注，您的支持是對我最大的鼓勵。

如果喜歡本文的話，歡迎關注我的訂閱號，漫漫技術路，期待未來共同學習成長。

以上2018.7.21

參考資料：

Vue文檔

keep-alive的深入理解與使用(配合router-view緩存整個路由頁面)

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！