各位观众，晚上好！我是你们的老朋友，Bug终结者。今天咱们聊聊Vue 3里一个挺有意思的概念：DeferredEffect，这玩意儿在computed和watch里可是发挥着重要作用，简单说，就是让副作用延迟执行的幕后黑手。准备好了吗？咱们发车！
一、副作用是个什么鬼？为啥要延迟它？
在开始之前，咱们得先搞清楚啥是“副作用”。别想歪了，这儿说的副作用可不是吃了药拉肚子那种，而是指函数或者表达式，除了返回值之外，还会改变程序的状态。
举个栗子：
let a = 1;
function incrementA() {
a++; // 这就是个副作用，它改变了外部变量 a 的值
return a;
}
console.log(incrementA()); // 输出 2
console.log(a); // 输出 2在这个例子里，incrementA函数除了返回a的值之外，还改变了全局变量a的值。这就是个典型的副作用。
在Vue里，组件的状态变化、DOM更新、发送网络请求等等，都是副作用。
那为啥要延迟执行副作用呢？
想象一下，如果你在一个循环里多次修改一个响应式数据，每次修改都立即触发DOM更新，那浏览器不得卡死？延迟执行副作用，可以把多次修改合并成一次更新，提高性能。
再比如，watch监听一个值，如果这个值在同一个事件循环里多次变化，我们可能只关心最终的值，而不是中间过程的值。延迟执行watch的回调，可以避免不必要的计算和执行。
二、DeferredEffect：延迟副作用的秘密武器
DeferredEffect并不是Vue 3源码中直接暴露的一个类或接口，而是一种实现延迟执行副作用的策略。它主要体现在computed和watch的实现中，使用了类似于“调度器”的机制。
简单来说，就是把要执行的副作用先放到一个队列里，等到合适的时机（比如当前事件循环结束），再统一执行。
三、computed：只在需要的时候才计算
computed属性是Vue里一个非常常用的功能，它可以根据其他响应式数据计算出一个新的值。关键在于，这个计算过程并不是立即进行的，而是延迟到真正需要这个值的时候才执行。
咱们先看一个简单的computed例子：
<template>
<p>A: {{ a }}</p>
<p>B: {{ b }}</p>
<p>Sum: {{ sum }}</p>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const a = ref(1);
const b = ref(2);
const sum = computed(() => {
console.log("Calculating sum..."); // 只有在 sum 被访问时才会执行
return a.value + b.value;
});
setTimeout(() => {
a.value = 10;
}, 1000);
return {
a,
b,
sum,
};
},
};
</script>在这个例子里，sum是一个computed属性，它的值依赖于a和b。但是，只有在template里使用sum的时候，才会触发sum的计算。而且，即使a的值发生了变化（1秒后），sum的计算也不会立即执行，而是等到下一次访问sum的时候才会重新计算。
computed背后的机制：
- 依赖收集： 当第一次访问
sum的时候，Vue会追踪到sum的计算函数依赖于a和b。 - 缓存：
sum的值会被缓存起来。 - 失效： 当
a或b的值发生变化时，sum会被标记为“失效”。 - 延迟计算： 下一次访问
sum的时候，如果sum已经被标记为“失效”，则会重新执行计算函数，更新缓存的值。
computed的源码简化版：
虽然真正的源码很复杂，但我们可以用一个简化的版本来理解computed的实现原理：
class Ref {
constructor(value) {
this._value = value;
this.dep = new Set(); // 用于存储依赖于这个 Ref 的 Effect
}
get value() {
track(this); // 追踪依赖
return this._value;
}
set value(newValue) {
this._value = newValue;
trigger(this); // 触发依赖更新
}
}
function ref(value) {
return new Ref(value);
}
let activeEffect = null; // 当前正在执行的 Effect
function track(ref) {
if (activeEffect) {
ref.dep.add(activeEffect);
}
}
function trigger(ref) {
ref.dep.forEach(effect => effect.run());
}
class ComputedRefImpl {
constructor(getter) {
this.getter = getter;
this._value = undefined;
this._dirty = true; // 标记是否需要重新计算
this.effect = new ReactiveEffect(getter, () => {
if (!this._dirty) {
this._dirty = true;
}
});
}
get value() {
if (this._dirty) {
this._value = this.effect.run();
this._dirty = false;
}
return this._value;
}
}
class ReactiveEffect {
constructor(fn, scheduler) {
this.fn = fn;
this.scheduler = scheduler;
}
run() {
activeEffect = this;
const result = this.fn();
activeEffect = null;
return result;
}
}
function computed(getter) {
return new ComputedRefImpl(getter);
}
// 示例
const a = ref(1);
const b = ref(2);
const sum = computed(() => {
console.log("Calculating sum...");
return a.value + b.value;
});
console.log("Initial sum:", sum.value); // 第一次访问，计算 sum 的值
a.value = 10; // 修改 a 的值，sum 被标记为失效
console.log("Sum after a changed:", sum.value); // 再次访问，重新计算 sum 的值这个简化版的代码展示了computed的核心机制：
Ref类用于创建响应式数据。ReactiveEffect类用于封装计算函数和调度器。ComputedRefImpl类用于管理computed属性的计算和缓存。
关键在于ComputedRefImpl的get value()方法，它会检查_dirty标志，如果为true，则重新计算computed属性的值。而ReactiveEffect的scheduler选项，则负责在依赖发生变化时，将_dirty标志设置为true，从而实现延迟计算。
表格总结computed的特点：
| 特点 | 描述 |
|---|---|
| 缓存机制 | computed属性的值会被缓存，只有当依赖发生变化时才会重新计算。 |
| 延迟计算 | computed属性的计算是延迟的，只有在真正需要这个值的时候才会执行。 |
| 依赖追踪 | computed属性会自动追踪依赖的响应式数据，当依赖发生变化时，computed属性会被标记为失效。 |
| 性能优化 | computed属性可以避免不必要的计算，提高性能。 |
| 适用场景 | 适用于根据其他响应式数据计算出一个新的值的场景，例如：计算总价、格式化日期等等。 |
与watch区别 |
computed主要用于计算派生数据，并同步地返回结果。而watch主要用于监听数据的变化，并异步地执行回调函数。computed是同步的，watch是异步的。 |
四、watch：监听变化，但别急着行动
watch用于监听一个或多个响应式数据的变化，并在变化时执行回调函数。与computed不同的是，watch的回调函数是异步执行的，也就是说，当数据发生变化时，回调函数并不会立即执行，而是会等到当前事件循环结束之后再执行。
咱们先看一个简单的watch例子：
<template>
<p>Count: {{ count }}</p>
</template>
<script>
import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log("Count changed from", oldValue, "to", newValue);
});
setInterval(() => {
count.value++;
}, 1000);
return {
count,
};
},
};
</script>在这个例子里，watch监听了count的变化，每当count的值发生变化时，就会执行回调函数。但是，由于setInterval每隔1秒钟就会修改count的值，如果watch的回调函数是同步执行的，那么控制台会每秒钟输出一条日志。而实际上，控制台只会每隔一段时间输出一条日志，这就是因为watch的回调函数是异步执行的。
watch背后的机制：
- 依赖收集：
watch会追踪监听的响应式数据。 - 调度器： 当监听的响应式数据发生变化时，
watch会将回调函数放到一个队列里。 - 刷新队列： 在当前事件循环结束之后，Vue会执行队列里的所有回调函数。
watch的源码简化版：
//（前面Ref, ref, track, trigger 保持不变）
// 模拟一个 nextTick
const nextTick = (fn) => Promise.resolve().then(fn);
class WatchEffect {
constructor(source, cb) {
this.source = source;
this.cb = cb;
this.getter = typeof source === 'function' ? source : () => source.value; // 确保 source 是一个函数，可以访问到响应式数据
this.value = this.getter(); // 初始值
this.scheduler = () => {
this.queueJob();
};
this.dirty = false;
this.queue = new Set(); // 存储待执行的回调函数
this.run(); // 立即执行一次，收集依赖
}
run() {
activeEffect = this;
const newValue = this.getter();
activeEffect = null;
if (newValue !== this.value || typeof newValue === 'object') {
const oldValue = this.value;
this.value = newValue;
this.cb(newValue, oldValue);
}
}
queueJob() {
if (!this.dirty) {
this.dirty = true;
nextTick(() => { // 模拟 nextTick
this.run();
this.dirty = false;
});
}
}
}
function watch(source, cb) {
new WatchEffect(source, cb);
}
// 示例
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log("Count changed from", oldValue, "to", newValue);
});
count.value++;
count.value++;
count.value++; // 多次修改 count 的值
这个简化版的代码展示了watch的核心机制：
WatchEffect类用于封装监听的响应式数据和回调函数。scheduler选项负责在依赖发生变化时，将回调函数放到队列里。nextTick函数用于在当前事件循环结束之后，执行队列里的所有回调函数。
关键在于WatchEffect的queueJob方法，它使用了nextTick函数，将回调函数的执行延迟到下一个事件循环。
表格总结watch的特点：
| 特点 | 描述 |
|---|---|
| 异步执行 | watch的回调函数是异步执行的，会在当前事件循环结束之后执行。 |
| 依赖追踪 | watch会自动追踪监听的响应式数据，当依赖发生变化时，会执行回调函数。 |
| 灵活性 | watch可以监听单个响应式数据、多个响应式数据、甚至是一个返回响应式数据的函数。 |
| 适用场景 | 适用于监听数据的变化，并执行一些副作用的场景，例如：发送网络请求、更新DOM、保存数据等等。 |
与computed区别 |
computed主要用于计算派生数据，并同步地返回结果。而watch主要用于监听数据的变化，并异步地执行回调函数。 |
immediate选项 |
watch 可以通过设置 immediate: true 选项，使其在组件初始化时立即执行一次回调函数。这在某些场景下非常有用，比如需要在组件加载时立即加载某些数据。 |
五、总结：DeferredEffect的精髓
DeferredEffect并不是一个具体的名字，它代表的是一种延迟执行副作用的策略。在Vue 3里，computed和watch都使用了这种策略，通过调度器和队列，将副作用的执行延迟到合适的时机，从而提高性能和避免不必要的计算。
computed： 延迟计算，缓存结果，只在需要的时候才更新。watch： 异步执行回调函数，避免在同一个事件循环里多次执行。
理解了DeferredEffect的原理，就能更好地理解Vue 3的响应式系统的运作方式，写出更高效、更健壮的代码。
六、一些小贴士
- 避免在
computed里执行副作用：computed主要用于计算派生数据，不应该执行副作用。如果需要执行副作用，应该使用watch。 - 合理使用
watch的deep选项：watch的deep选项可以监听对象内部属性的变化，但是会带来性能损耗。只有在确实需要监听对象内部属性的变化时，才应该使用deep选项。 - 注意
watch的执行时机：watch的回调函数是异步执行的，因此不能依赖回调函数的立即执行结果。
好了，今天的讲座就到这里。希望大家有所收获，以后写Vue代码的时候，也能更加得心应手。记住，Bug终结者永远和你在一起！我们下次再见！