使用 KeepAlive 缓存页面时，表单数据需通过受控组件+状态托管实现保留：React 中用 useState 或 React Hook Form 管理值，避免 useEffect 重置；Vue 中确保 v-model 绑定响应式 data，禁用 activated 中的 reset 操作；关键表单建议结合 localStorage 自动存取兜底。
使用 KeepAlive（如 react-activation 或 Vue 的 <keep-alive></keep-alive>）缓存页面时，表单数据默认不会自动保留，因为组件卸载时状态可能被清空，或 DOM 被复用但未同步内部值。关键在于：**让表单控件的值与组件状态/外部数据源保持双向绑定，并在缓存生命周期中主动维护状态**。
React 中使用 react-activation 保持表单数据
确保表单受控、状态托管在组件内（或通过 Context / Zustand 等持久化），并在 activated / deactivated 钩子中不重置状态：
- 用
useState或useForm（如 React Hook Form）管理字段值，避免使用非受控输入 - 不要在
useEffect中每次渲染都重置表单（例如清空初始值） - 若使用
react-activation，可监听onActivated做轻量恢复（如聚焦上次输入框），但通常无需额外操作——只要状态没被销毁，值自然保留 - 注意：若组件被强制 unmount（如
maxAge过期或手动drop），状态会丢失，此时需配合 localStorage 手动备份
Vue 中 下的表单保持技巧
Vue 的 <keep-alive></keep-alive> 默认缓存整个组件实例，包括 data 和 v-model 绑定，但常见丢失原因有：
-
v-model绑定的是 prop（只读），而非响应式 data 字段 → 改为绑定到data或ref响应式变量 - 在
activated钩子中重置了表单（比如调用了this.$refs.form.resetFields()）→ 删除或条件执行该逻辑 - 使用了
el-form等第三方表单组件，其内部状态未随 keep-alive 同步 → 检查文档是否支持缓存，或改用原生v-model+ref - 路由参数变化触发组件复用但未更新表单 → 在
watch: $route中按需更新，而非清空
通用增强方案：本地持久化兜底
对关键表单（如长文本、多步骤填写），建议叠加 localStorage 自动保存，防缓存失效或意外刷新：
- 监听输入事件（如
onChange/@input），将字段值序列化存入 localStorage，key 可含路由路径 + 表单标识 - 组件挂载或 activated 时，尝试从 localStorage 读取并合并到当前状态（注意判空和版本兼容）
- 提交成功后主动清除对应 localStorage 数据，避免脏数据残留
- 示例 key：
form_draft_/user/profile
调试与验证要点
快速确认是否真正缓存生效：
- 打开浏览器开发者工具，切换页面后观察 React DevTools 中组件是否仍显示“Mounted”，或 Vue DevTools 中组件实例是否复用（非重新创建）
- 在组件
render或setup中打印 state，确认切换回来时值未重置 - 检查控制台是否有
Warning: Input is changing an uncontrolled input to be controlled—— 这说明 v-model 绑定异常，会导致值丢失 - 禁用 KeepAlive 后对比行为，缩小问题范围
