使用 可保留表单输入内容、滚动位置等状态，但需确保 v-model 绑定响应式数据（ref/reactive），避免绑定 props 或非响应式对象；禁用 activated 钩子中的重置逻辑；路由复用时通过 :key="$route.fullpath" 区分缓存；重要数据应结合 localstorage 自动存取。
直接用 <keep-alive></keep-alive> 包裹表单组件，就能保留输入内容、滚动位置、校验状态和本地计算结果——前提是表单控件与响应式数据正确绑定，且生命周期中不主动重置。
确保 v-model 绑定的是响应式 data 或 ref
常见丢失原因是 v-model 绑定了只读 prop 或非响应式对象。Vue 的 <keep-alive></keep-alive> 会缓存整个组件实例，但若字段没挂载在响应式上下文中，值就无法被保存。
- ✅ 正确写法：在
setup()中用ref或reactive声明表单字段，v-model直接绑定它们 - ❌ 错误写法：把
v-model指向props.xxx，或绑定到普通对象属性（未通过reactive包裹） - 第三方表单库（如 Element Plus 的
el-form）需确认其内部状态是否随 keep-alive 同步；建议优先使用原生v-model + ref控制关键字段
禁用 activated 钩子中的重置逻辑
组件被缓存后，每次从其他页面返回都会触发 onActivated。如果这里调用了 form.resetFields() 或手动清空字段，缓存就白做了。
- 检查
onActivated或activated生命周期内是否有重置操作，全部删掉或改为条件执行（例如仅首次加载时初始化） - 若需恢复焦点或滚动位置，可在
onActivated中做轻量操作（如inputRef.value?.focus()），但不要动数据本身
路由复用时避免状态错乱
当多个相似表单页共用同一个组件（比如「新增」和「编辑」都用 UserForm.vue），仅靠 keep-alive 不足以区分状态——切换路由参数时组件可能被复用，但数据没更新。
- 监听
$route变化，在watch中按需合并新参数（如id），而不是清空整个表单 - 为不同场景设置独立的缓存 key，例如在
<router-view></router-view>中加:key="$route.fullPath"，让路径变化时强制刷新缓存实例
关键表单建议加 localStorage 兜底
keep-alive 缓存在页面刷新、强制 unmount（如 max 限制超限）或意外关闭时会失效。对长文本、多步骤等重要数据，应自动存取本地存储。
- 在输入事件（
@input或watch字段）中序列化当前值，存入localStorage，key 可设为form_draft_${route.path} - 组件挂载或
onActivated时尝试读取并合并到响应式数据（注意判空和类型兼容） - 表单提交成功后，立即清除对应 localStorage 数据，防止残留脏数据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
