深入剖析 Vue 3 源码中 `watch` 和 `watchEffect` 的实现差异，以及它们在依赖收集和副作用执行上的不同策略。

各位观众老爷们，大家好！我是你们的老朋友，代码界的段子手。今天咱们不聊妹子，不聊八卦，就来聊聊Vue 3里一对让人傻傻分不清的兄弟——watch和watchEffect。

这两货都能监听数据的变化，都能执行副作用，但它们之间微妙的差异，就像初恋和热恋，看似相似，实则内心戏完全不同。今天，咱们就深入扒一扒它们的源码，看看它们到底在玩什么花样。

开场白：Vue 3 响应式系统的基石

在开始之前，咱们得先简单回顾一下Vue 3的响应式系统。这玩意儿就像一个精密的监控网络，时刻关注着数据的变化。当数据发生改变时，它能通知所有依赖于该数据的“观察者”去更新。而watch和watchEffect，就是这个监控网络里的重要成员。

Vue 3 响应式系统的核心概念包括：

Reactive: 将普通对象转换为响应式对象，通过 Proxy 实现数据劫持。
Effect: 副作用函数，当依赖的数据发生变化时会被执行。
Dependency (Dep): 依赖关系，记录着哪些 Effect 依赖于哪些 Reactive 数据。
Track: 追踪依赖关系，建立 Reactive 数据和 Effect 之间的联系。
Trigger: 触发更新，当 Reactive 数据发生变化时，通知所有依赖它的 Effect 执行。

有了这些概念，咱们就可以开始深入研究watch和watchEffect了。

第一幕：watch——“明察秋毫”的观察者

watch就像一个经验丰富的侦探，它需要你明确告诉它要观察哪个目标，以及当目标发生变化时，你希望它做什么。

源码解读：watch是如何工作的？

watch的实现稍微复杂一些，因为它要处理不同的情况（监听单个值、监听多个值、监听函数等等）。咱们简化一下，只看监听单个响应式对象的场景：

function watch<T>(
  source: WatchSource<T>,
  cb: WatchCallback<T>,
  options?: WatchOptions
): WatchStopHandle {
  const getter = isReactive(source)
    ? () => source
    : source; // 如果 source 是响应式对象，直接返回，否则需要包装成函数

  let oldValue: T;
  let newValue: T;
  let effect: ReactiveEffect<T>;

  const job = () => {
    newValue = effect.run()!; // 重新执行 effect 函数，获取新的值
    if (options?.deep || hasChanged(newValue, oldValue)) { // 比较新旧值，判断是否需要执行回调
      cb(newValue, oldValue, onCleanup);
      oldValue = newValue;
    }
  };

  effect = new ReactiveEffect(getter, job); // 创建 ReactiveEffect 实例

  if (options?.immediate) { // 如果 immediate 为 true，立即执行一次
    job();
  } else {
    oldValue = effect.run()!; // 首次执行，获取初始值
  }

  return () => {
    effect.stop(); // 返回一个停止监听的函数
  };
}

这段代码的核心在于：

确定观察目标： watch需要你明确提供source，告诉它你要观察哪个数据。它可以是一个响应式对象、一个getter函数，或者一个包含多个响应式对象的数组。
创建ReactiveEffect： watch会将你的source和回调函数cb包装成一个ReactiveEffect实例。ReactiveEffect是Vue 3响应式系统的核心，它负责收集依赖、执行副作用。
延迟执行副作用： 默认情况下，watch会在source发生变化时才执行回调函数cb。你可以通过immediate: true选项，让它立即执行一次。
新旧值比较： watch会比较source的新旧值，只有当它们发生变化时，才会执行回调函数cb。你可以通过deep: true选项，进行深层比较。
手动停止监听： watch会返回一个函数，你可以调用这个函数来停止监听。

关键点：

明确指定依赖： watch需要你明确指定要监听的数据源，它不会自动收集依赖。
延迟执行： 默认情况下，watch只会在依赖项发生变化时执行副作用。
新旧值比较： watch会比较新旧值，只有当它们发生变化时才会触发回调。

举个栗子：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

watch(
  () => count.value, // 明确指定要监听的数据源
  (newValue, oldValue) => { // 回调函数
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
);
</script>

在这个例子中，watch明确监听了count.value的变化，当count.value发生改变时，控制台会输出相应的日志。

第二幕：watchEffect——“耳听八方”的观察者

watchEffect就像一个好奇心旺盛的八卦记者，它会主动去探索你代码中用到了哪些响应式数据，然后默默地关注它们的变化。

源码解读：watchEffect是如何工作的？

watchEffect的实现相对简单：

function watchEffect(
  effect: WatchEffect,
  options?: WatchOptions
): WatchStopHandle {
  let active = true;
  let cleanup: (() => void) | undefined;

  const job = () => {
    if (!active) {
      return;
    }
    cleanup?.(); // 执行上一次的 cleanup 函数
    const onCleanup: OnCleanup = (fn: () => void) => {
      cleanup = fn;
    };
    try {
      effect(onCleanup); // 执行 effect 函数，并传入 onCleanup 函数
    } finally {
      effect.effect.allowRecurse = true;
    }
  };

  const instance = currentInstance;
  const scheduler = () => queueJob(job); // 将 job 函数放入微任务队列

  const effectInstance = new ReactiveEffect(job, scheduler);

  effectInstance.run(); // 立即执行一次 effect 函数

  return () => {
    active = false;
    effectInstance.stop(); // 返回一个停止监听的函数
  };
}

这段代码的关键在于：

自动收集依赖： watchEffect会立即执行你提供的effect函数。在effect函数执行过程中，Vue 3的响应式系统会自动追踪所有被访问的响应式数据，并将它们添加到effect的依赖列表中。
立即执行副作用： watchEffect会立即执行一次effect函数，并且在每次依赖项发生变化时都会重新执行。
cleanup函数： watchEffect允许你提供一个cleanup函数，在每次effect函数执行之前，cleanup函数会被调用。这可以用来清理副作用，例如取消网络请求、移除事件监听器等等。
手动停止监听： watchEffect会返回一个函数，你可以调用这个函数来停止监听。

关键点：

自动依赖收集： watchEffect会自动收集依赖，无需手动指定。
立即执行： watchEffect会立即执行副作用，并且在每次依赖项发生变化时都会重新执行。
cleanup机制： watchEffect提供了cleanup机制，方便你清理副作用。

举个栗子：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

const doubleCount = computed(() => count.value * 2);

watchEffect(() => {
  console.log(`Count is ${count.value}, Double Count is ${doubleCount.value}`);
});
</script>

在这个例子中，watchEffect会自动追踪count.value和doubleCount.value的变化。当count.value发生改变时，doubleCount.value也会自动更新，然后watchEffect的回调函数会被重新执行，控制台会输出最新的count和doubleCount的值。

第三幕：watch vs watchEffect——“性格迥异”的兄弟俩

现在，咱们来总结一下watch和watchEffect的差异：

特性	`watch`	`watchEffect`
依赖收集	需要明确指定要监听的数据源	自动收集依赖
执行时机	默认延迟执行，依赖项变化时才执行	立即执行，并且在每次依赖项变化时都会重新执行
新旧值比较	会比较新旧值，只有当它们发生变化时才触发回调	不比较新旧值，只要依赖项发生变化就触发回调
cleanup机制	需要手动实现 cleanup	提供 onCleanup 函数，方便清理副作用
使用场景	需要精确控制依赖关系和副作用执行时机	需要自动追踪依赖关系，并且立即执行副作用

形象比喻：

watch就像一个狙击手，它需要你告诉它要瞄准哪个目标，然后它才会扣动扳机。
watchEffect就像一个声呐，它会主动扫描周围的环境，一旦发现任何动静，就会立即发出警报。

第四幕：实战演练——“用武之地”大比拼

了解了watch和watchEffect的差异，咱们来看看它们在实际开发中的应用场景：

watch：
- 监听路由变化：当你需要根据路由的变化来加载不同的数据时，可以使用watch来监听$route对象。
- 监听props变化：当你需要在组件内部响应props的变化时，可以使用watch来监听props。
- 执行复杂的副作用：当你需要精确控制副作用的执行时机，并且需要比较新旧值时，可以使用watch。
watchEffect：
- 自动更新UI：当你需要根据多个响应式数据的变化来自动更新UI时，可以使用watchEffect。
- 监听外部状态：当你需要监听外部状态（例如localStorage、cookie）的变化时，可以使用watchEffect。
- 执行简单的副作用：当你只需要在依赖项发生变化时执行一些简单的副作用，并且不需要比较新旧值时，可以使用watchEffect。

第五幕：最佳实践——“葵花宝典”秘籍

最后，咱们来分享一些使用watch和watchEffect的最佳实践：

谨慎使用deep: true： 深层比较会带来性能开销，只有在必要时才使用。
合理使用immediate: true： 避免在组件初始化时执行不必要的副作用。
避免在watchEffect中修改响应式数据： 这可能会导致无限循环。
及时停止监听： 在组件卸载时，记得调用watch和watchEffect返回的停止监听函数，避免内存泄漏。
优先考虑computed： 如果你的目标只是根据响应式数据计算出一个新的值，优先使用computed，而不是watch或watchEffect。

总结陈词：

watch和watchEffect是Vue 3响应式系统中的两大利器。watch擅长精确控制，watchEffect擅长自动追踪。理解它们的差异，掌握它们的用法，能让你在Vue 3的开发道路上更加得心应手。

好了，今天的讲座就到这里。希望大家听完之后，能对watch和watchEffect有更深入的了解。记住，代码的世界充满乐趣，只要你肯深入探索，就能发现更多的惊喜！

散会！

发表回复 取消回复

发表回复取消回复