应合理使用 watch 监听表单变化并防抖存入 localStorage，初始化时跳过首次赋值，保存前校验有效性、序列化处理，并提供清空入口及路由离开前提示，兼顾兼容性与数据安全。
用 watch 监听表单数据变化并自动存入缓存（如 localStorage），是提升用户体验和防止数据丢失的常见做法。关键不是“一有变化就立刻写入”，而是合理控制频率、避免无效写入、处理好初始化与清理逻辑。
监听表单字段，变化时存入 localStorage
在 Vue 3 的 Composition API 中，可对响应式表单对象或单个字段使用 watch，触发后调用保存函数：
- 监听整个表单对象（浅监听）：适合字段不多、更新不频繁的场景，但需配合
deep: true才能捕获嵌套属性变化 - 监听具体字段（如
watch(() => form.name)）：更精准，避免无谓触发，推荐用于重点字段 - 保存前建议加防抖（如 500ms 延迟），防止用户快速输入时频繁写入缓存
避免覆盖初始值或误存空数据
页面加载时若直接从 localStorage 恢复表单，后续 watch 可能因赋值触发一次“假变更”。解决方法：
- 在恢复缓存数据后，用
nextTick或标志位暂不开启监听（例如设置isInitializedRef = true，watch 中跳过首次赋值） - 保存前校验值有效性：比如忽略
null、undefined或纯空白字符串，防止把“清空”误存为有效状态 - 可约定只在用户真实交互（如
@input、@change）后才启用持久化，而非初始化就监听
提供手动清除缓存的入口
自动保存虽方便，但也需赋予用户控制权：
- 添加“清空草稿”按钮，点击后调用
localStorage.removeItem('form-draft-key')并重置表单 - 表单提交成功后，主动删除对应缓存，避免下次进入时加载过期内容
- 可在路由离开前（
onBeforeRouteLeave）询问是否保留未提交内容，再决定是否清理
兼容性与边界注意点
localStorage 有大小限制（通常 5MB），且只能存字符串：
- 存之前务必用
JSON.stringify，取出来用JSON.parse，并包裹try...catch防止解析失败导致白屏 - 避免监听大型数组或含函数/循环引用的对象，否则序列化会报错或丢失数据
- 移动端 Safari 在无痕模式下可能直接禁用
localStorage，需降级为内存缓存（ref）并提示用户
