Vue 3 中 watch 条件判断应采用“按需触发”而非“阻塞等待”，最常用方式是在回调中用 if 判断；若条件变量也需响应，可监听多个源或结合 watchEffect 与状态标记实现等待逻辑。
在 Vue 3 的 watch 回调中做条件判断，核心不是“阻塞等待”，而是“按需触发”——即只在满足条件时才执行副作用逻辑（如 startDetection()），不满足就跳过。这符合响应式系统的非阻塞、事件驱动本质。
直接在回调里加 if 判断
这是最常用、最清晰的方式。监听目标变量（比如 motionForm.value.enabled），进入回调后先检查前置条件（如 a === 1），满足才执行主逻辑：
- 确保
a是响应式数据（例如const a = ref(0)或来自reactive） - 在 watch 回调中写明判断逻辑，避免副作用误触发
- 示例：
watch(() => motionForm.value.enabled, (newVal) => {
if (newVal === 'on' && a.value === 1) {
startDetection();
} else if (newVal === 'off') {
initArea.value = true;
}
}, { immediate: true });
监听多个依赖，让条件自动纳入追踪
如果条件变量 a 本身也会变化，且你希望“只要 a 变成 1 就立刻响应”，可以把 a 和原目标一起作为侦听源：
- 用数组形式传入多个响应式源，Vue 会同时追踪它们
- 回调接收两个参数：新值数组和旧值数组，顺序与源数组一致
- 这样无需额外 watch
a，逻辑更集中
if (enabled === 'on' && aValue === 1) {
startDetection();
}
}, { immediate: true });
需要“等待 a 变为 1”时，用 watchEffect + 状态标记
如果业务上确实要求：一旦 enabled 变为 'on'，就必须等到 a 变成 1 才执行（哪怕中间 a 还没变），这时可配合一个标记状态控制流程：
- 定义
const shouldStart = ref(false) - 监听
enabled，设为true表示“已请求启动” - 再用
watchEffect自动追踪a和shouldStart，满足两者才执行
watch(() => motionForm.value.enabled, (v) => {
if (v === 'on') shouldStart.value = true;
else shouldStart.value = false;
}, { immediate: true });
watchEffect(() => {
if (shouldStart.value && a.value === 1) {
startDetection();
shouldStart.value = false; // 避免重复触发
}
});
避免常见陷阱
实际开发中容易忽略的点：
- 不要在 watch 里写 while(true) 或 await 无 resolve 的 Promise —— 会卡死主线程或导致未定义行为
-
ref 类型的变量必须用
.value访问，尤其在条件判断中（a.value === 1，不是a === 1） - deep: true 不解决条件判断问题，它只影响对象深层变化是否触发回调，和 if 逻辑无关
- 如果
a是普通变量（非响应式），watch 完全无法感知其变化，务必用ref或reactive包裹
