watchEffect 不负责自动重置表单，而是通过读取响应式属性（如 form.name）建立依赖，当表单重置导致属性变化时自动执行副作用，用于同步清理校验、提示等状态，需避免在其中修改被监听字段以防死循环。
watchEffect 本身不负责表单重置，也不自动还原状态；它只是响应式地追踪依赖并执行副作用。但你可以用它来“监听表单是否被重置”，并在重置后触发配套动作（比如清空校验、关闭提示、重置计算字段等）。关键不是让它“自动还原”，而是让它在重置发生时做出反应。
watchEffect 如何感知表单重置
watchEffect 会自动收集它内部访问的所有响应式数据。只要你在它的回调里读取了表单对象的某个属性（哪怕只是 form.name 或 form.items.length），当这个表单被重置（即属性值变更）时，watchEffect 就会重新运行。
例如：
✅ 正确写法（能触发）：
const form = reactive({ name: '', age: 0, items: [] })
watchEffect(() => {
console.log('表单当前 name 是：', form.name) // 访问了 form.name → 被追踪
})
当你调用 Object.assign(form, initialForm) 后，form.name 改变，watchEffect 自动重跑。
❌ 错误写法（不会触发）：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
watchEffect(() => {
// 没有读取任何响应式属性 → 不建立依赖 → 永远不执行
})
配合重置实现状态联动
常见需求不是“还原表单”，而是“重置后同步清理周边状态”。watchEffect 是轻量、声明式的协调工具：
- 重置表单时，自动清除校验错误：errorMap.value = {}
- 重置后隐藏成功提示：showSuccess.value = false
- 若表单含计算字段（如 totalPrice），重置后需重新计算：updateTotal()
- 动态表单项（如 form.items）重置后，同步重置子表单 ref 数组：formRefs.value = []
注意：避免无限循环
如果 watchEffect 内部又修改了它正在监听的表单字段，就会导致死循环。例如：
watchEffect(() => {
if (!form.name) {
form.name = '默认用户' // ❌ 修改了 form.name → 触发下一次执行 → 循环
}
})
安全做法是加守卫或改用 watch：
- 用 watch(form, ...) 替代，明确监听变更而非依赖读取
- 在 watchEffect 中只读不写，或仅写非监听目标（如更新 showSuccess 这类无关字段）
- 必要时用 onInvalidate 清理上一轮异步操作（比如防抖请求）
实用组合建议
真正健壮的重置流程通常是三步走：
- 重置主数据：Object.assign(form, initialForm) 或 resetFields()
- watchEffect 响应：监听 form 变更，统一清理 UI 状态和副作用
- 按需触发计算：比如调用 validateForm() 或 recalcDerived() 等函数
这样既保持逻辑解耦，又确保视图与状态始终一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
