KeepAlive 是 Vue 組件中的一個重要功能，主要用于緩存組件，以提升性能和用戶體驗。

---

一、KeepAlive 基本概念

KeepAlive 是 Vue 內置的一個抽象組件，通常用于包裹動態組件，使其在切換時保持狀態，而不是被銷毀和重新創建。

主要作用：

1. 緩存組件，避免重復創建和銷毀，提升性能。
2. 保持組件狀態，例如表單填寫、用戶滾動位置等不會丟失。
3. 適用于router-view和component動態組件。

基礎使用示例：

<template><keep-alive><component :is="currentView"></component></keep-alive>
</template><script>
import A from "./A.vue";
import B from "./B.vue";export default {data() {return {currentView: "A"};},components: { A, B }
};
</script>

在上述代碼中，<component :is="currentView">會根據currentView的值動態切換組件，但由于keep-alive的存在，被切換出去的組件不會被銷毀，而是被緩存。

---

二、KeepAlive 的核心原理

1. 組件掛載與緩存

   • Vue 在創建組件時，會判斷是否被 KeepAlive 包裹，如果是，則不會銷毀，而是將其存儲在 cache 對象中。
   • 當組件被切換回來時，會從 cache 取出，而不會重新創建實例。

2. 緩存管理

   • KeepAlive 組件通過 include 和 exclude 規則控制哪些組件需要緩存，哪些不需要。

3. 生命周期鉤子

   • activated()：組件被緩存后激活時觸發。
   • deactivated()：組件被緩存但切換出去時觸發。

---

三、KeepAlive 關鍵屬性解析

1. include：指定需要緩存的組件

可以是字符串、正則表達式或數組：

<keep-alive :include="['A', 'B']"><router-view></router-view>
</keep-alive>

這樣只有 A 和 B 組件會被緩存。

2. exclude：指定不需要緩存的組件

<keep-alive :exclude="/^Temp/"><router-view></router-view>
</keep-alive>

所有以 Temp 開頭的組件都不會被緩存。

3. max：最大緩存組件數

<keep-alive :max="2"><router-view></router-view>
</keep-alive>

最多緩存 2 個組件，超過后會刪除最久未使用的組件。

---

四、KeepAlive 生命周期

組件被 keep-alive 緩存時，不會觸發 created、mounted，但會觸發以下鉤子：

1. activated()：組件從緩存中激活
2. deactivated()：組件被緩存但未銷毀

示例：

<script>
export default {created() {console.log("組件創建");},mounted() {console.log("組件掛載");},activated() {console.log("組件被激活");},deactivated() {console.log("組件被緩存");}
};
</script>

生命周期觸發順序

• 首次進入：created → mounted → activated
• 切換離開：deactivated
• 再次進入：activated

---

五、具體使用場景

1. 配合 router-view，緩存某些路由

   <keep-alive><router-view></router-view>
   </keep-alive>
   

   • 這樣切換路由時，已訪問的組件會被緩存。

2. 結合 include 指定緩存頁面

   <keep-alive :include="['Home', 'Profile']"><router-view></router-view>
   </keep-alive>
   

   • 只有 Home 和 Profile 頁面會被緩存。

3. 結合 exclude 過濾不需要緩存的頁面

   <keep-alive :exclude="['Login']"><router-view></router-view>
   </keep-alive>
   

   • Login 頁面不會被緩存，其他頁面都會緩存。

4. 動態組件緩存

   <keep-alive><component :is="currentComponent"></component>
   </keep-alive>
   

   • 切換組件時不會銷毀原組件。

---

六、常見問題及解決方案

1. activated 和 deactivated 不觸發

• 確保組件確實被 keep-alive 包裹，并且是動態組件。

2. keep-alive 組件緩存過多導致內存占用

• 使用 max 限制緩存數：

  <keep-alive :max="3"><router-view></router-view>
  </keep-alive>
  

3. 如何手動清除緩存

this.$destroy(); // 清除當前組件緩存

或者

this.$parent.$forceUpdate(); // 強制更新

4. 如何手動清除 keep-alive 緩存

可以使用 key 強制重新渲染：

<keep-alive><component :is="currentComponent" :key="currentKey"></component>
</keep-alive>

每次切換 currentKey，都會重新渲染組件。

---

七、完整示例：結合 Vue Router

<template><div><button @click="currentView = 'Home'">Home</button><button @click="currentView = 'About'">About</button><keep-alive><component :is="currentView"></component></keep-alive></div>
</template><script>
import Home from "./Home.vue";
import About from "./About.vue";export default {data() {return {currentView: "Home"};},components: { Home, About }
};
</script>

在這里：

• Home 和 About 組件可以自由切換，并且會被 keep-alive 緩存。

---

八、總結

1. KeepAlive 主要用于緩存動態組件，避免重復創建和銷毀，提高性能。
2. 關鍵屬性：
   • include 指定緩存組件。
   • exclude 排除不需要緩存的組件。
   • max 限制最大緩存數。
3. 組件生命周期：
   • activated() 組件被激活
   • deactivated() 組件被緩存
4. 適用于 router-view 及 component 組件，適合緩存列表、表單、復雜頁面狀態。

如果在項目中正確使用 KeepAlive，可以大幅提升前端性能，避免頁面狀態丟失，提高用戶體驗。