onBeforeUnmount 中应同步保存表单草稿至 localStorage，使用响应式数据、唯一 key 和防抖机制；刷新/关闭需用 beforeunload 补充，并在卸载时移除监听器。
在 onBeforeUnmount 钩子中保存未提交的表单草稿，核心是「及时捕获用户输入、序列化数据、持久化到本地（如 localStorage）」，并确保销毁前操作不被中断或丢弃。
确保表单数据可响应式捕获
使用 ref 或 reactive 管理表单字段，避免直接操作 DOM 获取值。Vue 会自动追踪响应式数据变化，便于在钩子中读取最新状态：
- 表单项绑定
v-model到响应式变量（如formState.title） - 避免用
document.getElementById等手动取值，防止取到旧值或空值 - 若含富文本、文件等复杂字段，需提前转为可序列化的格式（如 Base64 字符串、JSON 对象）
在 onBeforeUnmount 中安全保存草稿
该钩子在组件卸载前同步执行，适合做轻量级持久化。注意：它不支持异步等待（如 await api.saveDraft()），否则可能失效：
- 直接调用
localStorage.setItem('draft-key', JSON.stringify(formState)) - 建议加防抖或标记「已修改」，避免频繁写入（例如监听
watch表单变化，仅在变更后更新草稿标记，onBeforeUnmount中检查标记再保存） - 为避免 key 冲突，可用路由路径 + 用户 ID 组合生成唯一草稿 key，如
`draft_${userId}_${route.path}`
恢复草稿时注意时机和覆盖逻辑
保存只是第一步，恢复同样关键。应在组件 setup 或 onMounted 中读取并合并：
- 优先判断是否存在有效草稿（非空、JSON 解析成功、时间不过期）
- 不要无条件覆盖初始值——可提示用户「检测到未提交的草稿，是否恢复？」，或提供「恢复 / 清除」按钮
- 恢复后记得清除 localStorage 中对应 key，避免下次误加载过期草稿
补充：处理浏览器刷新/关闭场景
onBeforeUnmount 不会触发于页面刷新或关闭，此时需用原生 beforeunload 事件兜底：
- 在
onMounted中添加window.addEventListener('beforeunload', handler) -
handler中同样执行草稿保存（同步操作） - 记得在
onBeforeUnmount中移除该监听器，防止内存泄漏
