Vue 3 KeepAlive 教程
1. 什么是 KeepAlive？
KeepAlive 是 Vue 3 中的一个内置组件，用于缓存动态组件或路由组件。它的主要作用是在组件切换时保留组件的状态，避免重复渲染和重新创建组件，从而提高应用性能。
2. KeepAlive 的基本用法
2.1 基础示例
<template>
<KeepAlive>
<component :is="currentComponent"></component>
</KeepAlive>
</template>
<script setup>
import { ref } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
const currentComponent = ref(ComponentA)
</script>
2.2 在 Vue Router 中使用
<router-view v-slot="{ Component }">
<KeepAlive>
<component :is="Component" />
</KeepAlive>
</router-view>
3. KeepAlive 的高级配置
3.1 include 和 exclude 属性
<KeepAlive :include="['ComponentA', 'ComponentB']" :exclude="['ComponentC']">
<component :is="currentComponent"></component>
</KeepAlive>
include：指定需要缓存的组件exclude：指定不需要缓存的组件- 可以使用字符串、正则表达式或数组
3.2 max 属性限制缓存数量
<KeepAlive :max="10">
<component :is="currentComponent"></component>
</KeepAlive>
max 属性用于限制最大缓存组件数量，超过限制时会按照 LRU（最近最少使用）策略移除组件。
4. 生命周期钩子
在使用 KeepAlive 时，组件会新增两个生命周期钩子：
onActivated：组件被激活时触发onDeactivated：组件被缓存时触发
<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => {
console.log('组件被激活')
})
onDeactivated(() => {
console.log('组件被缓存')
})
</script>
5. 实际应用场景
5.1 保留表单状态
<template>
<KeepAlive>
<UserForm v-if="isFormVisible" />
</KeepAlive>
</template>
<script setup>
const isFormVisible = ref(true)
</script>
5.2 性能优化的标签页切换
<template>
<KeepAlive>
<component :is="currentTab" />
</KeepAlive>
</template>
6. 注意事项
- KeepAlive 只能缓存非路由组件
- 对于需要频繁更新的组件，谨慎使用缓存
- 使用
include/exclude时，建议使用组件名称
7. 最佳实践
- 在复杂的单页应用中，合理使用 KeepAlive
- 对于数据变化频繁的组件，可以结合
onActivated钩子重新获取数据 - 注意内存占用，适当设置
max属性
8. 兼容性
Vue 3 中的 KeepAlive 完全兼容 Vue 2，用法基本一致。
结语
KeepAlive 是 Vue 3 中提高应用性能的重要组件，合理使用可以大大优化用户体验和页面加载速度。