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

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

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論