解读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实例的回调函数，从而更新组件的视图。