keepalive 的动态缓存策略核心是“何时缓、缓谁、缓多久”，需基于路由上下文、参数变化和用户行为实时判断，而非静态配置；通过路由元信息+导航守卫打标、computed include 动态控制缓存白名单、activated/deactivated 管理状态、max+lru 限制内存，实现精准高效缓存。
KeepAlive 的动态缓存策略，核心不是“开或关”，而是“何时缓、缓谁、缓多久”。 它需要脱离静态的 meta.keepAlive: true，转而基于路由跳转上下文、参数变化、用户行为等实时条件做判断。直接写死配置，在真实业务中（比如列表页带筛选再返回、详情页修改后需刷新）往往失效。
用路由元信息 + 导航守卫做初步分流
在路由定义中保留基础标识，但不直接决定缓存与否，而是为后续逻辑提供依据：
- 给需要参与动态决策的页面加语义化 meta，例如：
meta: { cacheKey: 'userList', dynamicCache: true } - 在全局前置守卫（
router.beforeEach）中读取to和from，结合查询参数（to.query）、来源路径（from.name）初步打标，比如：
– 若从详情页返回列表页，标记shouldCache = false；
– 若参数未变且来源是同级菜单，标记shouldCache = true - 将这个标记挂载到
to.meta上，供<keepalive></keepalive>的include或自定义匹配逻辑使用
用 computed include/exclude 实现运行时白名单
<keepalive></keepalive> 支持响应式绑定 :include，这是实现动态缓存的关键接口：
- 在布局组件（如 AppLayout.vue）中，定义一个计算属性：
const cachedNames = computed(() => {<br> return route.meta.dynamicCache && route.meta.shouldCache<br> ? [route.meta.cacheKey]<br> : [];<br>}); - 模板中绑定：
<keepalive :include="cachedNames"><br><routerview></routerview><br></keepalive>
- 这样每次路由切换，
cachedNames都会重新计算，只让符合条件的组件进入缓存池，其他一律销毁重建
用 activated/deactivated 管理组件内部状态
缓存生效后，组件不会销毁，但会进入失活/激活状态，这时要接管数据与视图一致性：
- 在目标组件中使用
activated钩子：若页面依赖实时数据（如订单列表），可在此触发一次轻量级拉取（仅比对时间戳或版本号，避免全量刷新） - 用
deactivated保存临时状态：比如表单草稿、滚动位置、筛选条件对象，存入sessionStorage或 pinia store 中对应 key 下 - 注意：不要在
activated里无条件调用this.fetchData()，否则每次切换回来都请求，失去缓存意义；应结合上一步守卫传递的上下文做判断
用 max + LRU 控制内存不爆炸
动态缓存容易因场景增多导致缓存实例堆积，必须设防：
- 给
<keepalive></keepalive>加上:max="5"，硬性限制最多缓存 5 个组件实例 - Vue 内部使用 LRU（最近最少使用）策略自动淘汰：当新组件进入且超限时，最早被
deactivated的那个会被清除 - 配合前面的
cacheKey设计，可确保高频访问的几个页面（如首页、用户页、报表页）始终驻留，冷门页面自然释放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
