vue3使用keep-alive组件,包含动态组件使用详解

动态组件的使用

如果直接用 ref 或 reactive 来保存组件引用，Vue 会发出警告：

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be a voided by marking the component with 'markRaw' or using 'shallowRef' instead of 'ref'.

原因在于组件本身不应该被包装成响应式对象——只有组件的 props 和内部状态才需要响应。正确的做法是使用 markRaw 或 shallowRef：

• 使用 markRaw

const com = ref(markRaw(Child2));const comChange = () => {  if(com.value === Child2){    com.value = markRaw(Child);  }else{    com.value = markRaw(Child2);  }}

• 使用 shallowRef

const com = shallowRef(Child2);const comChange = () => {  if(com.value === Child2){    com.value = Child;  }else{    com.value = Child2;  }}

完整示例

运行后可以看到，只有 Child2 组件有缓存行为（生命周期中会触发 activated/deactivated），Child 每次切换都会经历销毁和重新创建。

路由不使用keep-alive

路由场景下的缓存稍微复杂一些。先看没有缓存的写法：

• 组件

• 路由index.ts

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'import Home from '@/views/Home.vue'const routes = [  {    path: '/Father',    name: 'Father',    component: () => import('@/views/Father.vue'),    children: [      {        path: 'Child',        name: 'Child',        component: () => import('@/views/Child.vue'),      },      {        path: 'Child2',        name: 'Child2',        component: () => import('@/views/Child2.vue'),      }    ],  }, ]const router = createRouter({  history: createWebHashHistory(),  routes})export default router

和组件级一样，每次路由切换，页面组件都会被销毁重建，表单状态自然也就丢失了。

路由中使用

Vue Router 4（对应 Vue 3）引入了 的 v-slot API，可以方便地实现路由级别的缓存。这里有一个关键点：v-if 不能加在 keep-alive 上，否则直接销毁整个缓存容器；正确的做法是将 v-if 放在内部 component 上，实现按需缓存。

在路由配置中，通过 meta 属性标记哪些页面需要缓存：

...const routes = [  {    path: '/Father',    name: 'Father',    component: () => import('@/views/Father.vue'),    children: [      {        path: 'Child',        name: 'Child',        component: () => import('@/views/Child.vue'),      },      {        path: 'Child2',        name: 'Child2',        meta: {          keepAlive: true,  // 需要被keep-alive        },        component: () => import('@/views/Child2.vue'),      }    ],  }, ]...

这样，只有 keepAlive: true 的路由页面会被缓存，其他页面正常销毁。页面进入时触发的生命周期顺序为：created → mounted → activated。

keep-alive生命周期

被 keep-alive 包裹的组件会额外多出两个生命周期钩子，分别在 mounted 之后和 unMounted 之前触发：

onActivated(() => {  console.log('Component is activated')})onDeactivated(() => {  console.log('Component is deactivated')})

利用这两个钩子，可以在组件被缓存或重新激活时做一些订阅/取消订阅、数据刷新等操作，非常实用。

总结

以上就是 Vue 3 中使用 keep-alive 的完整实战指南，涵盖了组件内和路由层面的缓存方案，同时也指出了几个容易踩坑的地方——比如 keep-alive 内不能有注释、动态组件引用要用 markRaw 或 shallowRef、路由缓存的 v-if 要加在内部组件上等等。掌握这些细节后，缓存问题基本可以一次搞定，希望能在实际项目中帮上忙。