Vue3使用keep-alive时如何在组件deactivated时强制卸载缓存

推荐方案：基于keep-alive的include属性+依赖注入实现 #

这是Vue官方推荐的标准实现，无侵入性、兼容性强，不会依赖框架私有属性。

步骤1：配置路由标记与组件名称 #

给需要每次重载的页面组件显式声明name属性，同时在路由配置中增加自定义标记区分是否需要持久缓存：

// 路由配置示例
const routes = [
  {
    path: '/dynamic-page',
    name: 'DynamicPage', // 和组件name保持一致
    component: () => import('@/views/DynamicPage.vue'),
    meta: { disableKeepAlive: true } // 标记该页面不需要持久缓存
  },
  // 其他普通路由正常配置即可
]

步骤2：修改根组件缓存逻辑 #

根组件维护缓存白名单，通过include属性控制keep-alive的缓存范围，同时提供清理缓存的方法给子组件调用：

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="cacheWhiteList" max="5">
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>
  </router-view>
</template>
<script setup>
import { ref, provide } from 'vue'
import { useRouter } from 'vue-router'

const cacheWhiteList = ref([])
const router = useRouter()

// 路由切换时更新缓存白名单
router.afterEach((to) => {
  // 不需要持久缓存的页面不加入白名单
  if (!to.meta?.disableKeepAlive && !cacheWhiteList.value.includes(to.name)) {
    cacheWhiteList.value.push(to.name)
  }
})

// 提供清理缓存的方法给子组件调用
const removeCache = (componentName) => {
  const idx = cacheWhiteList.value.indexOf(componentName)
  if (idx !== -1) {
    cacheWhiteList.value.splice(idx, 1)
  }
}
provide('removeKeepAliveCache', removeCache)
</script>

步骤3：目标页面组件调用清理方法 #

在需要每次重载的页面组件的deactivated钩子中调用清理方法，将自身从缓存白名单中移除：

// DynamicPage.vue 组件代码
import { ref, inject, onDeactivated } from 'vue'

export default {
  name: 'DynamicPage', // 和路由name保持一致
  setup() {
    const state = ref({})
    const removeCache = inject('removeKeepAliveCache')
    
    // 组件失活时移除自身缓存
    onDeactivated(() => {
      removeCache('DynamicPage')
    })

    return { state }
  }
}

注意事项 #

• 所有参与缓存的页面必须显式声明name属性，且与路由配置的name字段完全一致，include属性基于组件名匹配缓存
• 不建议直接操作keep-alive实例的私有cache属性实现清理，该属性属于框架内部实现，版本迭代时可能发生变更，兼容性没有保障
• 如果需要同路由不同参数区分缓存，保留<component>上的:key="route.fullPath"配置即可

内容的提问来源于stack exchange，提问作者Stan Mayan