Vue 3 响应式揭秘：WatchEffect 与 Watch 的依赖追踪和副作用清理
大家好，欢迎来到今天的 "Vue 3 响应式揭秘" 讲座！我是你们的老朋友，今天我们来聊聊 Vue 3 响应式系统中两个非常重要的 API：watchEffect 和 watch。它们就像两把刷子，负责在数据发生变化的时候，把我们的页面 "刷" 新，但它们的工作方式却又有些微妙的不同。
我们主要探讨它们是如何内部处理依赖收集和副作用的清理的。说白了，就是 Vue 3 怎么知道你的代码依赖了哪些数据，以及怎么在你不需要的时候把 "烂摊子" 收拾干净。
1. 响应式系统的基石：依赖追踪
在深入 watchEffect 和 watch 之前，我们需要先了解 Vue 3 响应式系统的核心：依赖追踪。Vue 3 使用 Proxy 对象来实现响应式数据的劫持，并通过 track 和 trigger 函数来实现依赖的收集和触发。
简单来说：
track(追踪)：当我们在组件的渲染函数或者watchEffect/watch的回调函数中访问响应式数据时，track函数会被调用。它会将当前正在执行的副作用函数（也就是我们的回调函数）与被访问的响应式数据关联起来，建立一个 "依赖关系"。trigger(触发)：当响应式数据发生变化时，trigger函数会被调用。它会找到所有依赖于该数据的副作用函数，并执行它们，从而触发组件的重新渲染或者watchEffect/watch回调函数的执行。
我们可以用一个简单的例子来模拟一下这个过程：
// 模拟响应式数据
function reactive(target) {
return new Proxy(target, {
get(target, key, receiver) {
track(target, key); // 依赖收集
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
trigger(target, key); // 触发更新
}
return result;
}
});
}
// 模拟依赖收集
let activeEffect = null; // 当前正在执行的副作用函数
const targetMap = new WeakMap(); // 存储 target -> key -> effects 的映射
function track(target, key) {
if (activeEffect) {
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
}
let deps = depsMap.get(key);
if (!deps) {
deps = new Set();
depsMap.set(key, deps);
}
deps.add(activeEffect);
}
}
// 模拟触发更新
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) {
return;
}
const deps = depsMap.get(key);
if (!deps) {
return;
}
deps.forEach(effect => {
effect(); // 执行副作用函数
});
}
// 模拟 effect
function effect(fn) {
activeEffect = fn;
fn(); // 立即执行一次，触发依赖收集
activeEffect = null;
}
// 使用示例
const data = reactive({ count: 0 });
effect(() => {
console.log(`count is: ${data.count}`);
});
data.count++; // 触发更新，控制台输出 "count is: 1"在这个例子中，reactive 函数创建了响应式数据，track 函数负责收集依赖，trigger 函数负责触发更新，effect 函数用于执行副作用函数。当我们修改 data.count 的值时，trigger 函数会找到依赖于 data.count 的副作用函数，并执行它，从而触发控制台的输出。
2. watchEffect：自动追踪依赖的 "侦探"
watchEffect 是一个 "立即执行" 且 "自动追踪依赖" 的 API。它的特点是：
- 立即执行：在定义
watchEffect时，传入的回调函数会立即执行一次。 - 自动追踪依赖：在回调函数执行过程中，Vue 3 会自动追踪所有被访问的响应式数据，并将它们与该
watchEffect关联起来。 - 响应式更新：当被追踪的响应式数据发生变化时，
watchEffect的回调函数会被重新执行。
我们可以用一个简单的例子来说明：
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
</div>
</template>
<script setup>
import { ref, computed, watchEffect } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
watchEffect(() => {
console.log('Count changed:', count.value);
console.log('Double Count changed:', doubleCount.value);
});
// 每隔 1 秒增加 count 的值
setInterval(() => {
count.value++;
}, 1000);
</script>在这个例子中，watchEffect 的回调函数会立即执行一次，并追踪 count.value 和 doubleCount.value 的变化。当 count.value 的值发生变化时，watchEffect 的回调函数会被重新执行，从而在控制台输出新的 count 和 doubleCount 的值。
watchEffect 的内部实现：
watchEffect 的内部实现其实就是对我们前面模拟的 effect 函数的封装。它会创建一个特殊的 "副作用函数"，并立即执行它。在执行过程中，Vue 3 会通过 track 函数收集依赖，并将这些依赖存储起来。当依赖发生变化时，Vue 3 会通过 trigger 函数触发该副作用函数的重新执行。
简化版的 watchEffect 实现：
function watchEffect(fn) {
let active = true; // 用于控制是否继续执行副作用函数
let cleanupFn = null; // 用于存储清理函数
const job = () => {
if (!active) {
return;
}
// 清理之前的副作用
if (cleanupFn) {
cleanupFn();
}
// 执行副作用函数，并收集依赖
activeEffect = () => {
try {
fn({
onInvalidate(invalidateFn) {
cleanupFn = invalidateFn;
}
});
} finally {
activeEffect = null;
}
};
activeEffect();
};
job(); // 立即执行一次
return () => { // 返回一个停止观察的函数
active = false;
};
}watchEffect 的副作用清理：
watchEffect 提供了一个 onInvalidate 函数，允许我们在回调函数中注册一个清理函数。这个清理函数会在下一次回调函数执行之前被调用，用于清除之前的副作用，例如取消定时器、移除事件监听器等。
<template>
<div>
<p>Count: {{ count }}</p>
</div>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect((onInvalidate) => {
const timer = setInterval(() => {
console.log('Count:', count.value);
}, 1000);
onInvalidate(() => {
clearInterval(timer);
console.log('Timer cleared!');
});
});
// 每隔 5 秒增加 count 的值
setInterval(() => {
count.value++;
}, 5000);
</script>在这个例子中，我们在 watchEffect 的回调函数中创建了一个定时器，并使用 onInvalidate 函数注册了一个清理函数。当 count.value 的值发生变化时，watchEffect 的回调函数会被重新执行，清理函数会被调用，从而清除之前的定时器。
watchEffect 的优点和缺点：
- 优点：使用简单，自动追踪依赖，无需手动指定依赖项。
- 缺点：由于是自动追踪依赖，可能会追踪到不必要的依赖，导致不必要的更新。同时，首次执行时，可能会执行一些不必要的逻辑。
3. watch：手动指定依赖的 "狙击手"
watch 允许我们手动指定需要监听的响应式数据，并提供更灵活的配置选项。它的特点是：
- 手动指定依赖：需要手动指定需要监听的响应式数据，可以是
ref、reactive对象、getter函数等。 - 延迟执行：默认情况下，
watch的回调函数只会在依赖项发生变化时执行。可以通过immediate选项来控制是否立即执行。 - 提供新值和旧值：
watch的回调函数会接收到新值和旧值，方便我们进行比较和处理。
我们可以用一个简单的例子来说明：
<template>
<div>
<p>Count: {{ count }}</p>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(0);
watch(
() => count.value, // 手动指定依赖
(newValue, oldValue) => {
console.log('Count changed:', newValue, oldValue);
},
{
immediate: true, // 立即执行
deep: false, // 不进行深度监听
}
);
// 每隔 1 秒增加 count 的值
setInterval(() => {
count.value++;
}, 1000);
</script>在这个例子中，我们使用 watch 监听 count.value 的变化，并手动指定了 immediate 选项为 true，表示立即执行回调函数。当 count.value 的值发生变化时，watch 的回调函数会被重新执行，并在控制台输出新的 count 和旧的 count 的值。
watch 的内部实现：
watch 的内部实现与 watchEffect 类似，也是创建一个 "副作用函数"，但是它的依赖收集方式有所不同。watch 不会自动追踪依赖，而是根据我们手动指定的依赖项来收集依赖。
简化版的 watch 实现：
function watch(source, cb, options = {}) {
let getter;
if (typeof source === 'function') {
getter = source;
} else {
getter = () => traverse(source); // 遍历 source，触发依赖收集
}
let oldValue;
let newValue;
let cleanupFn = null;
let active = true;
const job = () => {
if (!active) {
return;
}
if (cleanupFn) {
cleanupFn();
}
newValue = getter(); // 获取新值
if (newValue !== oldValue) {
cb(newValue, oldValue, () => {
cleanupFn = fn;
});
oldValue = newValue;
}
};
if (options.immediate) {
job();
oldValue = newValue;
} else {
oldValue = getter();
}
effect(job); // 使用 effect 包裹 job，触发依赖收集
return () => {
active = false;
};
}
// 递归遍历对象，触发依赖收集
function traverse(value) {
if (typeof value !== 'object' || value === null) {
return value;
}
for (const key in value) {
traverse(value[key]);
}
return value;
}
在这个简化版的 watch 实现中，如果 source 是一个对象，我们会使用 traverse 函数递归遍历该对象，从而触发依赖收集。如果 source 是一个 getter 函数，我们会直接执行该函数，从而触发依赖收集。
watch 的副作用清理：
watch 也提供了副作用清理机制，与 watchEffect 类似，也是通过回调函数中的第三个参数提供的 onInvalidate 函数来实现的。
watch 的优点和缺点：
- 优点：可以手动指定依赖，避免不必要的更新。提供新值和旧值，方便进行比较和处理。
- 缺点：需要手动指定依赖，比较繁琐。如果依赖项比较复杂，可能会遗漏依赖项，导致更新不正确。
4. watchEffect vs watch：选择困难症？
watchEffect 和 watch 都是用于监听响应式数据变化的 API，但它们的使用场景有所不同。
| 特性 | watchEffect |
watch |
|---|---|---|
| 依赖收集 | 自动追踪 | 手动指定 |
| 执行时机 | 立即执行 | 默认延迟执行，可以通过 immediate 选项立即执行 |
| 提供新旧值 | 不提供 | 提供 |
| 副作用清理 | 通过 onInvalidate 函数 |
通过回调函数中的第三个参数提供的 onInvalidate 函数 |
| 使用场景 | 适合简单的、需要自动追踪依赖的场景 | 适合需要手动指定依赖、需要比较新旧值、需要更灵活控制的场景 |
| 性能 | 可能存在不必要的依赖追踪，导致不必要的更新 | 可以更精确地控制依赖项，避免不必要的更新 |
| 代码可读性 | 在简单场景下代码简洁，复杂场景下可能难以理解依赖关系 | 代码可读性更高，可以清晰地看到依赖项 |
总结：
- 如果你的逻辑很简单，只需要监听几个简单的响应式数据，并且不需要比较新旧值，那么
watchEffect是一个不错的选择。 - 如果你的逻辑比较复杂，需要手动指定依赖，需要比较新旧值，或者需要更灵活的控制，那么
watch是一个更好的选择。
5. 总结
今天我们深入探讨了 Vue 3 中 watchEffect 和 watch 的依赖追踪和副作用清理机制。我们了解了 Vue 3 响应式系统的核心：依赖追踪，以及 track 和 trigger 函数的作用。我们还分析了 watchEffect 和 watch 的内部实现，以及它们各自的优缺点和使用场景。
希望今天的讲座能够帮助大家更好地理解 Vue 3 的响应式系统，并在实际开发中更加灵活地使用 watchEffect 和 watch。
感谢大家的参与！下次再见！