前言

你可以认为他们是同一个功能的两种不同形态，底层的实现是一样的。

• watch - 显式指定依赖源，依赖源更新时执行回调函数
• watchEffect - 自动收集依赖源，依赖源更新时重新执行自身函数

首先先需要了解一下 Vue 3 的响应式是怎么工作的。我想很多文章都详细的讲过这个部分了，这里就简单带过一下。这里有个简化版的 ref 的实现：

const ref = (initialValue) => {let _value = initialValuereturn {get value() {track(this, 'value') // 收集依赖return _value},set value() {_value = valuetrigger(this, 'value') // 触发依赖}}
}

访问数据时，track 被呼叫并记录下访问了的字段。而当写入数据时，trigger 被呼叫并触发之前所依赖了这个字段所绑定事件更新（即 effect - computed, watch, watchEffect 底层都是 effect），他们会被记录在一个全局的 WeakMap 中，这里就不展开了，感兴趣可以去看源码。

const counter = ref(1)console.log(counter.value) // `track()` 被呼叫
counter.value = 2 // `trigger()` 被呼叫

当我们需要函数里的依赖时，只需要记录函数执行的过程中 track()被呼叫的次数（和对应的对象与字段）即可。例如：

const counter = ref(1)function foo() {console.log(counter.value)
}function collectDeps() {startTracking()foo() // 在这个过程中，counter 被收集stopTracking()
}

这样便可以知道 foo 这个函数依赖了 counter。

watch

一个 generalised 的 watch API 应该是这样的（其他类似直接接受 ref 或者 reactive 作为参数的其实都是糖）

watch(() => { /* 依赖源收集函数 */ },() => { /* 依赖源改变时的回调函数 */ }
)

这里的依赖源函数只会执行一次，回调函数会在每次依赖源改变的时候触发，但是并不对回调函数进行依赖收集。也就是说，依赖源和回调函数之间并不一定要有直接关系。

侦听数据源类型

const x = ref(0)
const y = ref(0)// 单个 ref
watch(x, (newX) => {console.log(`x is ${newX}`)
})// getter 函数
watch(() => x.value + y.value,(sum) => {console.log(`sum of x + y is: ${sum}`)}
)// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)
})

注意，你不能直接侦听响应式对象的属性值，例如:

const obj = reactive({ count: 0 })// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {console.log(`count is: ${count}`)
})

这里需要用一个返回该属性的 getter 函数：

// 提供一个 getter 函数
watch(() => obj.count,(count) => {console.log(`count is: ${count}`)}
)

深层侦听器
直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发：

const obj = reactive({ count: 0 })watch(obj, (newValue, oldValue) => {// 在嵌套的属性变更时触发// 注意：`newValue` 此处和 `oldValue` 是相等的// 因为它们是同一个对象！
})obj.count++

相比之下，一个返回响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调：

watch(() => state.someObject,() => {// 仅当 state.someObject 被替换时触发}
)

你也可以给上面这个例子显式地加上 deep 选项，强制转成深层侦听器：

watch(() => state.someObject,(newValue, oldValue) => {// 注意：`newValue` 此处和 `oldValue` 是相等的// *除非* state.someObject 被整个替换了},{ deep: true }
)

深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。

WatchEffect

watchEffect 相当于将 watch 的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于 watch，watchEffect 的回调函数会被立即执行（即 { immediate: true }）

watchEffect(() => { /* 依赖源同时是回调函数 */ }
)

以下两种用法在行为上基本等价

watchEffect(() => console.log(counter.value)
)watch(() => counter.value,() => console.log(counter.value),{ immediate: true }
)

与 watch 不同的一点是，在 watchEffect 中依赖源会被重复执行，动态新增加的依赖也会被收集，例如：

const counter = ref(0)
const enabled = ref(false)watchEffect(() => {if (enabled.value)console.log(counter.value)
})// (以下忽略 nextTick)// watchEffect 会被立即执行，因为 “enabled“ 为 false, 此时仅收集到 “enabled“ 依赖
counter.value += 1 // 无反应enabled.value = true // Effect 触发，控制台出 "1"
counter.value += 1 // “counter“ 被作为新的依赖被收集，控制台出 "2"enabled.value = false // 函数被重新执行，无输出
counter.value += 1 // 函数被重新执行，无输出 (虽然 counter 已经没有用了，但是作为依赖还是会触发函数）

watch VS watchEffect

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：

• watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。

• watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

什么时候用什么？

推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发，也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单，依赖源和逻辑强相关的场景（或者懒惰的场景 ）。

回调的触发时机

当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: ‘post’ 选项：

watch(source, callback, {flush: 'post'
})watchEffect(callback, {flush: 'post'
})

后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()：

import { watchPostEffect } from 'vue'watchPostEffect(() => {/* 在 Vue 更新后执行 */
})

停止侦听器

在 setup() 或

要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：

const unwatch = watchEffect(() => {})// ...当该侦听器不再需要时
unwatch()

注意，需要异步创建侦听器的情况很少，请尽可能选择同步创建。如果需要等待一些异步数据，你可以使用条件式的侦听逻辑：

// 需要异步请求得到的数据
const data = ref(null)watchEffect(() => {if (data.value) {// 数据加载后执行某些操作...}
})