Vue3 源码解析（十）：watch 的实现原理

前言

在 Vue3 中，侦听器 API 主要分为两种：watchEffect 和 watch。watchEffect 用于监听数据的变化并执行副作用函数，而 watch 则用于监听特定属性或表达式的变化并执行副作用函数。

watchEffect

watchEffect 是一个全局的侦听器 API，可以监听任何数据源的变化，包括响应式对象、响应式数组、响应式函数以及自定义的响应式数据结构。watchEffect 的实现原理如下：

1. watchEffect 函数内部创建一个新的 Effect 对象，该 Effect 对象包含以下属性：

   • active：一个布尔值，表示 Effect 是否处于激活状态。
   • fn：一个副作用函数，当 Effect 被触发时执行。
   • deps：一个依赖项数组，存储 Effect 所依赖的所有响应式数据。

2. 将 Effect 对象添加到全局 Effect 队列中。

3. 当响应式数据发生变化时，框架会遍历全局 Effect 队列，并依次触发每个 Effect 的副作用函数。

4. Effect 的副作用函数执行后，Effect 对象的 deps 数组会被清空。

watch

watch API 用于监听特定属性或表达式的变化，并执行副作用函数。watch 的实现原理如下：

1. watch 函数内部创建一个新的 Watcher 对象，该 Watcher 对象包含以下属性：

   • active：一个布尔值，表示 Watcher 是否处于激活状态。
   • getter：一个函数，用于获取要监听的属性或表达式的值。
   • value：属性或表达式的当前值。
   • callback：一个副作用函数，当属性或表达式的值发生变化时执行。
   • deps：一个依赖项数组，存储 Watcher 所依赖的所有响应式数据。

2. 将 Watcher 对象添加到 Watcher 队列中。

3. 当响应式数据发生变化时，框架会遍历 Watcher 队列，并依次触发每个 Watcher 的副作用函数。

4. Watcher 的副作用函数执行后，Watcher 对象的 deps 数组会被清空。

总结

watchEffect 和 watch 是 Vue3 中的两种侦听器 API，它们都用于监听数据的变化并执行副作用函数。watchEffect 可以监听任何数据源的变化，而 watch 则用于监听特定属性或表达式的变化。

watchEffect 的实现原理是创建一个新的 Effect 对象，并将其添加到全局 Effect 队列中。当响应式数据发生变化时，框架会遍历全局 Effect 队列，并依次触发每个 Effect 的副作用函数。

watch 的实现原理是创建一个新的 Watcher 对象，并将其添加到 Watcher 队列中。当响应式数据发生变化时，框架会遍历 Watcher 队列，并依次触发每个 Watcher 的副作用函数。