Vue 3 KeepAlive 教程

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. 注意事项

1. KeepAlive 只能缓存非路由组件
2. 对于需要频繁更新的组件，谨慎使用缓存
3. 使用 include/exclude 时，建议使用组件名称

7. 最佳实践

• 在复杂的单页应用中，合理使用 KeepAlive
• 对于数据变化频繁的组件，可以结合 onActivated 钩子重新获取数据
• 注意内存占用，适当设置 max 属性

8. 兼容性

Vue 3 中的 KeepAlive 完全兼容 Vue 2，用法基本一致。

结语

KeepAlive 是 Vue 3 中提高应用性能的重要组件，合理使用可以大大优化用户体验和页面加载速度。