緩存之keep-alive的理解和應用

官方解釋：

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在組件的父組件鏈中。

當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鈎子函數將會被對應執行。

主要用於保留組件狀態或避免重新渲染。

keep-alive 是 Vue 的內置組件，在組件切換過程中將狀態保留在內存中，等再次訪問的時候，還保持着離開之前的所有狀態，而不是重新初始化。也就是所謂的組件緩存。

我們知道，使用路由vue-router切換組件的時候是不保存狀態的，它進行$router.push()或$router.replace()的時候，舊組件會被銷毀，新組件會被新建，然后走一遍完整的生命周期。所以緩存經常與router-view一起出現：

<keep-alive>
    <router-view /> <!-- 所有路徑匹配到的視圖組件都會被緩存 -->
</keep-alive>

 

被包含在 keep-alive 中創建的組件，會多出兩個生命周期的鈎子: activated 與 deactivated：

1. activated：在 keep-alive 組件激活時調用

2. deactivated：在 keep-alive 組件停用時調用

注意： 只有組件被 keep-alive 包裹時，這兩個生命周期函數才會被調用。

　　　 這兩個鈎子在服務器端渲染期間不被調用。

 

應用場景

官網有一個多標簽界面的例子，介紹的還是蠻詳細的。

我們在實際開發項目中會有一些需求，比如跳轉到詳情頁面時，需要保持列表頁的滾動條的位置，返回的時候依然在這個位置，這樣可以提高用戶體驗，這個時候就可以使用緩存組件 keep-alive 來解決。

設置了 keep-alive 緩存的組件，會多出兩個生命周期鈎子：

• 首次進入組件時：beforeRouteEnter > beforeCreate > created > mounted > activated > ... ... > beforeRouteLeave > deactivated

• 再次進入組件時：beforeRouteEnter > activated > ... ... > beforeRouteLeave > deactivated

可以看到，緩存的組件中 activated 鈎子函數每次都會觸發，所以可以通過這個鈎子判斷，當前組件時需要使用緩存的數據還是重新調用接口加載數據。如果未使用keep-alive 組件，則在頁面回退時會重新渲染頁面，首次進入組件的一系列生命周期也會一一被觸發。

離開組件時，使用了 keep-alive 不會調用 beforeDestroy 和 destroyed 鈎子，因為組件沒被銷毀，被緩存起來了。所以 deactivated 這個鈎子可以看作是 beforeDestroy 和 destroyed 的代替，緩存組件銷毀的時候要做的一些操作可以放在這個里面。

 

需求案例

最近項目中碰到需要緩存的場景，主要還是列表頁到詳情頁的跳轉，但列表頁存在多級關系，具體需求如下：

初次進入此頁面，默認展示左側的樹形結構菜單，點擊某一菜單，右側加載該菜單相應的數據列表，由列表進入詳情內頁，然后再返回該頁面，希望該頁面保留了用戶之前選擇的樹形菜單及數據列表。若從其他頁面進入此頁面，則不需要緩存。

 

案例實踐

思路：結合 router 中設置 meta 信息，緩存列表頁。

1. 設置路由的 meta 信息

const List = () => import(/* webpackChunkName: "list" */ '../pages/List.vue')
const Detail = () => import(/* webpackChunkName: "detail" */ '../pages/Detail.vue')
{
    path: 'list',
    name: 'list',
    component: List,
    meta: {
        title: '列表',
        keepAlive: true, //需要緩存
        isKeep: false
    }
},
{
    path: 'dist',
    name: 'detail',
    component: Detail
}

2. 修改渲染匹配視圖組件 router-view（一般是 app.vue 文件，根據實際需求會不一樣）

<div class="container">
    <keep-alive> 
        <!-- 需要緩存的視圖組件 -->
        <router-view v-if="$route.meta.keepAlive"></router-view> 
     </keep-alive>
      <!-- 不需要緩存的視圖組件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

也可以使用 keep-alive 組件的 include/exclude 屬性，include 表示要緩存的組件名(定義時的 name 屬性)，而 exclude 相反，匹配到的組件不會被緩存。

<div class="container">
    <keep-alive include="list">
        <router-view></router-view> 
     </keep-alive>
</div>

3. 在需要緩存的頁面中，通過導航守衛 beforeRouteEnter 和 activated 鈎子判斷使用緩存還是重新渲染

beforeRouteEnter (to, from, next) {
    // 只在詳情返回時做緩存
    if (from.name === 'detail') {
        to.meta.isKeep = true
    } else {
        to.meta.isKeep = false
    }
    next()
},
activated () {
    if(this.$route.meta.isKeep) {
        // 詳情返回，取緩存數據
    } else {
        // 重新渲染，在這里調用加載請求
    }
}

此處 beforeRouteEnter 鈎子也可以使用 watch 屬性監聽路由的變化：

watch: {
    $route(to, from) {
        //通過to/from.path判斷是否是需要緩存的路徑然后添加邏輯
    }
}

 

問題：

從詳情返回列表時正常，但當用戶在詳情頁按 F5 刷新之后，再返回列表就不能保留離開之前的狀態了，因為這時頁面重載了。

解決辦法：

在離開當前之前，將信息儲存在 localStorage 中，當詳情數據刷新后，手動觸發加載請求。