說到Vue緩存，我們肯定首先選擇官方提供的緩存方案keep-alive，本文主要介紹了詳解Vue適時清理keepalive緩存方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求

單頁面應(yīng)用中，用戶進(jìn)入表單填寫頁面，需要初始化表單內(nèi)容，填寫過程中可能涉及到地圖選點(diǎn)或者列表選擇等操作，需要到新的頁面選擇并回調(diào)顯示。

此時我們需要緩存表單填寫頁面實例，當(dāng)退出表單填寫或提交完表單內(nèi)容之后，需要銷毀當(dāng)前表單實例，下次進(jìn)入重新進(jìn)行初始化

思考

說到 Vue 緩存，我們肯定首先選擇官方提供的緩存方案 keep-alive 內(nèi)置組件來實現(xiàn)。

keep-alive 組件提供給我們緩存組件的能力，可以完整的保存當(dāng)前組件的狀態(tài)，這幫了我們很大的忙

但實際業(yè)務(wù)場景中，我們很多時候是按需緩存頁面的，就像 App 開發(fā)那樣，每個頁面都是單獨(dú)的一個頁面實例，由于 Vue Router 的限制，每個頁面有固定的一個 path，所以導(dǎo)致每次訪問這個 path 都會命中同一個組件實例

這個時候可能會有小伙伴說

誒，不是可以用 activated 來進(jìn)行頁面更新或者處理嗎？

沒錯，是可以這樣，但是，有些操作是 mounted 里面要做，有些需要放到 activated 里面更新，代碼要處理很多進(jìn)入頁面的操作，就很麻煩啊。

此時就有兩個思考方向：

在必要的時候清除掉緩存頁面的實例
每次 push 頁面的時候，保證當(dāng)前頁面是全新的實例對象，和 App 頁面棧相同

第二種方案可以比較物理的解決需求中的問題，但是需要改動的地方很多，比如 Vue Router 中路由切換的時候，是否采用動態(tài)生成 path ，確保當(dāng)前頁面實例不唯一，而且我們也要做好自己的頁面棧管理，類似于 iOS 中的 UINavigationController ，以便于及時清理棧中緩存的頁面實例

因為改動比較大，而且需要大量測試，所以最后還是選擇在方案一的方向進(jìn)行探索和嘗試。

嘗試

1. 手動操作 keep-alive 組件的 cache 數(shù)組

//  Vue 2 keep-alive 部分源碼片段
const { cache, keys } = this;
const key: ?string =
    vnode.key == null
        ? // same constructor may get registered as different local components
          // so cid alone is not enough (#3269)
          componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : "")
        : vnode.key;
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance;
    // make current key freshest
    remove(keys, key);
    keys.push(key);
} else {
    // delay setting the cache until update
    this.vnodeToCache = vnode;
    this.keyToCache = key;
}

通過路由守衛(wèi)在特定的情況下刪除 cache 數(shù)組中的頁面實例，同時 destory 當(dāng)前實例

removeKeepAliveCacheForVueInstance(vueInstance) {
    let key =
        vueInstance.$vnode.key ??
        vueInstance.$vnode.componentOptions.Ctor.cid + (vueInstance.$vnode.componentOptions.tag ? `::${vueInstance.$vnode.componentOptions.tag}` : "");
    let cache = vueInstance.$vnode.parent.componentInstance.cache;
    let keys = vueInstance.$vnode.parent.componentInstance.keys;
    if (cache[key]) {
        vueInstance.$destroy();
        delete cache[key];
        let index = keys.indexOf(key);
        if (index > -1) {
            keys.splice(index, 1);
        }
    }
}

這種方案比較繁瑣，但由于是直接操作 cache 數(shù)組，可能會產(chǎn)生一些預(yù)期外的泄漏問題或者運(yùn)行問題，雖然我自己嘗試的時候沒有發(fā)現(xiàn)。。

在 Vue 3 中我也嘗試去尋找對應(yīng)的 cache 數(shù)組，還真被我找到了，但是 Vue 3 源碼中對于 cache 數(shù)組的操作權(quán)限僅限于開發(fā)環(huán)境

// Vue 3 KeepAlive 組件片段
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
    ;(instance as any).__v_cache = cache
}

部署生產(chǎn)環(huán)境之后就沒辦法通過 instance.__v_cache 來獲取 cache 數(shù)組了，所以這種方案到 Vue 3 就沒辦法進(jìn)行下去啦。

于是乎，就有了第二個嘗試

2. exclude 大法好

之前接觸 keep-alive 所有注意力都放在 include 這個屬性上面，其實 exclude 屬性同樣重要，而且效果和我們直接刪除 cache 數(shù)組異曲同工。

// Vue 3 KeepAlive 組件片段
 if (
    (include && (!name || !matches(include, name))) ||
    (exclude && name && matches(exclude, name))
    ) {
        current = vnode
        return rawVNode
    }

如果 exclude 里面有值，那么就返回當(dāng)前新的實例不從 cache 里面獲取。而且 exclude 的優(yōu)先級是高于 include 的。

利用這一點(diǎn)，我們就可以通過操作 exclude 中的內(nèi)容，來達(dá)到控制緩存頁面的效果。

而且 exclude 在 Vue 3 中的控制更為方便，只需要定義一個全局的 exclude 響應(yīng)式變量就可以隨處操作了，清除的具體方式取決于業(yè)務(wù)流程

export const excludes = ref<string[]>([]);
// 需要刪除的時候
export function removeKeepAliveCache(name: string) {
    excludes.value.push(name);
}
// 需要恢復(fù)緩存的時候
export function resetKeepAliveCache(name: string) {
    excludes.value = excludes.value.filter((item) => item !== name);
}