Vue 3 Computed 属性的 Dirty Flag 和 Lazy 属性：一场关于效率的狂欢
各位观众老爷们，大家好！我是你们的老朋友，今天咱们来聊聊 Vue 3 源码中 computed 属性里的两个小秘密，但却能让你的 Vue 应用跑得飞快的关键人物：dirty 标志和 lazy 属性。
如果你写过 Vue 组件，肯定用过 computed 属性。它能根据响应式依赖自动计算出一个新值，并且只有在依赖发生变化时才会重新计算。但 Vue 到底是怎么知道什么时候该重新计算，什么时候该偷懒睡觉呢？ 这就得靠我们今天的主角 dirty 标志和 lazy 属性了。
准备好了吗？ 这将是一场关于效率的狂欢！
1. computed 属性的基本结构：一个有记忆的计算器
首先，让我们回顾一下 computed 属性的基本用法和结构。在 Vue 3 中，我们可以这样定义一个 computed 属性：
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
return {
count,
doubleCount
}
}
}在这个例子中，doubleCount 是一个 computed 属性，它的值是 count 的两倍。当 count 的值发生变化时，doubleCount 的值也会自动更新。
在 Vue 3 源码中，computed 属性会被封装成一个 ComputedRefImpl 类的实例。这个类负责管理 computed 属性的依赖、计算和缓存。它的基本结构大概是这样的：
class ComputedRefImpl<T> {
private _value!: T // 缓存的值
private _dirty = true // 是否需要重新计算的标志
private _effect: ReactiveEffect<T> // 负责计算的 effect
public readonly effect: ReactiveEffect<T> // expose effect so computed can be stopped (e.g. during testing)
public readonly __v_isRef = true
public readonly [ReactiveFlags.IS_READONLY]: boolean = true
constructor(
getter: ComputedGetter<T>,
private readonly _setter: ComputedSetter<T>,
isReadonly: boolean,
isSSR: boolean
) {
this._effect = new ReactiveEffect(getter, () => {
if (!this._dirty) {
this._dirty = true // 标记为 dirty，下次访问时重新计算
triggerRef(this) // 触发依赖更新
}
})
this._effect.computed = this
this._effect.active = this._cacheable = !isSSR
this[ReactiveFlags.IS_READONLY] = isReadonly
}
get value() {
// ... 访问 computed 属性时的逻辑
}
set value(newValue: T) {
// ... 设置 computed 属性时的逻辑
}
}可以看到，ComputedRefImpl 类中有几个关键的属性：
_value: 用来缓存计算结果。_dirty: 一个布尔值，表示computed属性是否“脏”了，也就是是否需要重新计算。_effect: 一个ReactiveEffect实例，负责执行计算函数（getter），并收集依赖。
2. dirty 标志：一个精明的守门员
dirty 标志是 computed 属性实现高效缓存的核心。它的作用就像一个精明的守门员，只有在必要的时候才允许重新计算。
-
初始状态： 当
computed属性第一次创建时，_dirty标志会被设置为true，表示需要进行第一次计算。 -
依赖更新： 当
computed属性的依赖发生变化时，_dirty标志会被设置为true。这是通过ReactiveEffect的 scheduler 函数实现的。 每次依赖更新都会执行scheduler函数，然后将_dirty设置为true。 -
访问属性： 当访问
computed属性的value时，会检查_dirty标志。- 如果
_dirty为true，表示需要重新计算，就执行计算函数，并将结果缓存到_value中，然后将_dirty设置为false。 - 如果
_dirty为false，表示已经缓存了最新的值，直接返回_value。
- 如果
让我们来看一下 ComputedRefImpl 的 get value() 方法的具体实现：
get value() {
if (this._dirty) {
this._dirty = false
this._value = this._effect.run()! // 执行计算函数，并缓存结果
}
return this._value
}可以看到，只有当 _dirty 为 true 时，才会执行 this._effect.run() 重新计算。
举个例子：
import { ref, computed } from 'vue'
export default {
setup() {
const a = ref(1)
const b = ref(2)
const sum = computed(() => {
console.log('计算 sum') // 只有在必要时才会输出
return a.value + b.value
})
// 初始状态，访问 sum.value 会触发计算
console.log(sum.value) // 输出: 计算 sum 3
// 修改 a 的值，sum 标记为 dirty
a.value = 3
// 再次访问 sum.value，会触发重新计算
console.log(sum.value) // 输出: 计算 sum 5
// 再次访问 sum.value，不会触发重新计算，直接返回缓存值
console.log(sum.value) // 输出: 5
return {
a,
b,
sum
}
}
}在这个例子中，只有在 a 或 b 的值发生变化时，才会重新计算 sum。如果没有变化，sum 会直接返回缓存的值，避免不必要的重复计算。
3. lazy 属性：一个可以选择延迟计算的懒人
lazy 属性允许我们选择是否立即计算 computed 属性的值。默认情况下，computed 属性是“非懒加载”的，也就是在第一次访问 value 属性时才会进行计算。
但是，我们可以通过设置 lazy 选项来创建一个“懒加载”的 computed 属性。 懒加载的 computed 属性只有在第一次访问 .value 时才会执行计算函数。
Vue 3 中并没有直接暴露 lazy 配置项，但是我们可以通过一些技巧来实现类似的效果。一种常见的做法是手动控制 dirty 标志：
import { ref, computed } from 'vue'
export default {
setup() {
const a = ref(1)
const b = ref(2)
let _sum: number | undefined;
const sum = computed(() => {
console.log('计算 sum');
return a.value + b.value
})
const lazySum = () => {
if(_sum === undefined){
_sum = sum.value;
}
return _sum;
}
// 初始状态，不会触发计算
console.log('初始化完成')
// 第一次访问 lazySum()，会触发计算
console.log(lazySum()) // 输出: 计算 sum 3
// 修改 a 的值
a.value = 4
// 再次访问 lazySum()，会触发重新计算
console.log(lazySum()) // 输出: 计算 sum 6
return {
a,
b,
sum,
lazySum
}
}
}在这个例子中，lazySum 函数充当了懒加载 computed 属性的角色。 只有在第一次调用 lazySum() 时，才会执行计算函数 sum.value。
什么时候应该使用 lazy 属性？
- 当
computed属性的计算量很大，并且不一定需要立即使用时。 - 当
computed属性的依赖项在组件初始化时还没有准备好时。
4. dirty 标志和 lazy 属性：珠联璧合，天下无敌
dirty 标志和 lazy 属性就像一对珠联璧合的搭档，共同为 computed 属性的高效缓存保驾护航。
dirty标志负责跟踪依赖的变化，确保只有在必要时才会重新计算。lazy属性允许我们选择延迟计算，避免不必要的初始化开销。
它们的配合使用，可以有效地减少 Vue 应用的计算量，提高性能。
5. 表格总结
为了方便大家理解，我们用一个表格来总结一下 dirty 标志和 lazy 属性的特点：
| 特性 | dirty 标志 |
lazy 属性 |
|---|---|---|
| 作用 | 标记 computed 属性是否需要重新计算 |
选择是否延迟计算 computed 属性的值 |
| 触发条件 | 依赖发生变化 | 第一次访问 value 属性时 |
| 实现方式 | ComputedRefImpl 类内部维护的布尔值 |
(Vue 3 默认不支持，但可以通过手动控制实现类似效果) |
| 默认行为 | 初始值为 true，依赖变化时设置为 true |
默认非懒加载，第一次访问 value 属性时立即计算 |
| 适用场景 | 所有 computed 属性 |
计算量大、不一定立即使用、依赖项初始化时未准备好的 computed 属性 |
6. 源码分析（片段）
让我们深入 Vue 3 源码，看看 dirty 标志和 ReactiveEffect 的 scheduler 函数是如何工作的。
以下是 ComputedRefImpl 类中 get value() 方法和 ReactiveEffect 的 scheduler 函数的简化版本：
// ComputedRefImpl.ts
class ComputedRefImpl<T> {
private _value!: T
private _dirty = true
private _effect: ReactiveEffect<T>
constructor(getter: ComputedGetter<T>, ...args) {
this._effect = new ReactiveEffect(getter, () => {
if (!this._dirty) {
this._dirty = true // 依赖更新时，标记为 dirty
triggerRef(this) // 触发依赖更新
}
})
}
get value() {
if (this._dirty) {
this._dirty = false
this._value = this._effect.run()! // 重新计算
}
trackRefValue(this)
return this._value
}
}
// effect.ts
class ReactiveEffect<T> {
computed?: ComputedRefImpl<T>
constructor(
public fn: () => T,
public scheduler: EffectScheduler | null = null,
) {}
run() {
activeEffect = this
try {
return this.fn() // 执行计算函数，并收集依赖
} finally {
activeEffect = undefined
}
}
}在这个简化版本中，我们可以看到：
ReactiveEffect的scheduler函数会在依赖更新时被调用，它会将ComputedRefImpl实例的_dirty标志设置为true。- 当访问
ComputedRefImpl实例的value属性时，会检查_dirty标志。如果为true，则执行ReactiveEffect的run()方法重新计算。
7. 总结：让你的 Vue 应用跑得更快！
今天我们深入剖析了 Vue 3 源码中 computed 属性的 dirty 标志和 lazy 属性的实现。 它们是实现高效缓存的关键，可以有效地避免不必要的重复计算，提高 Vue 应用的性能。
理解了这两个概念，你就能更好地利用 computed 属性，写出更高效的 Vue 代码。
记住，dirty 标志是精明的守门员，lazy 属性是可选的懒人。 善用它们，让你的 Vue 应用跑得更快！
今天的讲座就到这里，感谢大家的收听！ 希望大家下次再来，我们一起探索更多 Vue 的秘密！