好的，各位观众老爷，今天咱们来聊聊 Vue 3 里 computed 的神奇之处，特别是它的 lazy 和 dirty 机制。别担心，我尽量用大白话，保证你们听得懂，看得开心。
开场白：computed 的烦恼
话说，咱们用 Vue 做项目，computed 属性那可是老朋友了。它可以根据其他响应式数据计算出一个新值，而且还会自动缓存。看起来很美好，对不对？
但是，如果 computed 属性的依赖项变化很频繁，而我们又不需要每次都立即更新 computed 的值，那就会造成不必要的性能浪费。 就像你辛辛苦苦做了一桌子菜，结果客人还没来，菜都凉了！
Vue 3 针对这个问题，引入了 lazy 和 dirty 机制，让 computed 属性变得更加智能，更加高效。
lazy：迟来的爱
lazy，顾名思义，就是“懒”。它表示 computed 属性在初始化的时候，不会立即计算值，而是等到第一次被访问的时候才计算。
这就像一个“懒加载”的图片，只有当它出现在用户的视窗中时，才会真正加载。
源码探秘：lazy 的身影
在 Vue 3 的源码中，computed 属性的实现依赖于一个 ReactiveEffect 对象。这个对象负责追踪依赖项，并在依赖项变化时触发重新计算。
当 computed 属性被创建时，如果设置了 lazy: true，那么 ReactiveEffect 对象就会被设置为“懒模式”。也就是说，它的 run 方法不会立即执行，而是等到 computed 属性被访问时才执行。
// packages/reactivity/src/computed.ts
class ComputedRefImpl<T> {
private _value!: T
private _dirty = true // 初始状态是脏的，需要计算
private _effect: ReactiveEffect<T>
constructor(
getter: ComputedGetter<T>,
private readonly _setter: ComputedSetter<T>,
isReadonly: boolean,
isLazy: boolean // 是否是懒加载
) {
this._effect = new ReactiveEffect(getter, () => {
if (!this._dirty) {
this._dirty = true // 依赖项变化，标记为脏
trigger(toRaw(this), TriggerOpTypes.SET, 'value') // 触发更新
}
})
this._effect.computed = this
this._effect.active = this._active = !isLazy // 如果不是懒加载，则立即激活 effect
}
get value() {
if (this._dirty) {
this._dirty = false // 计算前标记为不脏
this._value = this._effect.run()! // 执行 effect，计算值
}
track(toRaw(this), TrackOpTypes.GET, 'value') // 追踪依赖
return this._value
}
//...setter相关代码
}从上面的代码可以看出：
_dirty属性：初始值为true，表示computed属性的值是“脏”的，需要重新计算。_effect.active = !isLazy: 如果isLazy为true，则_effect.active为false，这意味着 effect 不会立即激活，也就不会立即执行getter函数。get value()：只有当_dirty为true时，才会执行this._effect.run()，从而计算computed属性的值。
实例演示：lazy 的威力
<template>
<div>
<p>Counter: {{ counter }}</p>
<p>Double Counter: {{ doubleCounter }}</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const counter = ref(0);
const doubleCounter = computed(() => {
console.log('Calculating doubleCounter...');
return counter.value * 2;
}, { lazy: true });
setInterval(() => {
counter.value++;
}, 1000);
</script>在这个例子中，doubleCounter 是一个 lazy 的 computed 属性。即使 counter 的值不断变化，控制台也不会立即输出 "Calculating doubleCounter…"。只有当我们访问 doubleCounter 的值时，才会触发计算。
dirty：及时止损
dirty，就是“脏”。它表示 computed 属性的值已经过期，需要重新计算。
当 computed 属性的依赖项发生变化时，Vue 会将 computed 属性标记为 dirty。但是，它并不会立即重新计算 computed 属性的值，而是等到下次访问 computed 属性时才计算。
这就像一个“缓存失效”的机制，只有当缓存的数据过期时，才会重新从原始数据源中获取。
源码探秘：dirty 的痕迹
在上面的 ComputedRefImpl 类中，我们可以看到 _dirty 属性的身影。
当 computed 属性的依赖项变化时，ReactiveEffect 对象的 scheduler 会被触发。这个 scheduler 会将 _dirty 属性设置为 true，表示 computed 属性的值已经过期。
// packages/reactivity/src/computed.ts
class ComputedRefImpl<T> {
//...省略其他代码
constructor(
getter: ComputedGetter<T>,
private readonly _setter: ComputedSetter<T>,
isReadonly: boolean,
isLazy: boolean
) {
this._effect = new ReactiveEffect(getter, () => {
if (!this._dirty) {
this._dirty = true // 依赖项变化，标记为脏
trigger(toRaw(this), TriggerOpTypes.SET, 'value') // 触发更新
}
})
this._effect.computed = this
this._effect.active = this._active = !isLazy
}
//...省略其他代码
}实例演示：dirty 的妙用
<template>
<div>
<p>Counter: {{ counter }}</p>
<p>Double Counter: {{ doubleCounter }}</p>
<button @click="logDoubleCounter">Log Double Counter</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const counter = ref(0);
const doubleCounter = computed(() => {
console.log('Calculating doubleCounter...');
return counter.value * 2;
});
setInterval(() => {
counter.value++;
}, 1000);
const logDoubleCounter = () => {
console.log('Double Counter:', doubleCounter.value);
};
</script>在这个例子中，doubleCounter 是一个非 lazy 的 computed 属性。counter 的值不断变化，doubleCounter 会被标记为 dirty。但是，只有当我们点击 "Log Double Counter" 按钮时，才会真正触发计算，并在控制台输出 "Calculating doubleCounter…"。
lazy + dirty：珠联璧合
lazy 和 dirty 机制可以一起使用，发挥更大的威力。
如果 computed 属性既是 lazy 的，又是 dirty 的，那么它在初始化的时候不会立即计算值，并且只有在被访问时才会计算，并且只有在依赖项变化后才会重新计算。
这就像一个“按需更新”的缓存，只有在真正需要的时候才会加载数据，并且只有在数据过期的时候才会重新加载。
实例演示：lazy + dirty 的完美结合
<template>
<div>
<p>Counter: {{ counter }}</p>
<p>Double Counter: {{ doubleCounter }}</p>
<button @click="logDoubleCounter">Log Double Counter</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const counter = ref(0);
const doubleCounter = computed(() => {
console.log('Calculating doubleCounter...');
return counter.value * 2;
}, { lazy: true });
setInterval(() => {
counter.value++;
}, 1000);
const logDoubleCounter = () => {
console.log('Double Counter:', doubleCounter.value);
};
</script>在这个例子中，doubleCounter 既是 lazy 的，又是 dirty 的。
- 在页面加载时，控制台不会输出 "Calculating doubleCounter…"。
counter的值不断变化，doubleCounter会被标记为dirty，但不会立即重新计算。- 只有当我们点击 "Log Double Counter" 按钮时，才会第一次触发计算，并在控制台输出 "Calculating doubleCounter…"。
- 此后，每次点击 "Log Double Counter" 按钮，如果
counter的值没有发生变化，控制台就不会输出 "Calculating doubleCounter…"。只有当counter的值发生变化后，再次点击 "Log Double Counter" 按钮，才会重新计算doubleCounter的值。
总结：lazy 和 dirty 的优势
| 特性 | lazy |
dirty |
|---|---|---|
| 含义 | 延迟计算 | 脏检查 |
| 作用 | 避免初始化时的不必要计算 | 避免依赖项变化时的立即重新计算 |
| 适用场景 | computed 属性的计算成本很高，且不一定立即需要时 |
computed 属性的依赖项变化频繁，但不需要每次都立即更新时 |
总而言之，lazy 和 dirty 机制是 Vue 3 中 computed 属性的两个重要的优化手段。它们可以帮助我们避免不必要的重复计算，提高应用的性能。
进阶思考：scheduler 的作用
在上面的源码分析中，我们提到了 ReactiveEffect 对象的 scheduler 属性。这个属性是一个函数，它会在 computed 属性的依赖项发生变化时被调用。
scheduler 的作用不仅仅是将 computed 属性标记为 dirty。它还可以用来实现更复杂的逻辑，例如：
- 延迟更新：我们可以使用
scheduler来延迟computed属性的更新，例如，只在一段时间内没有新的依赖项变化时才更新。 - 批量更新：我们可以使用
scheduler来批量更新多个computed属性，从而减少更新的次数。
这些高级用法可以让我们更加灵活地控制 computed 属性的行为，从而进一步优化应用的性能。
最后的叮嘱：合理使用
虽然 lazy 和 dirty 机制可以帮助我们优化 computed 属性的性能，但是它们并不是万能的。
在实际开发中，我们需要根据具体的场景，合理地使用这些机制。
- 如果
computed属性的计算成本很低，并且需要立即更新，那么就不需要使用lazy和dirty机制。 - 如果
computed属性的计算成本很高，并且不一定立即需要，那么可以使用lazy机制来延迟计算。 - 如果
computed属性的依赖项变化频繁，但不需要每次都立即更新，那么可以使用dirty机制来避免不必要的重复计算。
总之，只有合理地使用 lazy 和 dirty 机制，才能真正发挥它们的优势，提高应用的性能。
好了，今天的讲座就到这里。希望大家能够从中受益，并在实际开发中灵活运用 lazy 和 dirty 机制，写出更加高效的 Vue 应用。
如果大家还有什么问题，欢迎随时提问。谢谢大家！