阐述 Vue 3 源码中 `computed` 属性的 `dirty` 标志和 `lazy` 属性的实现，以及它们如何避免不必要的重复计算，实现高效缓存。

各位靓仔靓女们，晚上好！我是今晚的主讲人，很高兴能和大家一起聊聊 Vue 3 源码里那些"磨人的小妖精"——dirty 标志和 lazy 属性。它们在 computed 属性的实现中扮演着关键角色，是保证性能的关键。

今天这场讲座，咱们就来扒一扒这两个家伙的底裤，看看它们是怎么配合着避免不必要的重复计算，实现高效缓存的。准备好了吗？ Let’s dive in!

一、Computed 属性：一个需要被伺候好的“懒虫”

首先，我们得明确 computed 属性是个什么东西。简单来说，它就是一个基于其他响应式依赖项的值，根据你的逻辑计算得出的值。关键点在于：

响应式依赖： 它的值依赖于其他响应式数据（例如 ref 或 reactive 对象里的属性）。
缓存： 只有在依赖项发生改变时，它才会重新计算。否则，它会直接返回缓存的值。

这就像一个懒癌晚期患者，只有在你强制要求（访问它的值）或者它的“饭”（依赖项）变质了（依赖项改变）的时候，它才会勉为其难地动一动。

<template>
  <p>fullName: {{ fullName }}</p>
</template>

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('李');
const lastName = ref('四');

const fullName = computed(() => {
  console.log('fullName 重新计算了！');
  return firstName.value + lastName.value;
});

// 改变 firstName 的值
setTimeout(() => {
  firstName.value = '王'; // 会触发 fullName 重新计算
}, 2000);

// 改变 lastName 的值
setTimeout(() => {
  lastName.value = '五'; // 会触发 fullName 重新计算
}, 4000);

// 访问 fullName 的值
setTimeout(() => {
  console.log('访问 fullName: ', fullName.value); // 如果没有依赖项改变，不会重新计算
}, 6000);
</script>

在这个例子中，fullName 是一个 computed 属性，它依赖于 firstName 和 lastName。只有当 firstName 或 lastName 的值发生改变时，fullName 才会重新计算。如果在 firstName 和 lastName 的值没有改变的情况下访问 fullName，它会直接返回缓存的值，而不会重新计算。你会发现，'fullName 重新计算了！'只会在 firstName 和 lastName 发生改变时打印。

二、Dirty Flag：Computed 属性的“脏”标记

dirty 标志，顾名思义，就是用来标记 computed 属性是否“脏”的。这里的“脏”指的是它的缓存值是否需要更新。

dirty = true: 表示 computed 属性的依赖项发生了改变，需要重新计算。
dirty = false: 表示 computed 属性的依赖项没有改变，可以直接返回缓存的值。

这个 dirty 标志就像一个门卫，时刻监视着 computed 属性的依赖项。一旦发现任何依赖项发生了改变，它就会立刻把 dirty 标志设置为 true，通知 computed 属性该“洗澡”（重新计算）了。

源码剖析

在 Vue 3 源码中，computed 属性的实现通常涉及到 effect 函数。effect 函数会收集依赖项，并在依赖项发生改变时触发更新。当我们声明一个 computed 属性时，Vue 会创建一个 ReactiveEffect 实例，并将计算函数作为参数传递给它。这个 ReactiveEffect 实例负责：

收集依赖： 在首次执行计算函数时，收集该函数所依赖的所有响应式数据。
监听依赖变化： 当这些依赖项发生改变时，ReactiveEffect 会被触发。
设置 dirty 标志： ReactiveEffect 被触发后，会将 computed 属性的 dirty 标志设置为 true。

// 简化的 computed 实现
function computed(getter) {
  let value;
  let dirty = true; // 初始状态为 dirty，需要计算
  const effectFn = () => {
    if (!dirty) {
      dirty = true; // 依赖项改变，设置 dirty 标志
      trigger(computed, "set", 'value'); // 触发更新，通知依赖于 computed 的 effect
    }
  };

  const runner = effect(getter, {
    lazy: true,
    scheduler: effectFn,
  });

  return {
    get value() {
      if (dirty) {
        value = runner(); // 重新计算
        dirty = false; // 计算完成后，设置为 clean
      }
      track(computed, "get", 'value'); // 收集依赖
      return value;
    },
  };
}

// 一个简化的 effect 实现 (用于理解 computed 的依赖追踪)
function effect(fn, options = {}) {
  const effectFn = () => {
    activeEffect = effectFn; // 设置当前激活的 effect
    const res = fn(); // 执行函数，收集依赖
    activeEffect = null; // 重置
    return res;
  };

  if (!options.lazy) {
    effectFn(); // 立即执行
  } else {
    effectFn.scheduler = options.scheduler;
  }
  return effectFn;
}

// 简化的依赖追踪
let activeEffect = null;

function track(target, type, key) {
  if (activeEffect) {
    // 收集依赖
    // 这里省略了具体的依赖收集逻辑
    // 简单来说，就是将 activeEffect 关联到 target[key] 上
  }
}

function trigger(target, type, key) {
  // 触发更新
  // 这里省略了具体的更新逻辑
  // 简单来说，就是找到依赖于 target[key] 的所有 effect，并执行它们的 scheduler
}

// 示例用法
const firstName = reactive({ value: '李' });
const lastName = reactive({ value: '四' });

const fullName = computed(() => {
  console.log('fullName 重新计算了！');
  return firstName.value + lastName.value;
});

console.log(fullName.value); // 首次访问，会重新计算
console.log(fullName.value); // 再次访问，直接返回缓存值，不会重新计算

firstName.value = '王'; // 改变 firstName 的值，会触发 fullName 的 dirty 标志设置为 true

console.log(fullName.value); // 再次访问，会重新计算

代码解释：

computed(getter): computed 函数接收一个 getter 函数，这个 getter 函数就是我们的计算逻辑。
dirty = true: 初始状态下，dirty 标志被设置为 true，表示 computed 属性需要进行首次计算。
effect(getter, { lazy: true, scheduler: effectFn }): 使用 effect 函数创建一个 ReactiveEffect 实例。
- lazy: true：表示这个 ReactiveEffect 实例不会立即执行，而是在需要的时候才执行。
- scheduler: effectFn：指定一个调度器函数。当依赖项发生改变时，ReactiveEffect 不会立即重新执行计算函数，而是会调用这个调度器函数。
effectFn (调度器函数): 当依赖项发生改变时，这个调度器函数会被调用。它的作用是将 dirty 标志设置为 true，并触发更新。
get value(): 当访问 computed 属性的值时，会执行这个 getter 函数。
- if (dirty)：如果 dirty 标志为 true，表示需要重新计算。
- value = runner()：调用 runner 函数（也就是 effectFn）重新计算 computed 属性的值。
- dirty = false：计算完成后，将 dirty 标志设置为 false，表示已经是最新的值了。
- track(computed, "get", 'value')：收集依赖，以便在 computed 属性的值被其他响应式数据使用时，能够建立依赖关系。
- return value：返回计算后的值。

三、Lazy 属性：Computed 属性的“拖延症”

lazy 属性决定了 computed 属性是否立即进行计算。

lazy = true (默认值): 表示 computed 属性不会立即进行计算，而是在首次访问它的值时才进行计算。这就是所谓的“延迟计算”。
lazy = false: (不常用) 表示 computed 属性会立即进行计算。

lazy 属性就像一个闹钟，决定了 computed 属性什么时候起床干活。默认情况下，computed 属性会睡到你第一次叫它起床（访问它的值）的时候才开始工作。

源码剖析

在上面的代码中，我们可以看到，effect 函数的 options 参数中包含了 lazy: true。这表示我们创建的 ReactiveEffect 实例是延迟执行的。

const runner = effect(getter, {
  lazy: true,
  scheduler: effectFn,
});

正是因为 lazy: true，所以计算函数 getter 不会在 computed 属性创建的时候立即执行。只有当我们第一次访问 fullName.value 时，才会触发 runner() 函数，从而执行计算函数。

四、Dirty Flag + Lazy：最佳拍档，高效缓存

dirty 标志和 lazy 属性是 computed 属性实现高效缓存的关键。它们就像一对配合默契的搭档，共同保证了 computed 属性只在必要的时候才进行计算。

特性	`dirty` 标志	`lazy` 属性
作用	标记 `computed` 属性是否需要重新计算	决定 `computed` 属性是否立即进行计算
取值	`true` (需要重新计算), `false` (不需要重新计算)	`true` (延迟计算), `false` (立即计算)
触发条件	依赖项发生改变	首次访问 `computed` 属性的值
如何避免重复计算	只有在 `dirty` 为 `true` 时才重新计算	避免在 `computed` 属性创建时立即进行计算，而是延迟到首次访问时才计算

工作流程

初始化： computed 属性创建时，dirty 标志被设置为 true，lazy 属性被设置为 true (默认值)。
首次访问： 首次访问 computed 属性的值时，由于 lazy 为 true，所以会触发计算函数，并将 dirty 标志设置为 false。
依赖项改变： 当 computed 属性的依赖项发生改变时，dirty 标志会被设置为 true。
再次访问： 再次访问 computed 属性的值时，会检查 dirty 标志。
- 如果 dirty 为 true，则重新计算，并将 dirty 标志设置为 false。
- 如果 dirty 为 false，则直接返回缓存的值，而不会重新计算。

通过这种机制，computed 属性能够避免不必要的重复计算，从而提高性能。只有在依赖项发生改变，并且 computed 属性的值被访问时，才会进行重新计算。

五、一个更复杂的例子：

<template>
  <p>fullName: {{ fullName }}</p>
  <p>message: {{ message }}</p>
  <button @click="incrementAge">增加年龄</button>
</template>

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('李');
const lastName = ref('四');
const age = ref(30);

const fullName = computed(() => {
  console.log('fullName 重新计算了！');
  return firstName.value + lastName.value;
});

const message = computed(() => {
  console.log('message 重新计算了！');
  return `Hello, ${fullName.value}! You are ${age.value} years old.`;
});

function incrementAge() {
  age.value++;
}

// 改变 firstName 的值
setTimeout(() => {
  firstName.value = '王';
}, 2000);

// 改变 lastName 的值
setTimeout(() => {
  lastName.value = '五';
}, 4000);

// 访问 message 的值
setTimeout(() => {
  console.log('访问 message: ', message.value);
}, 6000);
</script>

在这个例子中，message 依赖于 fullName 和 age。 fullName 又依赖于 firstName 和 lastName。当 firstName 或 lastName 改变时，fullName 的 dirty 标志会被设置为 true。由于 message 依赖于 fullName，所以 message 的 dirty 标志也会被设置为 true。当 age 改变时，message 的 dirty 标志也会被设置为 true。

只有在访问 message.value 时，才会触发 message 的重新计算，并且会递归地触发 fullName 的重新计算（如果 fullName 的 dirty 标志为 true）。

六、总结

dirty 标志和 lazy 属性是 Vue 3 中 computed 属性实现高效缓存的两个关键特性。

dirty 标志用于标记 computed 属性是否需要重新计算。
lazy 属性用于决定 computed 属性是否立即进行计算。

通过它们的配合，computed 属性能够避免不必要的重复计算，从而提高性能。

记住，掌握了这两个概念，下次再遇到 computed 属性相关的性能问题，你就可以自信地说： "小样，还想逃出我的手掌心？"

好了，今天的讲座就到这里。希望大家有所收获！有问题可以随时提问，咱们一起探讨。下课！

发表回复 取消回复

发表回复取消回复