watch 和 watchEffect 都是 Vue3 中用来监听响应式数据变化的 API，但它们的使用方式和触发时机不同。

一句话总结

watch：像"点名监听"——你明确告诉它监听谁，它才监听谁；默认不立即执行，等数据变了才触发。
watchEffect：像"自动跟随"——它自己扫描你用了哪些响应式数据，只要这些数据变了就自动重新执行；一上来就执行一次。

核心区别对比

对比项	watch	watchEffect
监听方式	手动指定监听源	自动追踪依赖
能否获取新旧值	✅ 能拿到 `newVal` 和 `oldVal`	❌ 拿不到，只有当前值
是否立即执行	❌ 默认惰性，不立即执行	✅ 立即执行一次
需要监听多个源	✅ 支持数组	✅ 自动追踪所有用到的
适用场景	需要对比新旧值、精确监听	副作用跟随（如请求、日志）

详细解释

1. watch：手动指定监听源

watch 需要你明确告诉它要监听哪个数据，并且回调里能拿到变化前和变化后的值。

import { ref, watch } from 'vue'

const count = ref(0)

// 手动指定监听 count，能拿到新旧值
watch(count, (newVal, oldVal) => {
  console.log('count 从', oldVal, '变成了', newVal)
})

// 注意：此时不会立即执行，只有 count 变化时才触发
count.value = 1  // 触发：count 从 0 变成了 1

特点：

必须手动指定监听源（可以是 ref、reactive 属性、getter 函数、数组）
回调能拿到 newVal（新值）和 oldVal（旧值），方便做对比
默认惰性：刚创建时不会立即执行，只有数据变化才触发
如果需要立即执行，要加 { immediate: true }

// 立即执行一次 + 深度监听
watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, { immediate: true, deep: true })

2. watchEffect：自动追踪依赖

watchEffect 不需要你指定监听谁，它会在执行回调时自动收集回调里用到的所有响应式数据，只要其中任何一个变化，就重新执行。

import { ref, watchEffect } from 'vue'

const count = ref(0)
const name = ref('张三')

// 自动追踪 count 和 name，两者任一变化都会重新执行
watchEffect(() => {
  console.log('当前 count:', count.value, 'name:', name.value)
})

// 创建时立即执行一次（输出：当前 count: 0 name: 张三）
// 之后 count 或 name 变化都会自动触发
count.value = 1  // 输出：当前 count: 1 name: 张三
name.value = '李四'  // 输出：当前 count: 1 name: 李四

特点：

自动追踪：不用手动指定监听源，回调里用到谁就监听谁
立即执行：创建时马上执行一次
拿不到新旧值：回调里只有当前值，无法对比变化前后
适合"数据变了就重新做某件事"的场景（如重新请求、重新计算）

什么时候用哪个？

需要对比新旧值（如"值变大了还是变小了"）→ 用 watch
精确监听某个数据，不想被其他数据干扰 → 用 watch
只要数据变化就重新执行副作用（如发请求、写日志、同步状态）→ 用 watchEffect
不想手动维护监听列表，希望自动跟随 → 用 watchEffect

代码示例对比

import { ref, watch, watchEffect } from 'vue'

const count = ref(0)

// watch：手动指定，能拿新旧值，默认不立即执行
watch(count, (newVal, oldVal) => {
  console.log('watch:', oldVal, '->', newVal)
})

// watchEffect：自动追踪，立即执行，拿不到新旧值
watchEffect(() => {
  console.log('watchEffect:', count.value)
})

// 初始状态：
// watchEffect 立即执行一次 → 输出: watchEffect: 0
// watch 不执行（惰性）

count.value = 1
// watch 触发 → 输出: watch: 0 -> 1
// watchEffect 触发 → 输出: watchEffect: 1

watch 的 deep 和 immediate 参数

watch 默认是浅监听且惰性的，deep 和 immediate 是两个常用配置项，用来改变监听行为。

一句话总结

deep：是否深度监听对象内部的变化（默认 false，只监听引用变化）
immediate：是否立即执行一次回调（默认 false，数据变化才执行）

deep：深度监听

默认情况下，watch 监听一个对象时，只监听对象的引用变化，对象内部属性的变化不会触发。

const state = reactive({ user: { name: '张三' } })

// ❌ 不生效：只监听 state.user 的引用，改内部属性不触发
watch(() => state.user, (newVal) => {
  console.log('user 变化', newVal)
})
state.user.name = '李四'  // 不会触发！

// ✅ 生效：加 deep: true，深度监听内部变化
watch(() => state.user, (newVal) => {
  console.log('user 变化', newVal)
}, { deep: true })
state.user.name = '李四'  // 触发！

注意：deep 会递归遍历对象的所有属性，性能开销较大，大数据对象慎用。

immediate：立即执行

默认情况下，watch 是惰性的，创建时不会立即执行，只有数据变化才触发。

const count = ref(0)

// 默认：创建时不执行，count 变化才执行
watch(count, (newVal, oldVal) => {
  console.log('count:', newVal)
})
// 此时不会输出任何内容

// 加 immediate: true：创建时立即执行一次
watch(count, (newVal, oldVal) => {
  console.log('count:', newVal)
}, { immediate: true })
// 立即输出：count: 0

immediate 常用于初始化时就要执行一次的场景，比如进入页面就根据数据请求一次。

完整示例

watch(
  () => state.obj,
  (newVal, oldVal) => {
    console.log('obj 变化:', oldVal, '->', newVal)
  },
  {
    deep: true,      // 深度监听对象内部变化
    immediate: true  // 立即执行一次
  }
)

总结

参数	作用	默认值
`deep`	深度监听对象内部属性变化	`false`
`immediate`	创建时立即执行一次回调	`false`

记忆：deep 管"监听多深"，immediate 管"是否马上执行"。

📚 前端面试刷题