核心是用 watch 监听表单快照差异，需在页面加载后立即用 structuredClone 或 JSON.stringify 获取初始快照，配合 deep: true 监听整体变化，用 lodash/isEqual 或类型标准化比对，提交后同步更新 initialForm 并重置 isDirty。
核心是用 watch 监听表单快照差异，而不是逐个字段判断。关键不在“监听动作”，而在“初始值怎么拿、变化怎么算、什么时候重置”。
监听整个表单对象（推荐）
适合表单数据集中管理（如一个 reactive 对象）。页面加载后立刻保存初始快照，再深度监听整体变化：
- 用
structuredClone(form)或JSON.stringify(form)获取初始值，避免引用赋值导致误判 - watch 配合
{ deep: true }，每次变化都比对当前 form 和 initialForm 是否相等 - 比对建议用
lodash/isEqual；若不想引入依赖，可对 Date、Array 等类型先标准化（如转 ISO 字符串）再比较 - 提交成功后，同步更新 initialForm 快照，并重置 isDirty 标志
监听多个独立 ref 字段（适合分散定义）
当 username、email 等字段各自为 ref，可用数组语法批量监听：
- 写法：
watch([usernameRef, emailRef, ageRef], () => { isDirty.value = true; }, { deep: true }) - 注意首次赋值会触发 watch，建议在
onMounted后启用，或加简单防抖 - 忽略只读字段、计算属性、UI 状态（如 loading、showPassword），避免干扰判断
结合路由守卫自动拦截离开
用户点击跳转或浏览器后退时，需主动提示：
- 在组件内使用
onBeforeRouteLeave，检查isDirty.value - 弹窗建议用自定义 UI，而非
window.confirm（现代浏览器限制其文字且移动端不支持） - 阻止跳转后，用户选择“保存”则调用提交逻辑，成功后再
next()；选“放弃”则手动重置 form 和 initialForm
补充体验细节
真实场景中容易忽略但影响体验的点：
- 表单回填后立即保存快照，别等 DOM 渲染完成或异步数据返回后再取，否则初始值不准
- 日期选择器、富文本编辑器等控件可能生成新引用（如新 Date 实例），需在监听前做归一化处理
- 提供“还原初始值”按钮，一键同步 form 到 initialForm，并设 isDirty = false
- SPA 页面切换频繁时，确保 watch 被正确清理，避免重复监听或内存泄漏
