Vue 组件缓存如何结合 keep-alive 解决返回上一页时表单数据丢失

Vue中返回上一页表单数据丢失，本质是keep-alive缓存了组件实例但未维护响应式状态：v-model需绑定ref/reactive数据而非props或computed；避免onActivated中无条件重置；多页复用时应加动态key或路由标识；关键表单建议localStorage兜底。

Vue 中返回上一页时表单数据丢失，本质不是“页面没缓存”，而是缓存了但状态没管住。keep-alive 只负责保留组件实例，不自动同步表单值与状态——尤其当 v-model 绑定的是非响应式来源、或在 activated 里重置了数据时，就会丢。

确保 v-model 绑定的是响应式 data 或 ref

常见错误是把表单字段直接绑定到 prop 或 computed（只读），导致输入无法写入响应式源。正确做法是：在 setup 中用 ref 或 reactive 声明表单数据，并让 v-model 指向它。

1. Vue 3 Composition API 示例：

   const formData = ref({ title: '', content: '' });，模板中 <input v-model="formData.title">

2. 避免 v-model="props.formData.title" —— props 不可写，输入会静默失败
3. 若使用 Form 组件（如 Element Plus 的 el-form），确认其 model 属性绑定的是响应式对象，而非解构后的普通变量

禁用 activated 钩子里的重置逻辑

很多开发者会在 onActivated 里调用表单 reset 方法，以为能“刷新视图”，结果反而清空了用户刚填的内容。

1. 检查代码中是否写了类似 formRef.value?.resetFields() 或手动赋空值
2. 如果确实需要初始化（比如首次进入），应加判断：if (!hasLoaded.value) { loadData(); hasLoaded.value = true; }
3. 不要在 activated 里无条件清空或覆盖已有数据

处理多页复用同一组件时的缓存冲突

例如 /user/1/edit 和 /user/2/edit 都用 UserEdit.vue，若组件 name 相同且未区分缓存 key，后一个会覆盖前一个的实例，导致返回时看到的是错误用户的表单。

1. 给 keep-alive 加 include + 动态 key：<keep-alive :include="['UserEdit']"><router-view :key="$route.fullPath" /></keep-alive>
2. 或在路由 meta 中标记唯一标识：meta: { keepAliveKey: `user-edit-${id}` }，再配合自定义缓存策略
3. 更稳妥的做法：在 onActivated 里根据 $route.params.id 主动拉取对应数据并 merge 到当前 state，而非依赖缓存自动还原

加 localStorage 兜底防意外丢失

keep-alive 缓存可能因 max 超限、手动 drop、或浏览器内存回收而失效。对关键表单（如长文本、多步骤），建议本地持久化。

1. 监听输入：@input="saveToStorage"，将 formData 存入 localStorage，key 可为 form_draft_${$route.path}
2. 在 onMounted 或 onActivated 里尝试读取：const saved = JSON.parse(localStorage.getItem(key) || 'null');，仅合并非空字段
3. 提交成功后立即清除：localStorage.removeItem(key)，避免残留脏数据