Vue项目局部缓存核心是“在哪儿缓存、缓存多久、怎么失效”，推荐用keep-alive保留组件状态，配合activated钩子控制数据刷新，手动缓存接口响应并加过期逻辑，通过provide/inject共享缓存，协同HTTP缓存头，并封装为composable复用。
Vue 项目中做缓存策略，核心不是“要不要缓存”，而是“在哪儿缓存、缓存多久、怎么失效”。局部缓存（如组件级或页面级）是减少重复接口请求最轻量、最可控的方式，尤其适合用户频繁切换但数据变动不频繁的场景（比如商品详情页、用户个人资料页）。
用 keep-alive 缓存组件状态和 DOM
这是 Vue 最直接的局部缓存方案。它不会自动缓存接口数据，但能保留组件实例、内部 data、计算属性和已渲染的 DOM，避免反复创建销毁和重新请求。
- 配合 include/exclude 精确控制哪些组件需要被缓存（推荐用 name 字符串或正则）
- 利用 activated/deactivated 生命周期钩子，在组件激活时判断是否需要刷新数据（比如检查时间戳或版本号）
- 注意：若组件内请求写在
mounted中，需移至activated，否则每次路由进入都会发请求
在组件内手动管理接口响应缓存
对同一接口的相同参数，把响应结果存在组件 data 或 ref 中，下次请求前先查缓存。
- 简单场景可用对象字典：
cache[`${apiUrl}-${JSON.stringify(params)}`] = response - 建议加时间戳或过期逻辑，避免永久缓存（例如：缓存 5 分钟，超时后清空或标记为 stale）
- 配合 Promise 缓存可防重复请求（即同一时刻多个相同请求只发一次，其余等待返回）
用 provide/inject 实现跨组件缓存共享
当多个子组件依赖同一份数据（如订单列表页下的多个 tab），可在父组件统一请求并缓存，再通过 provide 注入给子组件使用。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 父组件维护一个响应式缓存对象（如
ref({ data: null, timestamp: 0, expires: 300000 })） - 子组件 inject 后，直接读取缓存；需要刷新时通知父组件触发更新
- 比全局状态（如 Pinia）更轻量，也比每个组件各自请求更节省资源
配合 HTTP 缓存头做服务端协同
前端局部缓存不能替代合理的服务端缓存策略。确保接口响应带上合适的 Cache-Control 和 ETag，让浏览器在无 JS 干预时也能复用资源。
- 静态资源（图片、JS/CSS）默认走强缓存
- API 接口可设
Cache-Control: public, max-age=60（1 分钟），配合客户端校验逻辑 - Vue 项目中用
fetch或axios发请求时，注意不要默认禁用缓存（如 axios 默认不读 HTTP 缓存，需手动配置cache: 'default'或改用 fetch）
局部缓存不是银弹，关键在于匹配业务节奏——数据变化越慢，缓存越大胆；用户操作越敏感（如支付页），缓存越谨慎。把缓存逻辑封装成可复用的 composable（如 useCachedApi），比到处手写 if-else 更可持续。
