Vue3 项目里，watch 和 watchEffect 到底该用哪个？聊聊我的选择标准

Vue3 项目中 watch 与 watchEffect 的深度抉择指南

在 Vue3 的响应式系统中，watch 和 watchEffect 是数据监听的两种核心机制。许多开发者在面对具体业务场景时，常常陷入选择困境：是该用 watch 的精确控制，还是 watchEffect 的自动追踪？本文将基于四个关键维度构建决策框架，并通过典型场景分析帮你建立清晰的选择标准。

1. 核心机制对比：理解设计哲学差异

1.1 依赖收集方式

watch 需要显式声明监听源，其工作模式类似于"订阅-发布"机制。开发者必须明确指定要观察的数据源，这使得依赖关系一目了然：

// 显式声明监听countRef和user.name
watch([countRef, () => user.name], ([newCount, newName]) => {
  console.log(`Count: ${newCount}, Name: ${newName}`)
})

而 watchEffect 采用自动依赖收集，会在首次执行时追踪所有访问过的响应式属性：

// 自动收集countRef和user.name作为依赖
watchEffect(() => {
  console.log(`Count: ${countRef.value}, Name: ${user.name}`)
})

关键差异：

• watch 的依赖是静态声明的
• watchEffect 的依赖是动态收集的
• 前者适合明确知道要观察什么的场景，后者适合依赖关系可能变化的场景