什麼是 keep-alive？
keep-alive 是 Vue 的一個內建抽象元件，通常用於快取動態元件或路由元件。被 keep-alive 包裹的元件在切換時不會被銷燬，而是會被快取下來，下一次切換回這個元件時，會直接複用之前的例項，保持其狀態。
<template>
<keep-alive>
<component :is="view"></component>
</keep-alive>
</template>
<script>
export default {
data() {
return {
view: 'MyComponent'
};
}
};
</script>
在這個例子中，MyComponent 在被切換時不會被銷燬，而是會被快取，當再次展示時，狀態和資料都保持不變。
重要的 keep-alive 配置選項 🚀🚀
keep-alive 提供了幾個有用的屬性和鉤子：
include和exclude： 用於控制哪些元件需要快取，支援字串、正規表示式或陣列。<keep-alive include="ComponentA, ComponentB" exclude="ComponentC"> <router-view></router-view> </keep-alive>
max： 用於指定快取的元件數量，當超出這個數量時，最久未使用的元件例項將被銷燬。<keep-alive :max="10"> <router-view></router-view> </keep-alive>
生命週期鉤子 🚀🚀
keep-alive 還引入了兩個新的元件生命週期鉤子，用於處理快取元件：
activated：當元件被啟用時觸發（即從快取中恢復時）。deactivated：當元件被停用時觸發（即被快取時）。
export default {
activated() {
console.log('元件被啟用了');
},
deactivated() {
console.log('元件被快取了');
}
};
適用場景
多頁籤（Tab）切換：在複雜的表單或多步操作場景中，使用者可能會頻繁切換頁面。如果使用
keep-alive，切換回來的頁面能保留之前輸入的資料或操作的狀態。路由快取：在 Vue 專案中，常常會在路由切換時希望保持元件狀態，如商品詳情頁、搜索結果頁等。
加分項：
我們需要適度使用，雖然
keep-alive可以提升效能，但並不是所有元件都適合快取。如果元件需要頻繁更新資料或依賴實時性，快取反而會導致不必要的複雜性。最好是配合路由使用，在 Vue Router 中，使用
keep-alive可以避免在切換路由時重新載入元件資料，提升使用者體驗。如果專案中有大量需要快取的頁面或元件，可以結合
max和exclude來更好地管理快取。
keep-alive 的核心原理 🚀🚀
簡單來說，keep-alive 是透過快取元件例項來避免元件重複建立和銷燬，達到效能最佳化的目的。它透過將已快取的元件儲存在記憶體中，當元件被重新啟用時，直接複用之前快取的例項，而不是重新建立。
核心原理步驟：
快取例項：當元件被第一次載入時，
keep-alive會將元件的例項快取起來。元件複用：當你切換到一個已經被快取的元件時，
keep-alive會從快取中提取該元件的例項，而不是重新建立。生命週期管理：爲了處理元件的啟用和停用，
keep-alive引入了activated和deactivated鉤子，在元件進入或離開快取時觸發。
keep-alive 的原始碼分析
以下是我抽取了一些關鍵程式碼和原理解析：
export default {
name: 'KeepAlive',
abstract: true, // 這是一個抽象元件，表示它不會直接渲染到 DOM 上
props: {
include: patternTypes, // 要快取的元件
exclude: patternTypes, // 不快取的元件
max: [String, Number] // 最大快取數
},
created () {
this.cache = Object.create(null); // 快取物件
this.keys = []; // 用來記錄快取的順序
},
destroyed () {
for (const key in this.cache) {
pruneCacheEntry(this.cache, key, this.keys);
}
},
watch: {
include (val) {
pruneCache(this, name => matches(val, name));
},
exclude (val) {
pruneCache(this, name => !matches(val, name));
}
},
render () {
const slot = this.$slots.default;
const vnode = getFirstComponentChild(slot); // 獲取第一個子元件
if (vnode) {
const componentOptions = vnode.componentOptions;
const name = getComponentName(componentOptions);
if (name && (
(this.include && !matches(this.include, name)) ||
(this.exclude && matches(this.exclude, name))
)) {
return vnode; // 如果不匹配 include/exclude，直接返回，不快取
}
const key = vnode.key == null
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key;
if (this.cache[key]) {
vnode.componentInstance = this.cache[key].componentInstance; // 從快取中取出例項
remove(this.keys, key); // 移除舊的位置
this.keys.push(key); // 重新放到最後，更新 LRU 位置
} else {
this.cache[key] = vnode; // 快取新例項
this.keys.push(key);
// 如果超過最大快取數，移除最早的例項
if (this.max && this.keys.length > parseInt(this.max)) {
pruneCacheEntry(this.cache, this.keys[0], this.keys, this._vnode);
}
}
vnode.data.keepAlive = true; // 標記元件為 keep-alive
}
return vnode || (slot && slot[0]); // 返回 vnode
}
};
1. 快取機制：
this.cache 是一個物件，用於儲存已經快取的元件例項。
this.keys 是一個數組，用來記錄快取元件的順序（實現 LRU 快取策略，具體見下方）。
2. 元件的快取和啟用：
在 render 函式中，Vue 判斷當前元件是否在 include 和 exclude 的範圍內。如果匹配不到，則不進行快取。
透過 key 標識元件，並將其與快取例項關聯。如果元件已經在快取中，直接取出快取的元件例項並複用。
3. LRU 快取策略：
LRU 快取策略維持了一個有序的數據結構，記錄了快取項的使用順序。當快取達到容量限制時，它會移除最近最少使用的項，以便為新的資料騰出空間。常見的實現方式包括使用雙向連結串列和雜湊表的組合，來保持快取項的順序和快速訪問。
當 this.keys 的長度超過 max 時，刪除最早的快取元件（即 this.keys[0]）。
4. 生命週期的管理：
activated 和 deactivated 生命週期鉤子與 keep-alive 緊密相關，它們在元件被從快取中啟用和停用時觸發。
activated 和 deactivated 鉤子用於管理元件的啟用和停用。
上面這 4 方面是 keep-alive 的核心原理程式碼。
總結
希望透過這篇文章，你對 Vue 的 keep-alive 元件有了更深入的理解。
