前言

大家好，我是東東吖，一名前端工程師。今天我要給大家分享的是如何使用keep-alive做元件快取？

為什麼要做元件快取？什麼場景下會用到元件快取？或許很多小夥伴根本不知道keep-alive這個元件，也或許知道keep-alive可以做元件快取，但是卻從來沒有實踐過，懵懵懂懂，剛好我曾經有過使用keep-alive做元件快取相關的專案經驗，現在我就給大家分享一下keep-alive這個元件到底是怎麼回事？在專案中應該怎麼用？應該注意些什麼？

keep-alive的使用場景？

現在給大家講一講keep-alive的使用場景，比如你在購物網站，不斷地滾動螢幕，當滾動到了很久很久，你突然發現一件你很喜歡的商品，你點選進入詳情，當你查看了該商品的詳情，返回出來要保持之前的位置繼續往下瀏覽商品，你會怎麼做？再比如你在一個頁面有多個tab，預設是會選中第一個tab，當你在第二個tab切換到其他頁面的時候（比如對應tab的詳情），再次返回到當前的頁面，要保持你去之前的tab和對應的狀態，你會怎麼做？

這裡如果沒有使用元件快取的話，當你點選商品詳情頁面，當前商品列表的頁面就會銷燬，當你從商品詳情返回到商品列表的時候，這個頁面已經重新進行了構建，是不會儲存在你之前剛剛瀏覽的位置的，又會返回到最頂上的位置，這個時候你讓使用者再重複把剛剛的內容再刷一遍嗎？而使用者的需求是繼續之前的位置，可以接著往下滑。切換tab的場景也是這樣的道理，不會儲存你離開之前的狀態，下面我會深入講解。

vue的八大生命週期

我目前寫了一個tab案例，幫助大家理解keep-alive,對應的邏輯和程式碼如下： 一共有tab1和tab2兩個頁面，點選按鈕會顯示對應tab的內容，點選color按鈕，會變更內容的顏色，同時會在控制檯列印所有生命週期。

```

```

當我們進入頁面，當前頁面的元件會被建立，並會顯示tab的內容，觸發從構建待到掛載相關的生命週期。 ``` beforeCreate........ created.....元件建立了 beforeMount........ mounted........

```

當我們點選tab2按鈕會切換到tab2的內容，頁面發生改變，會觸發元件更新相關的生命週期 beforeUpdate........ updated........

當我們點選color按鈕,會給tab2的內容變跟一個顏色，頁面發生改變，還是會觸發元件更新相關的生命週期 beforeUpdate........ updated........

當我們點選其他頁面，當前頁面進會進行銷燬，會觸發元件銷燬相關的的生命週期： beforeDestroy.... index.vue?6ced:62 destroyed.....元件銷燬了

如何利用keep-alive做元件快取？

現在問題來了，當我們再次進入剛才的頁面，頁面優化重新進行構建，並且會預設顯示tab1的內容，文字的顏色也是預設黑色。

如果我們現在重新切換到剛剛的頁面，想要預設顯示tab2的內容，並且顏色是經過變更的，也就是想要返回之後，儲存我們切走前的狀態,該怎麼辦呢？

那就需要用到我們的keep-alive元件快取，我們keep-alive元件是vue的官方元件無需註冊，直接使用，當我們直接把keep-alive的元件包裹 ，就能到達我們的效果，我們把他加上再試一下。

我們發現keep-alive維持了我們離開當前頁面的效果，同時控制檯的生命週期也有了一些變化，那是怎麼回事呢？

使用keep-alive之後，vue生命週期有何變化?

當我們使用keep-alive之後，我們首次進入該頁面

我們會發現會多一個生命週期activated，這個生命週期代表元件被激活了。 beforeCreate........ created.....元件建立了 beforeMount........ mounted........ activated........元件激活了

當我們離開當前頁面，會觸發另外一個生命週期deactivated，這個生命週期代表元件失活了,並且你會發現，當我們離開當前頁面，並不會觸發元件銷燬的生命週期，也就說明當前元件並沒有被銷燬，而是被快取起來了，這也是我們為啥能實現我們想要效果的原因。

當我們反覆切換其他頁面和當前頁面，從第二次進入當前頁面會觸發activated，離開當前頁面會觸發deactivated，並不會再去觸發beforeCreate、created、beforeMount、mounted這四個生命週期，所以我們做專案使用keep-alive做元件快取的時候，呼叫的介面應該是在元件被啟用時的生命週期activated去掉，而不是在created生命週期去掉，因為created只會執行一次。

keep-alive 的屬性配置

keep-alive會快取被包裹的元件，當我們包裹在 就說明整個專案的路由都被快取了，如果我們想要只快取部分頁面，該怎麼辦呢？

``` 在keep-alive上有兩個屬性：

include 值為字串或者正則表示式匹配的元件name會被快取。 exclude 值為字串或正則表示式匹配的元件name不會被快取，其它元件全部快取。

``` 首先利用include實現，匹配到元件中定義的name，將進行快取

當我們切換路由的時候就會發現，只有name為KeepAlive的這個元件被快取了，其他路由被未被快取，你可以在企業路由同樣列印對應的生命週期。

其次我們再來利用exclude實現，匹配的元件name不會被快取，其它元件全部快取。 我們把include直接換成exclude,再次切換元件路由，我們會發現生命週期模組在執行一次生命週期created等生命週期之後，就沒有執行了（有執行元件快取的兩個生命週期，只是我沒列印），說明被元件換成了，而元件快取模組一直在執行created等生命週期，而沒執行元件快取的兩個生命週期了。

當然就是keep-alive元件快取的使用方式，當然keep-alive的使用方式並不止這一種，歡迎大家留言討論。

結束

對於本文章，你有任何疑問，可在評論區留言交流。另外，我自己建了一個前端技術交流群，群成員工作年限0-10年都有，如果想進前端技術交流群，可以加我微信fangdongdong_25，請備註掘金哦。