目錄

一、什么是keep-alive？

與普通組件切換的對比

二、核心用法詳解

1. 基礎用法：動態組件緩存

2. 路由視圖緩存?

3. 生命周期鉤子

三、進階配置與優化

1. 精準控制緩存組件

（1）include/exclude屬性

（2）max屬性限制緩存數量

四、實戰場景與案例

1. 表單數據保存

2. 標簽頁切換優化

3. 動態控制緩存

五、避坑指南

1. 組件必須定義name屬性

2. 避免過度緩存

3. 相同路由不同參數導致緩存失效

六、性能優化建議

七、總結

---

一、什么是keep-alive？

keep-alive是Vue2中用于緩存不活躍組件實例的抽象組件。其核心作用是：

• 保留組件狀態（如表單輸入、滾動位置、定時器等）
• 避免重復渲染（跳過created/mounted等生命周期）
• 優化性能（減少DOM操作和數據請求）

與普通組件切換的對比

場景	普通組件	keep-alive包裹組件
切換時	銷毀并重建	隱藏并緩存
狀態保留	否	是
性能開銷	高（需重新渲染）	低（直接復用）

?

二、核心用法詳解

1. 基礎用法：動態組件緩存

<template><keep-alive><component :is="currentTab" /></keep-alive>
</template><script>
export default {data() {return {currentTab: 'Home'}},components: {Home, About}
}
</script>

?

• 效果：當currentTab在Home和About之間切換時，組件實例會被緩存，狀態不會丟失。

2. 路由視圖緩存?

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

• 適用場景：緩存路由組件（如商品列表頁、用戶主頁等），返回時無需重新加載數據。

3. 生命周期鉤子

被keep-alive包裹的組件會觸發兩個特殊鉤子：

export default {activated() {console.log('組件被激活');// 重新獲取數據或恢復定時器},deactivated() {console.log('組件被緩存');// 清除定時器或取消事件監聽}
}

?

• 注意：created/mounted等常規鉤子僅在首次加載時調用一次。

?

三、進階配置與優化

1. 精準控制緩存組件

（1）include/exclude屬性

<!-- 只緩存Home和About組件 -->
<keep-alive :include="['Home', 'About']"><router-view />
</keep-alive><!-- 排除User組件不緩存 -->
<keep-alive exclude="User"><router-view />
</keep-alive>

?

• 支持格式：字符串、正則表達式、數組
• 規則：組件需定義name屬性才能被匹配

（2）max屬性限制緩存數量

<!-- 最多緩存3個組件實例 -->
<keep-alive :max="3"><router-view />
</keep-alive>

• 底層機制：基于LRU（最近最少使用）算法，當緩存超過max時自動淘汰最久未使用的組件。

?

四、實戰場景與案例

1. 表單數據保存

需求：用戶填寫表單后切出頁面，返回時數據仍在。

<template><keep-alive><form-component /></keep-alive>
</template>

?

• 優勢：避免用戶重復輸入，提升體驗。

2. 標簽頁切換優化

<template><div><button @click="currentTab = 'TabA'">Tab A</button><button @click="currentTab = 'TabB'">Tab B</button><keep-alive><component :is="currentTab" /></keep-alive></div>
</template>

• 效果：TabA和TabB切換時，組件狀態（如表格滾動位置）會被保留。

3. 動態控制緩存

<template><keep-alive><component-a v-if="showA" /><component-b v-if="!showA" /></keep-alive>
</template>

• 場景：根據條件動態切換組件，同時保持緩存。

?

五、避坑指南

1. 組件必須定義name屬性

export default {name: 'Home', // 必須定義// ...
}

• 原因：include/exclude依賴組件的name進行匹配。

2. 避免過度緩存

• 問題：緩存過多組件會占用大量內存，尤其在移動端需謹慎使用。
• 解決方案：合理設置max值，或通過exclude排除非必要組件。

3. 相同路由不同參數導致緩存失效

<keep-alive><router-view :key="$route.fullPath" />
</keep-alive>

?

• 原因：默認情況下，<keep-alive>會緩存相同組件的不同參數實例。
• 解決方案：通過key強制區分不同路由參數。

六、性能優化建議

1. 按需緩存：僅對需要保留狀態的組件使用keep-alive。
2. 主動清理資源：在deactivated鉤子中清除定時器、事件監聽等。
3. 結合路由元信息：動態控制是否緩存特定路由。

   // router.js
   {path: '/dashboard',component: Dashboard,meta: { keepAlive: true }
   }// App.vue
   <keep-alive><router-view v-if="$route.meta.keepAlive" />
   </keep-alive>

七、總結

keep-alive是Vue2中優化組件性能的利器，通過緩存實例減少重復渲染，同時保留交互狀態。合理使用include/exclude、max屬性，結合生命周期鉤子，可以顯著提升復雜應用的流暢度。在實際開發中，需根據場景權衡緩存策略，避免內存泄漏問題。

建議：對于高頻切換的組件（如商品列表、表單頁），優先使用keep-alive；對于一次性展示的組件（如登錄頁），則無需緩存。

?