【Vue2 ✨】Vue2 入门之旅 · 进阶篇（六）：keep-alive 与缓存机制

在前几篇文章中，我们学习了组件通信的多种方式。本篇将介绍 Vue 中的 keep-alive 机制，帮助你理解 Vue 如何在不同场景下缓存组件以提升性能。

---

目录

1. 什么是 keep-alive
2. keep-alive 的基本使用
3. keep-alive 的工作原理
4. keep-alive 的应用场景
5. LRU 缓存策略
6. 小结

---

什么是 keep-alive

keep-alive 是 Vue 提供的一个内置组件，它用于缓存组件的状态，使得组件在切换时不会被销毁，从而提升性能。特别是在切换频繁的组件中，使用 keep-alive 可以避免重复渲染，提升用户体验。

例子：

<template><keep-alive><component :is="currentComponent"></component></keep-alive>
</template><script>
export default {data() {return {currentComponent: 'ComponentA'}}
}
</script>

keep-alive 仅能用于包裹动态组件。它会缓存动态组件的状态，并且在切换时不销毁它们。

---

keep-alive 的基本使用

<template><div><button @click="currentComponent = 'ComponentA'">A</button><button @click="currentComponent = 'ComponentB'">B</button><keep-alive><component :is="currentComponent"></component></keep-alive></div>
</template><script>
import ComponentA from './ComponentA'
import ComponentB from './ComponentB'export default {components: {ComponentA,ComponentB},data() {return {currentComponent: 'ComponentA'}}
}
</script>

当你切换组件时，keep-alive 会缓存上一个组件的状态，避免每次切换时重新渲染。

---

keep-alive 的工作原理

keep-alive 通过缓存组件实例，减少不必要的 DOM 操作。当一个组件被切换到其他组件时，Vue 会将该组件实例保存在内存中。再切换回该组件时，Vue 会恢复这个组件的状态，而不是重新创建它。

核心流程：

1. 当组件首次渲染时，Vue 会创建该组件的实例并渲染它。
2. 当切换到其他组件时，Vue 会销毁当前组件，但不会删除其实例，而是将其保存在缓存中。
3. 当切换回该组件时，Vue 会恢复组件实例，并且组件的数据和 DOM 状态都不会丢失。

---

keep-alive 的应用场景

1. 路由切换时缓存组件

keep-alive 经常与 Vue Router 一起使用，以缓存页面组件。尤其在 SPA（单页应用）中，切换页面时，我们往往希望缓存某些页面的状态，而不必每次都重新渲染。

<template><router-view></router-view>
</template><script>
export default {components: {// 使用 keep-alive 包裹 router-view'router-view': {render: function (h) {return h('keep-alive', [h('router-view')])}}}
}
</script>

这样，每次切换路由时，已访问过的页面会被缓存，避免重新渲染。

2. 列表项缓存

在列表组件中，当我们频繁添加、删除或切换列表项时，使用 keep-alive 可以有效缓存每个列表项的状态，避免重复渲染。

---

LRU 缓存策略

Vue 的 keep-alive 默认使用 LRU（Least Recently Used）缓存策略。这意味着当缓存达到最大数量时，Vue 会销毁最久未使用的组件实例。

1. max 属性

keep-alive 提供了 max 属性来限制缓存的数量。超过这个数量时，最久未使用的组件会被销毁。

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

这会缓存最多 3 个组件实例，超过 3 个时，最久未使用的组件会被销毁。

2. include 和 exclude 属性

keep-alive 还提供了 include 和 exclude 属性，用来决定哪些组件需要缓存，哪些组件不缓存。

• include：指定哪些组件会被缓存。
• exclude：指定哪些组件不被缓存。

<keep-alive :include="['ComponentA', 'ComponentB']"><component :is="currentComponent"></component>
</keep-alive>

---

小结

1. keep-alive 用于缓存组件实例，提升性能，特别是在组件频繁切换时。
2. keep-alive 会保留组件状态，并避免重新渲染，提升用户体验。
3. Vue 的 keep-alive 使用 LRU 缓存策略，可以通过 max 限制缓存数量，include 和 exclude 控制缓存哪些组件。

---

📗 下一篇进阶文章，我们将学习 Vue Router 原理解析，深入了解路由是如何工作的以及如何进行优化。