vue 3 中 keepalive 页面需用 onactivated 替代 onmounted 发起请求，首次加载和缓存激活均调用 loaddata；按场景区分刷新逻辑，参数不变可跳过请求，变化则清缓存或强制更新；配合 key 控制伪刷新，注意防重复请求与 loading 状态管理。
Vue 3 中 KeepAlive 缓存带异步请求的页面时，核心矛盾在于：组件被缓存后不会重新执行 onMounted，但用户切回来时往往需要最新数据。不能靠“不刷新”来省事，而要明确“什么时候该主动拉新”。
用 onActivated 替代 onMounted 发起请求
这是最直接有效的做法。只要组件被 KeepAlive 包裹，onMounted 只在首次加载时触发；而 onActivated 每次从缓存中激活都会执行。
- 把原本写在
onMounted里的 API 调用，抽成独立函数（如loadData） - 同时在
onMounted和onActivated中调用它 - 这样既保证首次进入正常加载，也确保切回来时自动刷新
区分场景：哪些请求该刷新，哪些不该
不是所有数据都需要每次激活都重拉。比如用户列表页的筛选条件、当前页码应保留，但列表数据可刷新；而详情页的 ID 不变，通常只需在参数变化时才刷新。
- 参数未变（如路由仍是 /order/1001）→ 可跳过请求，或加防抖+时间戳判断是否超时
- 参数变化（如从 /order/1001 切到 /order/1002）→ 必须清缓存或强制更新，避免串数据
- 表单草稿类数据 → 适合存在
localStorage或 Pinia 中，离开时存、激活时取，不依赖接口
配合 key 实现“伪刷新”控制
当需要临时绕过缓存（比如用户点了“刷新按钮”），可以动态改变组件的 key 值，让 Vue 认为这是个新组件，从而重建实例并触发完整生命周期。
- 给路由组件加
:key="$route.fullPath"，路径变则重建（适合参数驱动的详情页） - 手动维护一个
refreshKey，点击刷新按钮就refreshKey++，绑定到组件 key 上 - 注意：这种方式会丢失所有内部状态（滚动位置、输入框内容等），慎用于表单页
避免重复请求和 loading 状态错乱
频繁触发 onActivated 容易导致多次并发请求，或 loading 状态没及时关闭。
- 用
ref记录请求中的状态，重复激活时跳过已发起的请求 - 把 loading 控制逻辑和数据加载解耦，比如用
computed根据数据是否为空或过期来决定是否显示 loading - 对详情页等强依赖参数的场景，可在
onActivated中先比对$route.params.id是否变化，再决定是否调用 API
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
