【vue進階之旅】如何使用keep-alive做元件快取?

語言: CN / TW / HK

前言

大家好,我是東東吖,一名前端工程師。今天我要給大家分享的是如何使用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........

```

image.png

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

image.png

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

image.png

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

image.png

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

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

image.png

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

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

image.png

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

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

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

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

image.png

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

image.png

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

keep-alive 的屬性配置

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

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

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

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

image.png

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

image.png

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

image.png

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

結束

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