watchEffect 和 watch 哪个更实用？不同场景的选型对比与建议

没有绝对“更好用”的那个，关键看你要解决什么问题：需对比新旧值选watch，自动收集依赖选watchEffect，控制执行时机、维护性要求高时优先watch。

关键并非哪一个绝对“更好用”，而是当前需要处理什么问题。选择不当会使逻辑更加曲折、性能下降，甚至留下难以定位的响应式陷阱。

需要比较新值和旧值时，选择 watch

用户权限发生变化、订单状态出现跃迁，或表单字段校验依赖前一步输入时，只有明确“从什么变成什么”，才能准确判断。

• watch 的回调会自然接收 newValue 和 oldValue，因此能够直接比较
• 通过 immediate: true，可在初始化时取得初始值与 undefined（或上一次缓存值）
• 若要监听对象内部属性的变化，加入 deep: true 即可，含义直观且控制清楚

依赖多个响应式数据却无须区分来源时，使用 watchEffect

以搜索建议框为例，关键词、筛选标签或排序方式中任何一项变化，都需要重新获取建议列表。无须判断变动先后与来源，只要“有东西变了”便执行。

• 回调里读取的全部响应式依赖会由watchEffect自动收集，不必逐项手动列出
• 初始化阶段会自动运行一次，不再需要额外的触发逻辑
• 它也适用于副作用清理，例如在回调中建立 WebSocket；下一次执行前，watchEffect 的清理函数会自动关闭旧连接

需要控制执行时机或防止过度响应时，应优先使用 watch

对于鼠标位置、滚动偏移、实时传感器值等高频更新数据，使用 watchEffect 会让每次细微变化都触发重算，因而容易出现卡顿。

• watch 可用 flush: 'post' 将执行延后至 DOM 更新之后，也可用 flush: 'sync' 强制同步，从而控制运行节奏
• watch 默认不 immediate，支持懒执行，只会在数据真正变化后运行，可减少不必要的开销
• 监听计算属性或函数返回结果时，watch 更便于调试，因为目标清晰、链路可以追踪

项目对代码可维护性要求较高时，同样更适合 watch

在团队协作或长期迭代的项目中，接手者需要立即看明白“监听了啥、为啥监听、怎么响应”，而watch 的显式声明本身就是最清楚的文档。

• watchEffect 隐式管理依赖，重构时一旦删除某行读取语句，就可能在无提示的情况下漏掉一个监听项
• watch 会把监听源放在第一个参数中，需求变化时，增加或删除目标都清晰可见
• 类型推导方面也更友好：在TypeScript中，watch 的 newValue/oldValue 类型通常可以自动收敛，而watchEffect需要额外标注