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

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

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

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

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

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

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

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

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

 （LRU的思想就是保留最近被訪問的數(shù)據(jù)，而淘汰最長時間未被訪問的數(shù)據(jù),那么LRU算法通過維護一個訪問序列表來實現(xiàn)這個目標，例如：當一個數(shù)據(jù)項被訪問的時候，我們會將其移動到順序列表的頭部，表示最近被使用過，當需要淘汰一個數(shù)據(jù)的時候，選擇列表尾部的數(shù)據(jù)進行移除，這時表示沒有被使用過的數(shù)據(jù)，這種方式保證了訪問過的數(shù)據(jù)項保持在我們列表的頭部，而不常訪問的數(shù)據(jù)項逐漸會移動到我們列表的尾部，當需要淘汰數(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); // 獲取對應鍵的值
                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)文章希望大家以后多多支持腳本之家！

最新評論