<keep-alive> 是一個抽象組件，用于將其內(nèi)部的組件保留在內(nèi)存中，而不會重新渲染。這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時，其狀態(tài)將被保留，而不是被銷毀和重新創(chuàng)建。

        <keep-alive>用來緩存不經(jīng)常變化的組件，以提高性能，當(dāng)我們在不同路由之間進(jìn)行切換或者是動態(tài)改變組件時，<keep-alive>可以確保被緩存的組件保留之前的一個狀態(tài)，而不會重新執(zhí)行created和mounted等生命周期鉤子函數(shù)。
        那么<keep-alive>會提供activated 和 deactivated 生命周期鉤子函數(shù)的應(yīng)用.這兩個生命周期鉤子函數(shù)是在緩存組件時或失去緩存組件時進(jìn)行的觸發(fā)。

        activated鉤子函數(shù)叫做激活狀態(tài)，也就是組件當(dāng)被激活的時候進(jìn)行的調(diào)用，這時候組件從<keep-alive>緩存中變?yōu)橐粋€激活的狀態(tài)，將會再次的插入到頁面當(dāng)中進(jìn)行一個渲染顯示。

        deactivated鉤子函數(shù)是當(dāng)緩存的組件失去我們的活力調(diào)用時觸發(fā)，這時組件從頁面當(dāng)中移除并且從新添加到<keep-alive>緩存當(dāng)中。

那么我們可以在activated鉤子中進(jìn)行內(nèi)部數(shù)據(jù)的初始化操作，而在deactivated鉤子中進(jìn)行數(shù)據(jù)的清理以確保每次被激活時都有正確的一個狀態(tài)，如果組件處于一些外部服務(wù)的應(yīng)用，比如websocked連接，或者定時器操作等等，則可以在activated中開始或啟動的一個服務(wù)，在deactivated當(dāng)中關(guān)閉或停止某些服務(wù)，以避免浪費(fèi)一些無效的一些資源，那么我們可以在組件切換的時候添加一些自定義的過渡或動畫的效果，這樣可以通過activated以及deactivated鉤子中去觸發(fā)我們的動畫效果或者是相應(yīng)的業(yè)務(wù)邏輯來進(jìn)行實(shí)現(xiàn)。

總的來說，activated和deactivated生命周期鉤子函數(shù)為我們提供了在緩存的組件狀態(tài)變換時執(zhí)行一些特殊的業(yè)務(wù)邏輯的一個操作功能。

        那么對于<keep-alive>來說，除了生命周期鉤子函數(shù)的一個影響，還有其他屬性的一個設(shè)置，比如include 和 exclude 屬性的設(shè)置. 主鍵的include和exclude屬性是用于配置那些主鍵是用來緩存，那些組件是不應(yīng)該被緩存，而它們的屬性可以接收的數(shù)據(jù)類型，主要包括了字符串，正則表達(dá)式或字符串的數(shù)組內(nèi)容。

原理：緩存函數(shù)中的max，也就是最大值，它采用的并不是隊(duì)列，而是LRU（緩存淘汰策略）

LRU (Least Recently Used) 是一種緩存淘汰策略用于在緩存容量不足時確定哪些數(shù)據(jù)項(xiàng)被移除。其基本思想是保留最近被訪問過的數(shù)據(jù)，而淘汰最長時間沒有被訪問的數(shù)據(jù)。LRU算法通過維護(hù)一個訪問順序列表來實(shí)現(xiàn)這個目標(biāo)。

 （LRU的思想就是保留最近被訪問的數(shù)據(jù)，而淘汰最長時間未被訪問的數(shù)據(jù),那么LRU算法通過維護(hù)一個訪問序列表來實(shí)現(xiàn)這個目標(biāo)，例如：當(dāng)一個數(shù)據(jù)項(xiàng)被訪問的時候，我們會將其移動到順序列表的頭部，表示最近被使用過，當(dāng)需要淘汰一個數(shù)據(jù)的時候，選擇列表尾部的數(shù)據(jù)進(jìn)行移除，這時表示沒有被使用過的數(shù)據(jù)，這種方式保證了訪問過的數(shù)據(jù)項(xiàng)保持在我們列表的頭部，而不常訪問的數(shù)據(jù)項(xiàng)逐漸會移動到我們列表的尾部，當(dāng)需要淘汰數(shù)據(jù)的時候，只需要移除尾部的數(shù)據(jù)即可。）

以下是模擬LRU算法的一些代碼示例：

<script>
    class LRUCache{
        constructor(capacity){
            this.capacity = capacity; // 緩存容量
            this.cache = new Map(); // 使用 Map 數(shù)據(jù)結(jié)構(gòu)存儲緩存數(shù)據(jù)，以鍵值對的形式保存
        }
        get(key) {
            if(this.cache.has(key)){ // 如果緩存中存在該鍵，則表示緩存命中
                const value = this.cache.get(key); // 獲取對應(yīng)鍵的值
                this.cache.delete(key); // 刪除原有的鍵值對
                this.cache.set(key,value); // 將鍵值對重新放入緩存，保證最近使用的鍵值對在 Map 的末尾
                return value; // 返回獲取到的值
            }else {
                return -1; // 如果緩存中不存在該鍵，則返回 -1 表示未命中
            }
        }
        put(key,value){
            if(this.cache.has(key)){ // 如果緩存中已經(jīng)存在該鍵，則需要將其刪除
                this.cache.delete(key);
            }else if(this.cache.size >= this.capacity){ // 如果緩存已滿，需要刪除最久未使用的鍵
                const oldestkey = this.cache.keys().next().value; // 獲取 Map 中第一個鍵，即最久未使用的鍵
                this.cache.delete(oldestkey); // 刪除最久未使用的鍵值對
            }
            this.cache.set(key,value); // 將新的鍵值對放入緩存
        }
    }
    const lruCache = new LRUCache(3); // 創(chuàng)建容量為 3 的 LRUCache 對象
    lruCache.put(1,1); // 將鍵值對 (1, 1) 放入緩存
    lruCache.put(2,2); // 將鍵值對 (2, 2) 放入緩存
    lruCache.put(3,3); // 將鍵值對 (3, 3) 放入緩存
    console.log(lruCache.get(1)); // 獲取鍵為 1 的值，輸出 1
    lruCache.put(4,4); // 將鍵值對 (4, 4) 放入緩存，此時緩存已滿，需要刪除最久未使用的鍵值對
    console.log(lruCache.get(2)); // 獲取鍵為 2 的值，由于鍵 2 已經(jīng)被刪除，返回 -1
</script>

到此這篇關(guān)于Vue中的keep-alive緩存組件的理解的文章就介紹到這了,更多相關(guān)Vue keep-alive緩存組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論