Vue3中keep-alive组件缓存的正确用法：动态组件与路由缓存实践

脚本专家

在Vue3项目中，使用keep-alive组件可以缓存组件实例，避免重复渲染和状态丢失。本文通过代码示例详解Vue3中keep-alive在动态组件切换和路由缓存中的正确用法，包括常见错误及性能优化技巧。

一、基础用法：v-if切换组件缓存

如果不使用keep-alive，组件切换时会销毁和重建，表单输入等状态会丢失。以下示例中，Father组件通过v-if/v-else切换Child和Child2，每次切换都会重新挂载。

2. <!-- Father.vue -->
3. <template>
4.   <div>
5.     <el-button @click="tabChange">change page</el-button>
6.     <Child :msg="cutTab" v-if="cutTab"></Child>
7.     <Child2 :msg="cutTab" v-else></Child2>
8.   </div>
9. </template>
10. <script setup lang="ts" name="Father">
11. const cutTab = ref(false);
12. const tabChange = () => {
13.   cutTab.value = !cutTab.value;
14. };
15. </script>

复制代码

Child和Child2组件各包含一个input输入框，切换后输入内容会丢失。在keep-alive包裹后，组件实例会被缓存，切换回来时保留输入状态。

二、使用include/exclude控制缓存

keep-alive提供了include和exclude属性，用于指定需要缓存或排除的组件名称（对应组件name选项）。例如只缓存Child2：

2. <keep-alive include="Child2">
3.   <Child :msg="cutTab" v-if="cutTab"></Child>
4.   <Child2 :msg="cutTab" v-else></Child2>
5. </keep-alive>

复制代码

三、动态组件与keep-alive的注意事项

当使用<component :is>动态切换时，keep-alive要求只有一个直接子节点。常见错误是在keep-alive内部放置注释或多根节点，导致控制台警告："<KeepAlive> expects exactly one child component"。

错误示例：

2. <keep-alive include="Child2">
3.   <!-- <Child :msg="cutTab" v-if="cutTab"></Child> -->
4.   <component :is="com"></component>
5. </keep-alive>

复制代码

注释被解析为子节点，导致keep-alive认为有多个子元素。正确做法是移除注释，仅保留一个动态组件。

四、动态组件引用时的性能优化

在Vue3中，直接用ref包裹组件会使其成为响应式对象，导致不必要的性能开销。Vue会尝试追踪组件对象的变化，而组件本身不需要响应式。

控制台警告："Vue received a Component which was made a reactive object."

推荐使用markRaw或shallowRef来避免组件对象被响应式化。

使用markRaw：

2. const com = ref(markRaw(Child2));
3. const comChange = () => {
4.   com.value = com.value === Child2 ? markRaw(Child) : markRaw(Child2);
5. };

复制代码

使用shallowRef：

2. const com = shallowRef(Child2);
3. const comChange = () => {
4.   com.value = com.value === Child2 ? Child : Child2;
5. };

复制代码

完整示例（Father组件）：

2. <template>
3.   <div>
4.     <el-button @click="comChange">change component</el-button>
5.     <keep-alive include="Child2">
6.       <component :is="com"></component>
7.     </keep-alive>
8.   </div>
9. </template>
10. <script setup lang="ts" name="Father">
11. import Child from "@/views/Child.vue";
12. import Child2 from "@/views/Child2.vue";
13. const com = ref(markRaw(Child2));
14. const comChange = () => {
15.   com.value = com.value === Child2 ? markRaw(Child) : markRaw(Child2);
16. };
17. </script>

复制代码

效果：Child2被缓存（切换回来状态保留），Child每次销毁重建。

五、路由中使用keep-alive

Vue Router 4提供了v-slot API实现路由级缓存。通过meta属性标记需要缓存的页面。

布局组件示例：

2. <template>
3.   <div>
4.     <router-view v-slot="{ Component }">
5.       <keep-alive>
6.         <component :is="Component" v-if="$route.meta.keepAlive" />
7.       </keep-alive>
8.       <component :is="Component" v-if="!$route.meta.keepAlive" />
9.     </router-view>
10.   </div>
11. </template>

复制代码

注意：v-if应加在<component>上而非keep-alive上，否则keep-alive会被直接销毁。

路由配置中设置meta：

2. {
3.   path: 'Child2',
4.   name: 'Child2',
5.   meta: { keepAlive: true },
6.   component: () => import('@/views/Child2.vue')
7. }

复制代码

六、keep-alive生命周期

被keep-alive缓存的组件会额外触发两个生命周期钩子：onActivated和onDeactivated。它们在mounted之后、unMounted之前执行，分别对应组件被激活和失活时。

2. onActivated(() => {
3.   console.log('Component is activated');
4. });
5. onDeactivated(() => {
6.   console.log('Component is deactivated');
7. });

复制代码

总结

合理使用keep-alive能显著提升Vue3应用的性能和用户体验。关键点：动态组件配合keep-alive时避免注释干扰；引用组件使用markRaw或shallowRef避免响应式开销；路由缓存通过meta配合v-slot实现；灵活运用include/exclude控制缓存范围。

热心网友6

楼主总结得很全面，特别是关于动态组件中组件对象被响应式化导致性能开销的提醒，这个坑很多人容易忽略。我补充一点实际开发中的经验：使用 `include` 或 `exclude` 时，组件必须显式设置 `name` 属性（在 `` 里可以用 `defineOptions` 定义），否则匹配不会生效，可能会导致缓存失败。另外在路由缓存场景下，如果路由较多，建议结合 `meta` 字段动态生成 `include` 数组，这样管理起来更灵活。感谢分享！