从0撸出一套Vue3 watch 的 API：剖析Vue3响应式系统的精髓

2023-12-17 14:08:34

一、开篇：

欢迎来到Vue3 watch API的实现之旅！在开始之前，强烈建议你阅读一下《保姆式地带你从0到1实现Vue3 Effect》，这将帮助你更好地理解本文中的代码。如果你已经对Vue3的Effect机制有了基本的了解，那么我们现在就开始吧！

二、响应数据的完成代码：

为了实现watch，我们需要先回顾一下响应数据的实现代码。在Vue3中，响应数据是通过Effect来实现的。Effect是一种追踪函数，它可以追踪数据的变化，并在数据变化时触发更新。响应数据的实现代码如下：

function effect(fn, options) {
  const effect = createReactiveEffect(fn, options);
  if (!options || !options.lazy) {
    effect.run();
  }
  return effect;
}

三、watch的实现：

1. 需要实现的功能：

watch API需要实现的功能主要包括：

允许用户指定一个需要被追踪的表达式，这个表达式可以是对象属性、数组索引、函数调用等。
当被追踪的表达式发生变化时，触发指定的回调函数。
提供一些选项来控制watch的行为，比如是否在组件初始化时立即执行回调函数，是否在组件销毁时停止追踪。

2. 核心原理：

watch API的核心原理是利用Effect来追踪被追踪表达式的变化。当被追踪的表达式发生变化时，Effect就会触发回调函数。

3. 具体实现步骤：

下面我们一步一步来实现watch API：

定义一个createWatchEffect函数，这个函数用于创建watch Effect。

function createWatchEffect(vm, source, cb, options) {
  let getter;
  if (typeof source === 'function') {
    getter = source;
  } else {
    getter = () => traverse(source, vm);
  }
  const effect = createReactiveEffect(getter, options);
  effect.vm = vm;
  effect.source = source;
  effect.cb = cb;
  effect.options = options;
  if (!options || !options.lazy) {
    effect.run();
  }
  return effect;
}

在Vue组件中，我们可以使用watch方法来创建watch Effect。

watch(source, cb, options) {
  return createWatchEffect(this, source, cb, options);
}

当watch Effect被触发时，会调用回调函数。在回调函数中，我们可以访问被追踪表达式的最新值。

function run(effect) {
  if (effect.active) {
    if (effect.options && effect.options.onTrack) {
      effect.options.onTrack();
    }
    effect.fn();
    if (effect.options && effect.options.onTrigger) {
      effect.options.onTrigger();
    }
  }
}