Vue3动态组件缓存：KeepAlive用法与手动管理实例实践

脚本专家

在Vue3项目中，动态组件频繁切换时会重复创建和销毁实例，导致性能损耗。本文通过几个实际案例，演示如何使用KeepAlive内置组件和手动缓存机制来复用组件实例，提升页面响应速度。

2. // 基础示例：KeepAlive包裹动态组件
3. <template>
4.   <div>
5.     <button @click="current = 'CompA'">显示A</button>
6.     <button @click="current = 'CompB'">显示B</button>
7.     <KeepAlive>
8.       <component :is="current" />
9.     </KeepAlive>
10.   </div>
11. </template>
13. <script setup>
14. import { ref } from 'vue'
15. import CompA from './CompA.vue'
16. import CompB from './CompB.vue'
17. const current = ref('CompA')
18. </script>

复制代码

<KeepAlive>会将切换隐藏的组件保留在内存中，再次显示时无需重新创建，组件内部状态（如输入框内容）也会被保留。

控制缓存范围：include / exclude
若只想缓存特定组件，可使用include属性，其值可以是组件名称字符串、正则或数组。例如只缓存CompA：

2. <KeepAlive include="CompA">
3.   <component :is="current" />
4. </KeepAlive>

复制代码

使用exclude则排除指定组件，其余均被缓存。注意组件名需与注册名称一致（使用<script setup>时默认文件名为组件名）。

限制缓存数量：max属性
当缓存实例过多可能占用内存，max可设置最多缓存实例数，超过时最早缓存的实例会被销毁。

2. <KeepAlive max="2">
3.   <component :is="current" />
4. </KeepAlive>

复制代码

若三个组件轮流切换，只缓存最近两个，第三个出现时第一个被销毁。

生命周期钩子：onActivated / onDeactivated
被KeepAlive缓存的组件会触发两个特殊钩子，可用于数据刷新或资源释放。

2. // 在CompA.vue中
3. import { onActivated, onDeactivated } from 'vue'
5. onActivated(() => {
6.   console.log('CompA被激活（从缓存显示）')
7. })
9. onDeactivated(() => {
10.   console.log('CompA被停用（隐藏到缓存）')
11. })

复制代码

手动管理组件实例缓存
某些场景需更灵活的控制，可通过对象手动存储组件实例。利用shallowRef和markRaw避免Vue对组件定义做深层响应式处理。

2. <template>
3.   <div>
4.     <button @click="show('CompA', CompA)">显示A</button>
5.     <button @click="show('CompB', CompB)">显示B</button>
6.     <component :is="currentComp" v-if="currentComp" />
7.   </div>
8. </template>
10. <script setup>
11. import { ref, shallowRef, markRaw } from 'vue'
12. import CompA from './CompA.vue'
13. import CompB from './CompB.vue'
15. const cache = {}
16. const currentComp = ref(null)
18. function show(name, comp) {
19.   if (!cache[name]) {
20.     cache[name] = markRaw(shallowRef(comp))
21.   }
22.   currentComp.value = cache[name].value
23. }
24. </script>

复制代码

同样达到复用实例的效果，但需要手动管理缓存对象和显示逻辑。

封装为组合式函数
将手动缓存逻辑抽离成可复用的useDynamicComponent函数：

2. // useDynamicComponent.js
3. import { ref, shallowRef, markRaw } from 'vue'
5. export function useDynamicComponent() {
6.   const cache = {}
7.   const currentComp = ref(null)
9.   const show = (name, component) => {
10.     if (!cache[name]) {
11.       cache[name] = markRaw(shallowRef(component))
12.     }
13.     currentComp.value = cache[name].value
14.   }
16.   return { currentComp, show }
17. }
18. </script>
20. <script setup>
21. // 使用组合式函数
22. import { useDynamicComponent } from './useDynamicComponent'
23. import CompA from './CompA.vue'
24. import CompB from './CompB.vue'
26. const { currentComp, show } = useDynamicComponent()
27. </script>

复制代码

这样多个组件可以共享同一份缓存逻辑，保持代码整洁。

总结
KeepAlive适用于常规动态组件缓存场景，配置简单；手动实例缓存和组合式函数适合需要精细控制或跨组件复用逻辑的情况。根据实际需求选择合适方式，可有效减少不必要的组件销毁重建，提升Vue3应用性能。

热心网友6

感谢分享！平时用 KeepAlive 比较多，但手动管理实例和组合式函数的思路很实用，尤其是需要精细控制缓存逻辑时，抽成 hook 确实能保持代码干净。请问在手动缓存方案中，如果组件有动态 props 或插槽，你是怎么处理状态同步的呢？