Vue 3 的 KeepAlive 需按终端差异化配置：PC端全量缓存，平板仅缓存列表页和仪表盘，移动端默认关闭、仅高频页启用且限 max=3；用 deviceType + fullPath 作 key 实现同组件多端独立缓存；低配设备降级为 sessionStorage 状态快照；Tab 关闭时动态 exclude 清理缓存。
Vue 3 的 KeepAlive 在多端适配（PC 后台、平板、移动端 H5）中不能“一套策略打天下”。不同终端的用户行为、内存限制、交互模式差异很大，缓存策略必须分场景设计：PC 端可适度缓存多个复杂页面；移动端需更激进地控制数量和生命周期，避免内存压力；而平板则介于两者之间，需兼顾操作连续性与资源敏感性。
按终端类型差异化配置 meta 缓存标记
不要在路由中写死 meta: { keepAlive: true }。应结合 useBreakpoints 或 UA/屏幕宽度动态判断：
- PC（≥1200px）：对列表页、详情页、表单页统一启用缓存，
keepAlive: true - 平板（768–1199px）：仅缓存列表页和常驻功能页（如仪表盘），详情页用
keepAlive: (to) => to.name !== 'Detail'排除 - 移动端（＜768px）：默认关闭缓存，仅对极少数高频返回页（如搜索结果页）启用，且强制加
:max="3"
用 key 区分同组件不同终端状态
同一组件（如 ProductList.vue）在 PC 和移动端可能渲染不同 UI、加载不同字段。若共用缓存，滚动位置或筛选条件会互相干扰。解决方式是让 <component> 的 :key 携带终端标识：
<component :is="Component" :key="$route.fullPath + '_' + deviceType" />
其中 deviceType 是响应式计算值（'pc' / 'tablet' / 'mobile'），确保同路由在不同终端下生成独立缓存实例。
结合设备能力做缓存降级
移动端低端机型内存紧张，不能依赖 KeepAlive 硬扛。建议引入运行时检测：
立即学习“前端免费学习笔记（深入）”；
- 用
navigator.deviceMemory判断内存等级（如 <2GB 视为低配） - 低配设备下，自动将
<keep-alive>替换为轻量状态快照方案：在onDeactivated中序列化关键字段（如页码、搜索关键词）到sessionStorage，onActivated中恢复 - PC 端仍走完整组件缓存，不降级
Tab 标签页关闭时主动清理缓存
多端标签页系统中，“关闭 Tab”是明确的缓存释放信号。不能只靠 max 限流。推荐做法：
- 维护一个
tabCacheMap: Map<string, { name: string; fullPath: string }>，记录每个 tab 对应的缓存 key - 监听 tab 关闭事件，调用
keepAliveInstance?.unmount()（需 ref 拿到 KeepAlive 实例），或更稳妥地：用exclude动态更新数组，把对应组件名加入排除列表 - 移动端尤其要执行这步——用户频繁开关 tab，不清理会导致内存持续上涨
