KeepAlive 仅在内存中缓存组件实例，不解决离线持久化问题；离线状态保持需配合 localStorage/IndexedDB 等手动存取关键数据。
KeepAlive 本身不处理离线状态，它只在 Vue 组件切换时缓存实例于内存中。一旦浏览器刷新、关闭标签页或进程被回收，缓存就清空了——这和是否联网无关。所以“在离线应用中用 KeepAlive 保持页面状态”这个说法存在概念混淆：KeepAlive 不是持久化方案，它不写 localStorage，也不同步到 IndexedDB。
离线场景下真正起作用的是状态持久化，不是 KeepAlive
当用户断网后切回一个 tab，你希望看到的“状态还在”，其实依赖两件事：组件没被销毁（靠 KeepAlive） + 关键数据没丢（靠手动存取）。前者是运行时缓存，后者才是离线保障。
- KeepAlive 能确保组件实例保留在内存里，比如表单 ref 的值、表格当前页码、折叠状态等，只要页面没刷新就一直有
- 但页面一旦刷新（哪怕只是 F5），所有内存数据归零，此时必须从 localStorage / IndexedDB / Pinia 持久化层恢复
- 所以离线可用的核心动作是：在 deactivated 钩子中把必要状态存下来，在 activated 或 onMounted 中尝试恢复
配合 KeepAlive 的离线状态保存实操要点
以一个带搜索条件的订单列表页为例，你需要在组件内做这些事：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 监听 deactivated：触发时把 searchForm、currentPage、tableScrollTop 等存进 localStorage，键名建议带上路由路径或唯一 ID，避免冲突
- 在 activated 或 onMounted 中读取对应 key 的数据，并赋值给响应式变量（注意判断数据有效性，防止过期或格式错误）
- 如果用了 Pinia，可在 store 中统一管理离线状态字段，并在 store 的 $subscribe 中监听变化，自动落盘；同时开启 persist 插件（如 pinia-plugin-persistedstate）让部分 state 自动同步到 localStorage
- 对富文本、大段草稿类内容，建议加防抖（debounce）再存，避免高频写入拖慢响应
别指望 KeepAlive 自己解决离线问题
KeepAlive 的缓存完全依赖 JavaScript 运行时环境。它没有内置序列化、没有跨会话能力、不感知网络状态。如果你发现断网后切 tab 状态还在，那只是因为页面没刷新，内存还活着；一旦刷新，一切归零。真正的离线健壮性，来自你主动把状态“写出去”，而不是“留着不动”。
立即学习“前端免费学习笔记（深入）”；
