keepalive 组件重新激活时需在 onactivated 中条件性更新数据：对比路由参数变化或添加时间戳兜底，避免无脑请求；禁用动态 key 破坏缓存；跨组件刷新可用 provide/inject 传递响应式信号。

在 Vue 3 中，KeepAlive 组件重新激活时不会自动刷新数据，因为缓存的是整个组件实例，mounted 只执行一次，后续进入靠 onActivated 钩子唤醒。所以关键是在 onActivated 中判断是否需要拉新数据，并执行请求。

用 onActivated 做条件性更新

这是最常用、最符合 KeepAlive 设计意图的方式。组件每次从缓存中“醒来”，onActivated 就会触发，你可以在这里加逻辑控制是否发请求。

• 不要无脑调用 API：否则每次切回来都刷，失去缓存意义
• 推荐对比路由参数变化，比如 route.query.id 或 route.params.slug 是否和上次不同
• 也可以加时间兜底，例如「上次加载超过 30 秒」就强制刷新
• 配合 ref 记录上一次的参数或时间戳，便于比对

配合路由 query 时间戳触发更新

如果页面本身不依赖 params，但又希望“看起来像刷新了”，可以在跳转时带上动态 query，比如 ?t=1727290861（当前时间戳）。组件内 watch 这个 query 变化即可响应。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 用 watch(() => route.query.t, () => fetchData()) 监听
• 跳转时不改路径只换 query，可用 router.replace({ query: { ...route.query, t: Date.now() } })
• 语义清晰、不影响路由匹配，也不破坏 KeepAlive 缓存

避免用 key 强刷导致缓存失效

有人习惯给组件加动态 key，比如 :key="route.fullPath"，这会让 Vue 认为是全新组件，直接绕过缓存——KeepAlive 形同虚设。

• 缓存价值在于复用实例、保留状态（如表单输入、滚动位置）
• key 变化 = 销毁重建 = 失去所有缓存收益
• 除非明确要丢弃状态，否则别用 key 控制刷新

跨组件统一刷新指令（进阶场景）

当一个页面里有多个 KeepAlive 子组件（比如列表 + 侧边栏 + 筛选器），且它们都需要响应同一个“刷新”动作（如点击顶部刷新按钮），可以用 provide/inject 传递响应式信号。

• 父组件 provide 一个 refreshSignal = ref(0)
• 各子组件 inject 并 watch(refreshSignal, () => fetchData())
• 点击按钮时只需 refreshSignal.value++，所有监听者自动响应
• 和路由解耦，适合非导航类更新需求

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！