vue keep-alive通过缓存组件实例避免重复渲染、保留状态并加快视图切换，需配合include/exclude精准控制、max限制内存、name标识组件，并利用activated/deactivated协同数据刷新与资源清理。
用好 `` 控制路由与动态组件缓存
这是最直接有效的手段，尤其适合频繁切换但内容变化不大的场景：
- 包裹 `
` 实现页面级缓存，返回列表页时保留滚动位置和表单输入 - 配合 `include` 和 `exclude` 属性精准筛选，例如只缓存 `'Dashboard'` 和 `'UserList'`，排除实时性高的 `'OrderDetail'`
- 设置 `max="10"` 防止内存无限增长，避免因缓存过多导致页面卡顿或崩溃
- 被缓存组件需定义 `name` 选项（如 `export default { name: 'ProductList' }`），否则无法被识别和管理
结合 `activated` / `deactivated` 生命周期做状态协同
缓存不是“一劳永逸”，而是要让组件知道何时该刷新、何时该暂存：
- 在 `activated` 中触发数据拉取（如检查时间戳后决定是否重载列表）
- 在 `deactivated` 中清理定时器、取消未完成请求、保存临时草稿到 `localStorage`
- 对表单类组件，可把当前填写内容序列化后暂存，再激活时自动还原
针对特定组件启用内置缓存能力
不少 UI 库已封装缓存逻辑，直接启用即可获益：
- PrimeVue 的 `
` 设置 `cache` 属性，自动缓存排序、分页、过滤状态 - shadcn-vue 数据表格中使用 `v-memo="[filters, page]"`，仅当依赖项变化才重新渲染
- 自定义组件可通过 `serverCacheKey`（SSR 场景）或组合式 API（如 `useCache`）实现服务端/客户端双端缓存
避免缓存陷阱：哪些不该缓存？
盲目缓存反而损害体验，需主动规避以下情况：
- 带用户身份信息的页面（如个人中心），URL 相同但内容因登录态不同而不同
- 强实时数据页（如交易行情、监控大屏），缓存会导致信息滞后
- 含大量 `ref` 或 `computed` 且依赖外部响应式状态的组件，缓存后可能失去响应性
- 未定义 `name` 或 `serverCacheKey` 返回常量的组件，容易造成键冲突或无效缓存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
