在 Vue 3 中，<keep-alive> 是一个内置组件，用于缓存动态组件或页面的实例，从而避免频繁销毁和重新创建，提高应用的性能和用户体验。它常用于 SPA（单页面应用）中对路由页面的缓存，特别是在用户在不同页面间切换时，保持页面的状态和滚动位置等信息。
1. <keep-alive> 的作用
- 缓存组件状态：
<keep-alive>会将包裹的组件实例保存在内存中，当该组件被移除时不会销毁，而是在重新展示时直接复用之前的实例。 - 减少重新渲染和销毁：适合用于那些频繁切换的视图或组件，减少创建和销毁的开销，从而提升应用的性能。
- 保持组件的状态：可以保留组件中的数据和未保存的状态（如表单数据、滚动位置等），防止用户在切换页面时丢失操作。
2. <keep-alive> 的使用场景
- 路由切换时：在单页面应用中，常用于对路由视图的缓存。
- 动态组件切换：例如在 Tab 切换中，对各个 Tab 页缓存，避免每次切换都重新加载。
3. <keep-alive> 的工作原理
Vue 3 的 <keep-alive> 组件在内部通过缓存对象和生命周期钩子来实现。具体的实现流程大致如下：
- 缓存组件实例：当组件首次被加载时，
<keep-alive>会将该组件的实例存入一个缓存对象（cache）中，键是组件的标识符，值是组件的实例。 - 复用实例：当需要展示之前缓存的组件时，
<keep-alive>会从缓存中找到对应的实例，并将其重新插入到页面上，而不是重新创建新的实例。 - 控制缓存的数量：通过
max属性可以控制缓存的最大组件数量。超过这个数量时，<keep-alive>会移除最早缓存的实例，采用 LRU（最近最少使用）策略。 - 生命周期钩子：
activated：当缓存的组件被重新激活时触发。deactivated：当缓存的组件被隐藏或移除时触发。
4. 示例代码
<template><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive>
</template>
在这个示例中：
<keep-alive>包裹了<router-view>，所以只有meta.keepAlive为true的页面会被缓存。- 其他未设置
keepAlive的路由则不会缓存，保持默认的加载和销毁。
5. <keep-alive> 的属性
- include/exclude：可以指定哪些组件或页面需要被缓存。
include：缓存的组件名称列表。exclude：不需要缓存的组件名称列表。
- max：指定最多缓存的组件数量，超过限制时会按照 LRU 策略移除。
<keep-alive :include="['Home', 'About']" :exclude="['Contact']" :max="10"><router-view></router-view>
</keep-alive>
6. 使用钩子监听 <keep-alive> 状态
可以在被缓存的组件中使用 activated 和 deactivated 钩子来处理组件被激活和停用时的逻辑。
<script>
export default {name: "MyComponent",activated() {console.log("Component is activated"); // 组件被激活},deactivated() {console.log("Component is deactivated"); // 组件被停用}
}
</script>
7. 总结
<keep-alive> 的原理是通过缓存对象维护组件实例，从而避免销毁和重建。它在 Vue 3 中依然保持着高效的缓存机制，适合用于缓存频繁切换的视图组件。配合路由和生命周期钩子，<keep-alive> 提供了一种灵活的方式来优化 Vue 应用的性能。