Vue3 watch 源码有哪些关键要点？

在 Vue3 中，watch 是一个非常重要的功能，它用于响应式地监听数据的变化并执行相应的操作，Vue3 watch 源码的关键要点有哪些呢？下面我们来详细探讨。

watch 的基本使用与原理

我们先看 watch 的基本使用，

```javascript import { ref, watch } from 'vue' const count = ref(0) watch(count, (newValue, oldValue) => { console.log('count 变化了', newValue, oldValue) }) count.value++ ```

这就是一个简单的 watch 监听 ref 数据的例子，从原理上来说，watch 是基于 Vue3 的响应式系统实现的，Vue3 的响应式系统通过 Proxy 对数据进行代理，当数据发生变化时，会触发相应的依赖收集和更新，而 watch 就是在这个基础上，创建一个副作用函数，当被监听的数据变化时，执行这个副作用函数。

watch 源码中的核心函数

在 Vue3 的源码中，watch 相关的核心函数有 `createWatcher` 等，`createWatcher` 函数负责创建一个 watcher 实例，它首先会处理传入的参数，判断是直接传入一个数据源（如 ref、reactive 对象的属性等），还是传入一个 getter 函数。

如果是直接传入数据源,会通过 `toRef` 等方法将其转换为一个可以追踪的响应式对象，创建一个副作用函数，这个副作用函数会在数据源变化时被调用，在创建副作用函数时，会考虑到 immediate（是否立即执行一次）等选项。

如果设置了 `immediate: true`，那么在创建 watcher 时，就会立即执行一次副作用函数，并且记录下初始值。

依赖收集与触发更新

在 watch 的实现中，依赖收集是很关键的一步，当副作用函数执行时，会触发对数据源的读取，从而在响应式系统中进行依赖收集，当数据源发生变化时，响应式系统会通知所有依赖它的 watcher 进行更新。

当数据源（比如一个 ref）的 `value` 被修改时，会触发 `trigger` 函数，`trigger` 函数会遍历该数据源的依赖集合（也就是所有依赖它的 watcher），然后依次调用每个 watcher 的更新函数。

在 watcher 的更新函数中，会重新执行副作用函数，并且获取新的值和旧的值（如果是首次执行，旧值可能是 `undefined`），然后将这些值传递给用户定义的回调函数（就是我们在 watch 中传入的第二个参数）。

深度监听与对象监听

对于对象类型的数据（如 reactive 对象），我们经常会用到深度监听（`deep: true`），在源码中，深度监听是如何实现的呢？

当设置 `deep: true` 时，watch 会递归地遍历对象的所有属性，为每个属性都进行依赖收集，这样，当对象的任何一个属性发生变化时，都能触发 watch 的更新。

```javascript import { reactive, watch } from 'vue' const obj = reactive({ a: { b: 1 } }) watch(obj, (newValue, oldValue) => { console.log('obj 变化了', newValue, oldValue) }, { deep: true }) obj.a.b = 2 ```

在这个例子中,虽然我们监听的是 `obj`，但由于设置了 `deep: true`，当 `obj.a.b` 变化时，也会触发 watch 的回调。

源码中,在处理深度监听时，会使用一个辅助函数来遍历对象的属性，对于每个属性，如果它也是一个对象（如另一个 reactive 对象），则继续递归遍历，这样就实现了深度的依赖收集。

停止监听

watch 还提供了停止监听的功能，当我们不再需要监听某个数据时，可以调用 watch 返回的停止函数。

```javascript import { ref, watch } from 'vue' const count = ref(0) const stop = watch(count, (newValue, oldValue) => { console.log('count 变化了', newValue, oldValue) }) // 停止监听 stop() count.value++ // 此时不会触发 watch 的回调 ```

在源码中,停止函数会从响应式系统的依赖集合中移除该 watcher 的相关依赖，这样，当数据源再次变化时，就不会再通知这个 watcher 进行更新了。

停止函数会调用 `cleanupEffect` 函数，该函数会遍历 watcher 的依赖集合，并从每个数据源的依赖集合中删除该 watcher。

Vue3 watch 源码通过巧妙地利用响应式系统的 Proxy 代理、依赖收集和触发更新机制，实现了强大而灵活的监听功能，从基本的数据源处理、依赖收集，到深度监听、停止监听等高级功能，都有其对应的源码实现逻辑，了解这些源码要点，能让我们更好地理解 Vue3 的响应式原理，以及在实际开发中更灵活地运用 watch 功能，优化我们的应用性能和用户体验。