别再乱用了！Vue3项目里watch和watchEffect到底怎么选？附真实场景对比

Vue3实战指南：watch与watchEffect的精准选择策略

在Vue3的响应式系统中，watch和watchEffect这对API组合让不少开发者陷入选择困难。它们看似功能重叠，实则各有专长。本文将带你穿透表象，从底层原理到实战场景，彻底掌握这两个API的正确打开方式。

1. 核心机制解析：从源码看本质差异

1.1 执行时机的关键区别

watchEffect的立即执行特性源于其设计初衷——自动依赖收集。当你在组件setup中写下这段代码时：

const count = ref(0)
const state = reactive({ price: 100 })

watchEffect(() => {
  console.log(`总价: ${count.value * state.price}`)
})

Vue会立即执行这个回调函数，并在执行过程中记录所有访问过的响应式属性（这里是count.value和state.price）。这种机制带来两个显著特点：

1. 无差别依赖收集：函数体内所有响应式访问都会被自动追踪
2. 隐式触发：无法预知哪些变化会引发副作用执行

相比之下，watch需要显式声明监听目标：

watch([count, () => state.price], ([newCount, newPrice]) => {
  console.log(`新总价: ${newCount * newPrice}`)
})

这种声明式监听带来更精确的控制，但也意味着需要手动维护依赖列表。

1.2 新旧值处理能力对