解读vue3源码（3）——watch

Vue3的watch底层源码主要是通过使用Proxy对象来实现的。在Vue3中，每个组件实例都会有一个watcher实例，用于监听组件数据的变化。当组件数据发生变化时，watcher实例会触发回调函数，从而更新组件的视图。

Vue3的watch底层源码主要涉及到以下几个部分：

1. 创建watcher对象
2. 收集依赖
3. 触发更新

下面对这三个部分进行详细解读。

1. 创建watcher对象

在Vue3中，watcher对象是通过watchEffect函数创建的。watchEffect函数接收一个函数作为参数，这个函数就是我们要监听的响应式数据的getter函数。watchEffect函数会在创建watcher对象时立即执行这个函数，并收集响应式数据的依赖。

创建watcher对象的源码如下：

function watchEffect(effect, options) {const watcher = new ReactiveEffect(effect, options)watcher.run()return () => {watcher.stop()}
}

其中，ReactiveEffect是一个类，用来创建watcher对象。run方法会执行传入的函数，并收集依赖。stop方法会停止watcher对象的执行。

2. 收集依赖

在Vue3中，依赖收集是通过track函数实现的。track函数接收两个参数：响应式数据对象和属性名。它会在getter函数执行时，将当前的watcher对象收集到响应式数据对象的依赖列表中。

track函数的源码如下：

function track(target, key) {if (activeEffect === undefined) {return}let depsMap = targetMap.get(target)if (!depsMap) {targetMap.set(target, (depsMap = new Map()))}let dep = depsMap.get(key)if (!dep) {depsMap.set(key, (dep = new Set()))}if (!dep.has(activeEffect)) {dep.add(activeEffect)activeEffect.deps.push(dep)}
}

其中，targetMap是一个全局的Map对象，用来存储所有响应式数据对象的依赖关系。activeEffect是一个全局的watcher对象，表示当前正在执行的watcher对象。

3. 触发更新

在Vue3中，更新是通过trigger函数实现的。trigger函数接收两个参数：响应式数据对象和属性名。它会在setter函数执行时，遍历响应式数据对象的依赖列表，依次执行每个watcher对象的run方法，从而触发更新。

trigger函数的源码如下：

function trigger(target, key) {const depsMap = targetMap.get(target)if (!depsMap) {return}const dep = depsMap.get(key)if (!dep) {return}dep.forEach(effect => {if (effect.scheduler) {effect.scheduler()} else {effect.run()}})
}

其中，scheduler是一个可选的参数，表示watcher对象的调度函数。如果存在调度函数，则会先执行调度函数，再执行run方法。

下面是watch底层源码的主要实现步骤：

1. 创建一个Proxy对象，用于监听数据的变化。

2. 在Proxy对象的set方法中，触发watcher实例的回调函数。

3. 在watcher实例的回调函数中，执行用户定义的回调函数，并将新旧值传递给回调函数。

4. 在回调函数中，执行用户定义的逻辑，例如更新组件的视图。

下面是watch底层源码的简单实现：

function watch(source, callback) {const watcher = {callback: callback,oldValue: null,update() {const newValue = source();if (newValue !== this.oldValue) {this.callback(newValue, this.oldValue);this.oldValue = newValue;}}};watcher.update();return watcher;
}function reactive(obj) {return new Proxy(obj, {set(target, key, value) {target[key] = value;watchers.forEach(watcher => watcher.update());return true;}});
}const data = reactive({ count: 0 });const watchers = [];watchers.push(watch(() => data.count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);
}));data.count++; // count changed from 0 to 1

在上面的代码中，我们定义了一个watch函数和一个reactive函数。watch函数用于创建watcher实例，reactive函数用于创建Proxy对象。当数据发生变化时，Proxy对象的set方法会触发watcher实例的回调函数，从而更新组件的视图。