Vue 3 Computed 属性的脏活累活：dirty 和 lazy 深度解析
大家好，我是老码，今天咱们来聊聊 Vue 3 computed 属性里藏着的两个小秘密：dirty 标志和 lazy 属性。 别看它们名字平平无奇，但它们可是 Computed 属性实现高效缓存、避免不必要计算的幕后功臣。
想象一下，你开了家奶茶店，computed 属性就像你的特调奶茶配方，而 dirty 和 lazy 就像你的库存管理系统。 如果每次有人点单，你都从头开始种茶、养奶牛，那得累死。 dirty 和 lazy 就是用来告诉你： “嘿，这个配方是不是需要更新了？”以及“嘿，现在是不是真的需要用到这个配方了？”。
咱们先从 dirty 标志开始说起。
dirty 标志： “我需要更新了！”
dirty 标志，顾名思义，就是“脏”的意思。 在 computed 属性的上下文中，它表示 computed 属性的缓存值是否需要更新。 如果 dirty 为 true，就说明依赖的数据发生了变化，缓存值已经过时，需要重新计算。 如果 dirty 为 false，就说明缓存值还是有效的，可以直接使用，避免重复计算。
简单来说，dirty 就像奶茶店的库存盘点员，他会时刻关注原料的变化。 如果牛奶过期了，或者珍珠用完了，他就标记 “配方脏了，需要更新了！”
在 Vue 3 源码中，dirty 标志通常是一个布尔值。 它会被保存在 computed 属性对应的 effect 实例中。 当 computed 属性的依赖项发生变化时，会触发 effect 的 scheduler 函数，scheduler 函数会将 dirty 标志设置为 true。
让我们看看简化版的源码：
// 简化版的 computed 实现
function computed(getter: Function, options?: { lazy?: boolean }) {
let value: any;
let dirty = true; // 初始状态是脏的，因为还没计算过
const effectFn = effect(getter, {
lazy: options?.lazy,
scheduler: () => {
if (!options?.lazy) { // 如果是 lazy，则只标记 dirty
dirty = true;
}
trigger(computedRef, "set"); // 触发依赖 computedRef 的 effect
},
});
const computedRef = {
get value() {
if (dirty) {
value = effectFn(); // 重新计算
dirty = false; // 计算完毕，标记为干净的
}
track(computedRef, "get"); // 收集依赖
return value;
},
set value(newValue: any) {
console.warn("Computed property is readonly.");
},
};
return computedRef;
}
// 简化版的 effect 实现，为了演示 scheduler
function effect(fn: Function, options?: any) {
const effectFn = () => {
try {
activeEffect = effectFn;
return fn();
} finally {
activeEffect = undefined;
}
};
if (!options?.lazy) {
effectFn(); // 立即执行一次，初始化 value
}
effectFn.scheduler = options?.scheduler;
return effectFn;
}
// 简化版的 track 和 trigger，为了演示依赖收集和触发
let activeEffect: any;
const targetMap = new WeakMap();
function track(target: any, key: any) {
if (activeEffect) {
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
}
let dep = depsMap.get(key);
if (!dep) {
dep = new Set();
depsMap.set(key, dep);
}
dep.add(activeEffect);
}
}
function trigger(target: any, key: any) {
const depsMap = targetMap.get(target);
if (!depsMap) {
return;
}
const dep = depsMap.get(key);
if (dep) {
dep.forEach((effectFn: any) => {
if (effectFn.scheduler) {
effectFn.scheduler(); // 执行 scheduler 函数
} else {
effectFn(); // 重新执行 effect
}
});
}
}在这个例子中，computed 函数接收一个 getter 函数作为参数，getter 函数就是 computed 属性的计算逻辑。 dirty 标志初始化为 true，表示 computed 属性的缓存值一开始是无效的。
effectFn 是一个 effect 实例，它会追踪 getter 函数中使用的依赖项。 当依赖项发生变化时，会触发 effectFn 的 scheduler 函数，scheduler 函数会将 dirty 标志设置为 true。
在 computed 属性的 get 方法中，会首先检查 dirty 标志。 如果 dirty 为 true，就说明需要重新计算 computed 属性的值，然后将 dirty 设置为 false，表示缓存值已经更新。
如果没有 dirty 标志，每次访问 computed 属性，都会重新计算，这显然是低效的。 有了 dirty 标志，只有在依赖项发生变化时，才会重新计算，大大提高了性能。
lazy 属性： “等等，先别急着做！”
lazy 属性是一个布尔值，用于控制 computed 属性的计算时机。 如果 lazy 为 true，则 computed 属性在首次被访问时才会进行计算。 如果 lazy 为 false（默认值），则 computed 属性在创建时就会立即进行计算。
lazy 就像奶茶店里的“预订单”功能。 如果顾客只是浏览菜单，还没决定要点什么，你当然不会急着开始做奶茶。 只有当顾客真正下单了，你才会开始制作。
在 Vue 3 源码中，lazy 属性会影响 effect 实例的创建和执行。 如果 lazy 为 true，则 effect 实例在创建时不会立即执行 getter 函数，而是等到 computed 属性被首次访问时才执行。 如果 lazy 为 false，则 effect 实例在创建时会立即执行 getter 函数，初始化 computed 属性的值。
让我们看看简化版的源码：
// 上面的 computed 函数，options 中包含了 lazy 属性
// 简化版的 effect 实现，为了演示 lazy
function effect(fn: Function, options?: any) {
const effectFn = () => {
try {
activeEffect = effectFn;
return fn();
} finally {
activeEffect = undefined;
}
};
if (!options?.lazy) {
effectFn(); // 立即执行一次，初始化 value
}
effectFn.scheduler = options?.scheduler;
return effectFn;
}在这个例子中，我们可以看到，在 effect 函数中，会根据 options?.lazy 的值来决定是否立即执行 effectFn。 如果 lazy 为 false，则会立即执行 effectFn，初始化 computed 属性的值。 如果 lazy 为 true，则不会立即执行 effectFn，而是等到 computed 属性被首次访问时才执行。
lazy 属性的一个重要应用场景是，当 computed 属性的计算量很大，或者依赖项很多，并且不一定会被立即使用时，可以使用 lazy 属性来延迟计算，避免浪费资源。
dirty 和 lazy 的配合： 天作之合
dirty 和 lazy 就像一对默契的搭档，它们共同协作，实现了 computed 属性的高效缓存和避免不必要的计算。
dirty负责标记缓存是否有效，lazy负责控制计算时机。lazy: false(默认值): 创建 computed 时立即计算，并一直缓存，直到依赖变更，dirty变为true，下次 get 时重新计算。lazy: true: 创建 computed 时不计算，只有第一次 get 时才计算，并一直缓存，直到依赖变更，dirty变为true，下次 get 时重新计算。
可以用一个表格来总结他们的关系：
| 属性 | 作用 | 影响 | 适用场景 |
|---|---|---|---|
dirty |
标记 computed 属性的缓存值是否需要更新 | 决定是否重新计算 computed 属性的值。true 时重新计算，false 时直接返回缓存值。 |
所有 computed 属性。 |
lazy |
控制 computed 属性的计算时机 | 决定 computed 属性是否在创建时立即计算。true 时延迟到首次访问时计算，false 时立即计算。 |
计算量大，依赖项多，且不一定会被立即使用的 computed 属性。例如，一个用于格式化大量数据的 computed 属性，如果用户没有立即查看这些数据，就可以使用 lazy 属性来延迟计算，节省资源。 |
实际例子： 购物车的总价计算
假设我们有一个购物车组件，需要计算购物车的总价。 购物车中的商品数量可能会频繁变化，但用户不一定会一直关注总价。 在这种情况下，我们可以使用 lazy 属性来延迟计算总价，避免每次商品数量变化都重新计算。
<template>
<div>
<ul>
<li v-for="item in cart" :key="item.id">
{{ item.name }} - {{ item.price }} x {{ item.quantity }}
</li>
</ul>
<p>总价：{{ totalPrice }}</p>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const cart = ref([
{ id: 1, name: '苹果', price: 5, quantity: 2 },
{ id: 2, name: '香蕉', price: 3, quantity: 3 },
]);
const totalPrice = computed(() => { // 这里可以添加 { lazy: true }
console.log("计算总价..."); // 观察计算时机
let total = 0;
for (const item of cart.value) {
total += item.price * item.quantity;
}
return total;
});
// 模拟修改购物车
setTimeout(() => {
cart.value[0].quantity = 3; // 修改苹果的数量
}, 2000);
return {
cart,
totalPrice,
};
},
};
</script>在这个例子中，totalPrice 是一个 computed 属性，用于计算购物车的总价。 如果没有 lazy: true，那么 totalPrice 会在组件创建时立即计算一次，然后在 cart 发生变化时再次计算。 如果添加了 lazy: true，那么 totalPrice 会在首次被访问时才进行计算，然后才会在 cart 发生变化时再次计算。
你可以尝试在 computed 函数中添加 { lazy: true }，观察控制台的输出，看看计算时机是否发生了变化。
总结： 掌握 dirty 和 lazy，成为 Vue 性能优化大师
dirty 标志和 lazy 属性是 Vue 3 computed 属性实现高效缓存和避免不必要计算的关键。 dirty 负责标记缓存是否有效，lazy 负责控制计算时机。 通过合理使用这两个特性，我们可以编写出更加高效的 Vue 应用。
记住，dirty 就像库存盘点员，lazy 就像预订单功能。 掌握了它们，你就能像管理奶茶店一样，轻松管理你的 computed 属性，优化你的 Vue 应用的性能。
今天就讲到这里，希望大家有所收获，下次再见！