KeepAlive 仅缓存组件实例，不处理请求逻辑；需将数据获取与组件状态解耦，用 onActivated 替代 onMounted 发起请求，并结合 Pinia 按 tab 隔离数据、动态控制缓存范围及同步 UI 与请求状态。
KeepAlive 本身不负责请求逻辑，它只缓存组件实例。避免重复请求的关键，在于把数据获取和组件状态解耦，并让请求结果随组件实例一起被保留。
把请求逻辑移到 setup 或 onActivated 中
不要在 onMounted 里发请求——因为 KeepAlive 下组件只挂载一次，后续切换回来不会触发 onMounted。改用 onActivated 钩子，它每次组件被激活（切回来）时都会执行：
- 如果需要“每次切回来都刷新数据”，就在 onActivated 里调用 fetch 方法
- 如果希望“只首次加载，之后复用已有数据”，就加个标记，比如用 ref 记录是否已加载过
- 也可以结合路由参数变化做判断：比如当前 tab 是 /user/1001，切到 /user/1002 再切回，参数变了，就重新请求
用 Pinia 管理页面级数据，按 tab 维度隔离
多个 tab 共用同一组件（如 UserEdit.vue）时，不能把数据存在组件内部或全局 store 里，否则会串。正确做法是：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 在 Pinia store 中为每个 tab 分配独立数据槽，key 可以是 route.fullPath 或自定义 tabId
- 组件 setup 时根据当前路由参数读取对应 slot 的数据，没数据再请求并存入
- 关闭 tab 时，主动从 store 清掉对应 key 的数据，释放内存
配合 keep-alive 的 include/exclude 精准控制缓存范围
不是所有页面都需要缓存。比如登录页、404 页、支付确认页，既不该缓存也不该重复请求：
立即学习“前端免费学习笔记（深入）”；
- 在 router-view 外层用
，动态维护 cachedNames 数组 - 打开新 tab 时 push 组件名（或带参数的唯一标识），关闭时 splice 掉
- 对不需要缓存的路由，直接设 meta.keepAlive = false，路由守卫中跳过加入逻辑
注意组件内部状态与请求的协同
表单、搜索条件、分页页码这些状态，要和请求参数对齐。例如：
- 列表页的 page、pageSize、searchKey 应作为 reactive 对象管理，并在请求时自动带入
- 滚动位置、编辑器内容等 UI 状态由 KeepAlive 自动保留，不用额外处理
- 如果请求依赖某个 ref 值，确保这个 ref 不在 unmounted 后被重置（KeepAlive 下不会触发 unmounted）
