用watchEffect实现多表单联动校验，核心是让校验逻辑自动响应数据变化：监听相关字段并更新错误信息或状态，结合computed拆分触发与执行，避免初始执行和过度触发，统一管理错误状态。

用 watchEffect 实现多表单联动校验，核心在于让校验逻辑自动响应数据变化，而不是手动调用校验函数。它天然适合处理“一个字段变 → 多个字段校验状态更新”的场景，比如：选择省份后城市下拉框才启用、手机号格式变了要同步清空验证码、密码和确认密码实时比对等。

把校验规则封装成响应式副作用

不要把校验写在 submit 里或每个 input 的 change 事件中。而是把每条校验逻辑单独抽成一个 watchEffect，让它监听相关字段，并直接更新对应错误信息或禁用状态：

• 监听 form.province，当为空时，清空 form.city 并标记为“未选择省份，城市不可选”
• 监听 [form.phone, form.countryCode]，组合校验手机号格式，结果写入 errors.phone
• 监听 [form.password, form.confirmPassword]，只要任一变动就比对，不一致则设 errors.confirmPassword = '两次输入不一致'

用计算属性 + watchEffect 拆分“校验触发”和“校验执行”

避免所有校验挤在一个 watchEffect 里导致逻辑耦合。推荐模式：

• 用 computed 定义“哪些字段变更应触发某组校验”，例如：
  const passwordDepends = computed(() => [form.password, form.confirmPassword])
• 再用 watchEffect 监听这个计算属性：
  watchEffect(() => { validatePassword(passwordDepends.value) })
• 这样改动字段、增删依赖、复用校验函数都更清晰，也方便单元测试

控制校验时机：避免初始执行和过度触发

watchEffect 默认立即执行一次，表单初始化时可能报一堆红字。用 { flush: 'post' } 和内部守卫规避：

• 加 if (!isMounted.value) return（配合 onMounted 标记）防止首次渲染就校验
• 对高频输入字段（如搜索关键词），用 lodash.debounce 包一层校验函数，或用 setTimeout 节流
• 用 onInvalidate 清理上一次异步校验（比如防抖中的 pending 请求），避免旧结果覆盖新结果

错误状态集中管理 + 自动收集

不建议每个 watchEffect 直接改 errors.xxx。统一用一个响应式对象收集，并提供工具方法：

• 定义 const errors = reactive({})
• 封装 setError(field, msg) 和 clearError(field)，内部做空值判断和响应式更新
• 所有 watchEffect 都调用 setError，提交前只需检查 Object.values(errors).some(Boolean)
• 还可扩展 hasError(field) 供模板中 v-if="hasError('phone')" 使用