watchEffect 适合 Vue 3 多步骤向导中自动监听当前步骤状态变化并触发校验：它自动追踪响应式数据、无需手动声明依赖，配合 reactive/ref 数据与动态校验逻辑可实现按步隔离校验，需避免读写同一响应式字段导致循环及副作用泄漏。
watchEffect 自动监听步骤状态变化
在 Vue 3 多步骤向导中，watchEffect 适合用来响应式地触发当前步骤的校验逻辑——它会自动追踪内部读取的响应式数据，并在它们变化时重新运行。不需要手动指定依赖数组，比 watch 更简洁，特别适合“只要当前步变了，就立刻校验”的场景。
把每步表单字段和校验状态绑定到响应式对象
确保每一步的数据（如 step1Data、step2Data）和对应的校验状态（如 step1Valid）都是 ref 或 reactive 的。例如：
✓ 正确示例：
const step1Data = reactive({ name: '', email: '' })const step1Valid = ref(false)-
const currentStep = ref(1)（控制当前激活步骤）
✗ 避免：直接用普通对象或未声明为响应式的变量，watchEffect 将无法捕获变化。
立即学习“前端免费学习笔记（深入）”；
按步骤动态绑定校验逻辑
在 setup 中，根据 currentStep.value 切换校验目标。watchEffect 内部只读取当前步相关字段，就能精准触发：
- 当
currentStep.value === 1，只访问step1Data.name和step1Data.email，watchEffect 就只追踪这两个 - 切换到 step2 后，旧的依赖自动清理，新 watchEffect 实例开始追踪
step2Data.phone等 - 可配合一个校验函数（如
validateStep1()），在 effect 内调用并更新step1Valid.value
这样每步的校验是隔离的、按需执行的，不会因其他步骤数据变更而误触发。
避免无限循环与副作用泄漏
watchEffect 默认在组件卸载时自动停止，但要注意两点：
- 不要在 effect 内直接修改它正在读取的响应式数据（比如一边读
step1Data.name，一边又给它赋值），否则可能触发重复执行 - 如果校验结果要影响 UI（如显示错误提示），建议把校验逻辑封装成纯函数，返回布尔值或错误信息对象，再由 effect 赋值给
stepXValid或errors - 必要时可用
onInvalidate清理异步操作（如未完成的防抖请求）
