目錄
一、KeepAlive的作用
二、緩存組件配置
2.1、過濾緩存組件
2.2、最大緩存實例數
三、KeepAlive組件的生命周期
四、錯誤用法
4.1、緩存v-if包裹的動態組件
4.2、拼寫錯誤
一、KeepAlive組件的作用
? ? ? ? 首先，keep-alive是一個vue的內置組件，官網文檔：vue.js - KeepAlive。我們在編寫vue代碼時，是可以直接<KeepAlive></KeepAlive>組件化調用的。
? ? ? ? KeepAlive多用于切換tab頁或跳轉、改變頁面時候，緩存舊頁面，以達到使用瀏覽器后退或返回功能回到舊頁面時候，依舊可以保留跳轉前的頁面值。
二、緩存組件配置
2.1、緩存過濾
? ? ? ? 在<KeepAlive></KeepAlive>中，被包裹的組件將會被緩存，默認緩存包裹的所有實例。當然可以根據事情情況選擇特定選擇實例進行緩存，這樣也有助提供響應速度。
// include和exclude 其值可以是字符串，數組、正則表達式，除字符串外，其余類型得使用:include或:exclude<KeepAlive include="" exclude=""><component :is="currentTab" v-show="routeName === key" />
</KeepAlive>2.2、最大緩存實例數
? ? ? ? 這塊設置用來限制組件緩存的最大實例數，當緩存的實例數超過指定的最大緩存數后，vue自動將最久沒有被訪問的實例數的緩存刪除，用來添加新的緩存實例。
// 使用prop :max指定<KeepAlive :max="20"><component :is="currentTab" v-show="routeName === key" />
</KeepAlive>?
三、KeepAlive組件的生命周期
????????activated 和?deactivated 生命周期可以用來處理一些回調邏輯。
四、錯誤用法
????????在使用KeepAlive時，有幾個注意點，要不然會沒有緩存效果。
4.1、緩存v-if包裹的動態組件
// 因為v-if會在dom中移除（KeepAlive會不起作用） -->
<template v-if="routeName === key"><KeepAlive><component :is="currentTab"/></KeepAlive>
</template>// 改用v-show
<KeepAlive><component :is="currentTab" v-show="routeName === key" />
</KeepAlive>4.2、拼寫錯誤
? ? ? ? 在template塊里得使用KeepAlive，若使用keep-alive的話會不起作用，親測。
