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

各位观众老爷，晚上好！今天咱们聊聊 Vue 3 源码里边 computed 属性的两个小秘密：dirty 标志和 lazy 属性。别看它们名字平平无奇，作用可大了去了，直接关系到你的 Vue 应用性能。咱们的目标是：搞懂它们是啥，怎么工作的，为啥能避免不必要的重复计算。

一、computed 属性是啥？为啥需要它？

先来个简单的回顾。 computed 属性，顾名思义，就是根据其他数据计算出来的一个属性。它的特点是：

缓存： 只要依赖的数据没变，computed 属性的值就保持不变，下次访问直接返回缓存结果，不用重新计算。
响应式： 依赖的数据变了，computed 属性会自动重新计算。

举个例子，假设我们有一个用户对象：

const user = reactive({
  firstName: '张',
  lastName: '三'
})

我们想显示用户的全名，可以这样写：

<template>
  <div>{{ fullName }}</div>
</template>

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

const user = reactive({
  firstName: '张',
  lastName: '三'
})

const fullName = computed(() => {
  console.log('fullName 重新计算了！')
  return user.firstName + user.lastName
})
</script>

在这个例子里，fullName 就是一个 computed 属性。当 user.firstName 或 user.lastName 发生变化时，fullName 会自动更新。

但是，问题来了：如果我们频繁访问 fullName，而且 user.firstName 和 user.lastName 没变，难道每次访问都要重新计算吗？这显然是没必要的。这就是 dirty 标志和 lazy 属性发挥作用的地方了。

二、dirty 标志：我变了，我变了！

dirty 标志是一个布尔值，用来标记 computed 属性是否需要重新计算。

dirty = true: 表示 computed 属性“脏”了，需要重新计算。
dirty = false: 表示 computed 属性是“干净”的，可以直接返回缓存结果。

简单来说，dirty 就像是一个“状态指示器”，告诉我们 computed 属性是否需要“洗澡”（重新计算）。

在 Vue 3 源码里，dirty 标志通常是在 computed 属性的 effect 函数（稍后会讲）中被修改的。当依赖的数据发生变化时，effect 函数会被触发，然后把 dirty 设置为 true。

三、lazy 属性：别急，等我需要的时候再说！

lazy 属性也是一个布尔值，用来控制 computed 属性的计算时机。

lazy = true: 表示 computed 属性是“懒加载”的，只有在第一次被访问时才会计算。
lazy = false: 表示 computed 属性是“立即加载”的，在创建时就会计算。

默认情况下，computed 属性是 lazy = true 的。也就是说，只有当你第一次访问 fullName 时，才会执行 computed 属性的回调函数，计算 fullName 的值。之后，只要 user.firstName 和 user.lastName 没变，就直接返回缓存结果。

四、源码剖析：dirty 和 lazy 的工作原理

为了更好地理解 dirty 和 lazy 的工作原理，我们来简单看一下 Vue 3 源码中 computed 属性的实现（简化版）：

function computed(getter) {
  let value // 缓存的值
  let dirty = true // 初始状态是“脏”的
  let effect // 响应式 effect

  const computedRef = {
    get value() {
      if (dirty) {
        // 需要重新计算
        value = effect.run() // 执行 getter 函数，计算新的值
        dirty = false // 计算完毕，标记为“干净”的
      }
      return value // 返回缓存的值
    }
  }

  effect = new ReactiveEffect(getter, () => {
    // scheduler 函数：当依赖的数据发生变化时触发
    dirty = true // 依赖数据变了，标记为“脏”的
  })

  return computedRef
}

class ReactiveEffect {
  constructor(fn, scheduler) {
    this.fn = fn // getter 函数
    this.scheduler = scheduler // scheduler 函数
    this.active = true // 标记 effect 是否激活
    this.deps = [] // 依赖的响应式对象
  }

  run() {
    if (!this.active) {
      return this.fn() // 如果 effect 不激活，直接执行 getter 函数
    }

    // ... 省略建立依赖关系的代码 ...

    try {
      activeEffect = this // 设置当前激活的 effect
      return this.fn() // 执行 getter 函数
    } finally {
      activeEffect = undefined // 清空当前激活的 effect
    }
  }

  stop() {
    if (this.active) {
      // ... 省略清除依赖关系的代码 ...
      this.active = false // 标记 effect 为不激活
    }
  }
}

代码解释：

computed(getter) 函数：
- 接收一个 getter 函数作为参数，这个 getter 函数就是用来计算 computed 属性的值的。
- 初始化 value（缓存的值）、dirty（初始为 true）和 effect（响应式 effect）。
- 返回一个 computedRef 对象，这个对象只有一个 value 属性，用来访问 computed 属性的值。
computedRef.value 的 get 方法：
- 首先检查 dirty 标志。
- 如果 dirty 为 true，表示需要重新计算，就调用 effect.run() 执行 getter 函数，计算新的值，并把 dirty 设置为 false。
- 最后返回缓存的值 value。
ReactiveEffect 类：
- 负责收集依赖和执行 getter 函数。
- constructor 接收 fn（getter 函数）和 scheduler（调度器函数）作为参数。
- run() 方法执行 getter 函数，并建立依赖关系。
- stop() 方法停止 effect，并清除依赖关系。
- scheduler 函数会在依赖的数据发生变化时被调用，它会把 dirty 设置为 true，通知 computed 属性需要重新计算。

工作流程：

初始化： 创建 computed 属性时，dirty 被设置为 true，表示需要重新计算。
第一次访问： 当第一次访问 computed 属性的 value 时，由于 dirty 为 true，所以会执行 effect.run()，计算新的值，并把 dirty 设置为 false。
缓存： 之后，只要依赖的数据没变，再次访问 computed 属性的 value 时，由于 dirty 为 false，所以直接返回缓存的值，不用重新计算。
依赖变化： 当依赖的数据发生变化时，scheduler 函数会被调用，它会把 dirty 设置为 true，通知 computed 属性需要重新计算。
重新计算： 下次访问 computed 属性的 value 时，由于 dirty 为 true，所以会重新计算。

总结一下：

属性/标志	作用
`dirty`	标记 `computed` 属性是否需要重新计算。 `true` 表示需要重新计算，`false` 表示可以直接返回缓存结果。
`lazy`	控制 `computed` 属性的计算时机。 `true` 表示只有在第一次被访问时才会计算，`false` 表示在创建时就会计算。默认情况下，`computed` 属性是 `lazy = true` 的。

五、lazy: false 的情况： eager computed

虽然默认情况下 computed 属性是 lazy = true 的，但我们也可以通过一些方式让它变成 lazy = false，也就是“立即加载”的 computed 属性。这种 computed 属性也被称为 "eager computed"。

在 Vue 3 的标准 API 中，并没有直接提供一个 lazy 选项来控制 computed 属性的加载时机。但是，我们可以通过一些技巧来实现类似的效果。

例如，我们可以手动调用 computed 属性的 value 属性，强制它立即计算：

<template>
  <div>{{ fullName }}</div>
</template>

<script setup>
import { reactive, computed, onMounted } from 'vue'

const user = reactive({
  firstName: '张',
  lastName: '三'
})

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

onMounted(() => {
  // 手动调用 fullName.value，强制立即计算
  fullName.value
})
</script>

在这个例子里，我们在 onMounted 钩子函数中手动调用了 fullName.value，这样 fullName 就会在组件挂载后立即计算。

啥时候用 lazy = false 呢？

一般来说，我们应该尽量使用默认的 lazy = true 的 computed 属性，因为它可以避免不必要的计算，提高性能。但是，在某些特殊情况下，lazy = false 也是有用的：

需要提前计算结果： 比如，我们需要在组件挂载之前就把 computed 属性的值传递给子组件，这时就需要使用 lazy = false。
副作用： 如果 computed 属性的 getter 函数有副作用（比如修改了其他数据），那么就需要使用 lazy = false，确保副作用能够及时执行。

六、总结：dirty 和 lazy 的意义

dirty 标志和 lazy 属性是 Vue 3 中 computed 属性实现高效缓存的关键。它们共同协作，实现了以下目标：

避免不必要的重复计算： 只有在依赖的数据发生变化时，才会重新计算 computed 属性的值。
延迟计算： 只有在第一次访问 computed 属性的值时，才会进行计算。
提高性能： 通过缓存和延迟计算，可以显著提高 Vue 应用的性能。

可以这样理解：

dirty 负责监控依赖变化，就像一个尽职尽责的“观察员”。
lazy 负责控制计算时机，就像一个精打细算的“会计师”。

它们俩一个负责“通知”，一个负责“执行”，配合默契，保证了 computed 属性的高效运行。

七、思考题：

如果一个 computed 属性依赖了另一个 computed 属性，那么 dirty 标志是如何传递的？
Vue 3 中是如何建立 computed 属性和依赖数据之间的依赖关系的？（提示：track 和 trigger 函数）
除了 dirty 标志和 lazy 属性，还有哪些因素会影响 computed 属性的性能？

希望今天的讲解对大家有所帮助！下次有机会再和大家聊聊 Vue 3 源码的其他有趣的部分。拜拜！

发表回复 取消回复

发表回复取消回复