Vue 3 的 <KeepAlive> 可通过操作内部 _cache 或 cache Map 精准清除指定组件缓存并触发卸载钩子；也可动态更新 include/exclude 实现逻辑剔除；推荐封装 CacheManager 统一管理，或结合路由 meta 场景化清理。
Vue 3 的 <KeepAlive> 没有暴露官方的清除缓存 API，但可以通过操作其内部缓存机制，精准移除指定组件的缓存项，并触发 beforeUnmount 和 unmounted 钩子（前提是该组件当前未激活）。关键不是“清空全部”，而是按需“踢出单个”。
用 ref 直接操作 _cache 或 cache（适合调试或强控制）
给 <KeepAlive> 添加 ref，访问其私有缓存 Map：
- 在模板中：
<KeepAlive ref="keepAliveRef"><component :is="comp" :key="compKey" /></KeepAlive> - 在 setup 中：
const keepAliveRef = ref()，然后调用keepAliveRef.value._cache.delete(key)（Vue 3.4+ 可能是.cache.delete(key)） -
注意：key 必须与组件实际缓存时使用的 key 完全一致——默认是组件的
name，若写了:key属性，则以该值为准（例如:key="$route.fullPath"或:key="route.meta.cacheKey"）
动态控制 include/exclude 实现逻辑“剔除”
利用 include 或 exclude 的响应式特性，间接让缓存失效：
- 声明一个响应式数组：
const includeList = ref(['UserList', 'OrderDetail']) - 模板中绑定：
<KeepAlive :include="includeList">...</KeepAlive> - 要清除某组件缓存时，直接从数组中移除其 name：
includeList.value = includeList.value.filter(n => n !== 'UserList') - 下一次渲染时，该组件将不再被缓存；若它当前处于缓存中，也会被自动清理并触发卸载钩子
封装 CacheManager 提供 drop 接口（推荐用于生产）
创建一个可复用的缓存管理组件，解耦控制逻辑：
立即学习“前端免费学习笔记（深入）”；
- 用
provide/inject向子孙组件注入drop(key)方法 - 子组件可通过
inject('cacheCtrl').dropCurrent()主动退出缓存 - 内部在删除缓存前，可手动调用组件的清理逻辑（如清除定时器、取消请求、重置状态）
- 既保证了组件卸载前的自定义行为，又避免了直接操作私有属性的风险
配合路由 meta 实现场景化清理（如退出登录）
当用户登出时，需要清掉所有业务页面缓存：
- 在路由 meta 中标记需缓存的页面，例如
meta: { keepAlive: true, cacheKey: 'user-home' } - 全局维护一个
excludedComponents = ref(new Set()) - 登出时：
excludedComponents.value.add('UserHome'); excludedComponents.value.add('OrderList'); -
<KeepAlive :exclude="Array.from(excludedComponents.value)">—— 匹配上的组件将跳过缓存 - 后续重新登录后，可清空该 Set，恢复缓存能力
