用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')"使用
