解释 Vue 3 源码中 `watch` 和 `watchEffect` 的实现差异，以及它们在依赖收集和副作用执行上的不同策略。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，各位观众老爷，欢迎来到今天的 Vue 3 源码解密小课堂！今天咱们要聊的是 Vue 3 响应式系统里一对儿好基友，却又有点小脾气的 watch 和 watchEffect。

开场白：响应式世界的侦察兵和行动派

在 Vue 的响应式世界里，数据变化驱动着视图更新。而 watch 和 watchEffect 就像是这个世界的侦察兵和行动派。

watch：侦察兵 – 负责监视特定的目标，一旦目标发生变化，就通知行动派执行任务。它更像是一个有明确目标的“观察者”。
watchEffect：行动派 – 先行动起来，探查周围环境（依赖），一旦环境中的任何风吹草动（依赖变化），立即再次行动。它更像是一个“自适应”的观察者。

虽然都是观察者，但它们的观察方式和执行策略却大相径庭。接下来，我们就深入源码，扒一扒它们的不同之处。

第一幕：依赖收集——谁更主动？

依赖收集是响应式系统的核心环节。简单来说，就是搞清楚哪些计算属性、组件或者 effect 依赖了哪些响应式数据，这样当数据变化时，才能准确地通知到它们更新。

watch 的被动依赖收集

watch 依赖收集的方式比较“被动”。它需要你明确告诉它要监视的目标是什么。

// watch 的典型用法
watch(
  () => state.count, // 监听的目标，必须是一个 getter 函数或者 ref
  (newValue, oldValue) => { // 回调函数
    console.log(`count changed from ${oldValue} to ${newValue}`);
  }
);

在 watch 的源码实现中（简化版）：

function watch(source, cb, options) {
  // 1. 创建 effect
  const getter = isFunction(source) ? source : () => traverse(source);
  let oldValue = undefined;
  let newValue = undefined;

  const job = () => {
    // 4. 回调执行时，获取新值
    newValue = effectFn();
    cb(newValue, oldValue); // 执行回调
    oldValue = newValue;
  };

  // 2. 创建 scheduler
  const scheduler = () => queueJob(job);

  // 3. 创建 effect 函数
  const effectFn = effect(getter, {
    lazy: true,
    scheduler
  });

  oldValue = effectFn(); // 首次执行，获取初始值
}

function traverse(value) {
    // 递归访问 value 的所有属性，触发 get 操作，收集依赖
    for (const key in value) {
        traverse(value[key]);
    }
    return value;
}

代码解释：

watch 函数首先接收 source（监听目标）和 cb（回调函数）作为参数。
如果 source 是一个函数，则直接使用它作为 getter。否则，创建一个 traverse 函数来递归访问 source 的所有属性，从而触发 get 操作，收集依赖。如果 source 是一个响应式对象，traverse 会递归访问该对象的所有属性，强制触发它们的 get 操作，从而将 watch effect 注册为这些属性的依赖。
创建一个 effect 函数，并将 lazy 选项设置为 true，这意味着 effect 不会立即执行。
创建一个 scheduler 函数，用于在依赖更新时调度 job 的执行。
首次执行 effectFn()，获取初始值 oldValue。

关键点：

依赖收集发生在 getter 函数执行时。只有在 getter 中访问到的响应式数据，才会被收集为依赖。
如果 source 不是一个函数，则使用 traverse 函数来触发依赖收集。
watch 默认是 lazy 的，这意味着它不会立即执行，而是等到依赖发生变化时才执行。

watchEffect 的主动依赖收集

watchEffect 的依赖收集方式更加“主动”。它会立即执行传入的函数，并在执行过程中自动收集所有用到的响应式数据作为依赖。

// watchEffect 的典型用法
watchEffect(() => {
  console.log(state.count * 2); // 访问了 state.count，自动收集为依赖
});

在 watchEffect 的源码实现中（简化版）：

function watchEffect(fn, options) {
    const effectFn = effect(fn, {
        scheduler: () => {
            queueJob(effectFn);
        }
    });
    return effectFn(); // 立即执行一次
}

代码解释：

watchEffect 函数接收一个函数 fn 作为参数。
创建一个 effect 函数，并将 scheduler 选项设置为一个函数，用于在依赖更新时调度 effectFn 的执行。
立即执行 effectFn()，这将触发 fn 的执行，并在执行过程中自动收集所有用到的响应式数据作为依赖。

关键点：

依赖收集发生在 fn 函数执行时。在 fn 中访问到的所有响应式数据，都会被自动收集为依赖。
watchEffect 默认会立即执行一次，从而触发依赖收集。

依赖收集策略对比

特性	`watch`	`watchEffect`
依赖收集方式	被动：需要明确指定监听目标	主动：自动收集执行函数中用到的所有响应式数据
首次执行	默认 `lazy`，需要手动执行一次	默认立即执行
适用场景	需要监听特定目标，对依赖关系有明确控制的场景	只需要根据依赖变化执行副作用，对依赖关系不太关心的场景
例子	监听某个 `ref` 的值，或者监听一个计算属性的结果	当多个响应式数据变化都需要执行同一个副作用时，使用 `watchEffect`

第二幕：副作用执行——谁更灵活？

副作用指的是函数执行后对外部状态产生的影响，比如修改 DOM、发送网络请求等等。

watch 的精确控制

watch 的回调函数提供了 newValue 和 oldValue 参数，方便你根据新旧值的差异来执行不同的副作用。

watch(
  () => state.count,
  (newValue, oldValue) => {
    if (newValue > oldValue) {
      console.log('count increased');
    } else {
      console.log('count decreased');
    }
  }
);

watchEffect 的简洁高效

watchEffect 没有提供 newValue 和 oldValue 参数，它更加关注整体的副作用执行。

watchEffect(() => {
  document.body.innerHTML = `Count: ${state.count}`; // 直接根据当前状态更新 DOM
});

副作用执行策略对比

特性	`watch`	`watchEffect`
回调参数	提供 `newValue` 和 `oldValue`，方便根据新旧值的差异执行不同的副作用	没有提供 `newValue` 和 `oldValue`，需要手动获取当前状态
适用场景	需要根据新旧值的差异来执行不同副作用的场景	只需要根据依赖变化执行副作用，不需要关心具体变化值的场景
例子	监听某个 `ref` 的值，只有当新值大于旧值时才执行特定的副作用	当多个响应式数据变化都需要更新 DOM 时，使用 `watchEffect` 可以简化代码

第三幕：深入源码细节

现在让我们更深入地研究源码，看看 watch 和 watchEffect 在实现细节上的差异。

watch 的源码解析

function watch(source, cb, options) {
    const getter = () => traverse(source);
    let oldValue = undefined;

    const job = () => {
        const newValue = effectFn();
        if (options.deep || newValue !== oldValue) {
            cb(newValue, oldValue);
            oldValue = newValue;
        }
    }

    const effectFn = effect(getter, {
        lazy: true,
        scheduler: () => {
            queueJob(job);
        }
    });

    oldValue = effectFn(); // 首次执行，获取初始值
}

关键点：

deep 选项：如果设置了 deep: true，则会递归遍历 source 的所有属性，触发它们的 get 操作，从而收集依赖。
newValue !== oldValue：只有当新值和旧值不相等时，才会执行回调函数。
scheduler：使用 queueJob 来调度回调函数的执行，确保在同一事件循环中多次依赖更新只会执行一次回调函数。

watchEffect 的源码解析

function watchEffect(fn, options) {
    const effectFn = effect(fn, {
        scheduler: () => {
            queueJob(effectFn);
        }
    });
    effectFn(); // 立即执行一次
}

关键点：

没有 deep 选项：watchEffect 总是会递归遍历 fn 中用到的所有响应式数据，触发它们的 get 操作，从而收集依赖。
没有 newValue 和 oldValue：watchEffect 不会比较新旧值，而是直接执行回调函数。
scheduler：使用 queueJob 来调度回调函数的执行，确保在同一事件循环中多次依赖更新只会执行一次回调函数。

总结：选择合适的武器

watch 和 watchEffect 都是 Vue 3 响应式系统中强大的工具，但它们适用于不同的场景。

如果你需要监听特定目标，并且需要根据新旧值的差异来执行不同的副作用，那么 watch 是更好的选择。
如果你只需要根据依赖变化执行副作用，并且不需要关心具体的变化值，那么 watchEffect 可以简化代码。

选择合适的武器，才能在响应式世界的战场上取得胜利！

彩蛋：一些使用技巧

避免不必要的依赖收集： 在 watchEffect 中，尽量只访问真正需要的响应式数据，避免收集过多的依赖，影响性能。

使用 onInvalidate 清理副作用： 在 watchEffect 的回调函数中，可以使用 onInvalidate 函数来清理副作用，例如取消网络请求、清除定时器等等。

watchEffect((onInvalidate) => {
  const timer = setTimeout(() => {
    console.log('timer executed');
  }, 1000);

  onInvalidate(() => {
    clearTimeout(timer); // 清理定时器
  });
});

停止监听： watch 和 watchEffect 都会返回一个停止函数，可以用来停止监听。

const stopWatch = watch(
  () => state.count,
  (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`);
  }
);

// 在需要停止监听的时候调用
stopWatch();

好了，今天的 Vue 3 源码解密小课堂就到这里了。希望大家能够更好地理解 watch 和 watchEffect 的实现差异，并在实际开发中灵活运用它们！下次再见！

发表回复 取消回复

发表回复取消回复