探讨 Vue 3 源码中 `computed` 属性的 `dirty` 标志和 `lazy` 属性的实现，以及它如何避免不必要的重复计算。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊 Vue 3 源码里一个特别有意思的玩意儿：computed 属性的 dirty 标志和 lazy 属性。

说实话，computed 属性大家天天用，但是背后的实现，特别是这个 dirty 和 lazy，很多人可能只是“知道有这么回事”，但真要说清楚，就有点挠头了。别怕，今天我就带大家扒开 Vue 3 的源码，看看它到底是怎么用这两个宝贝疙瘩来避免不必要的重复计算，让我们的应用跑得飞快的。

开场白：computed 属性是个啥？

首先，咱们得明确一下，computed 属性是干啥的。简单来说，它就是一个依赖于其他响应式数据的值，当这些依赖发生变化时，它会自动更新。

举个例子：

<template>
  <p>Full Name: {{ fullName }}</p>
  <input v-model="firstName">
  <input v-model="lastName">
</template>

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

export default {
  setup() {
    const firstName = ref('张');
    const lastName = ref('三');

    const fullName = computed(() => {
      console.log('Calculating full name...'); // 观察计算行为
      return firstName.value + ' ' + lastName.value;
    });

    return {
      firstName,
      lastName,
      fullName,
    };
  },
};
</script>

在这个例子里，fullName 就是一个 computed 属性，它的值依赖于 firstName 和 lastName。当我们修改 firstName 或 lastName 的值时，fullName 会自动更新。

问题来了：不必要的计算！

但是，如果我们不小心，computed 属性可能会进行不必要的重复计算。比如，如果我们在模板中只使用了 fullName 一次，但是 firstName 和 lastName 在很短的时间内连续变化了多次，那么 fullName 就会被计算多次，而实际上我们只需要最后一次的结果。

这就像我们去买菜，刚到菜市场门口，突然想起忘了带钱包，回家拿了钱包再回来，又发现忘了带购物袋，再回家拿购物袋。这样跑来跑去，累个半死，实际上只买了一次菜。

Vue 3 为了解决这个问题，引入了 dirty 标志和 lazy 属性。

dirty 标志：我知道你该更新了！

dirty 标志是一个布尔值，用来表示 computed 属性是否需要重新计算。当 computed 属性的依赖发生变化时，dirty 标志会被设置为 true，表示这个 computed 属性“脏了”，需要重新计算。

我们可以把 dirty 标志想象成一个“待办事项”的标签。当 computed 属性的依赖发生变化时，我们就给它贴上一个“待办事项”的标签，告诉它：“嘿，哥们，你该更新了！”

lazy 属性：等等，我还没用呢！

lazy 属性是一个布尔值，用来表示 computed 属性是否是“懒加载”的。如果 lazy 为 true，那么 computed 属性只有在第一次被访问时才会进行计算。

我们可以把 lazy 属性想象成一个“懒人模式”。如果开启了“懒人模式”，那么 computed 属性就会等到我们真正需要它的时候才开始工作，而不是一上来就忙着计算。

源码剖析：dirty 和 lazy 的实现

接下来，咱们就深入 Vue 3 的源码，看看 dirty 和 lazy 是怎么实现的。

首先，我们来看一下 computed 函数的实现（简化版）：

function computed(getterOrOptions, debugOptions) {
  let getter;
  let setter;

  const isReadonly = isFunction(getterOrOptions);

  if (isReadonly) {
    getter = getterOrOptions;
    setter = () => {
      console.warn('Write operation failed: computed value is readonly');
    };
  } else {
    getter = getterOrOptions.get;
    setter = getterOrOptions.set;
  }

  let value;
  let dirty = true; // 初始状态：脏的，需要计算
  let effect;

  const computedRef = {
    __v_isRef: true,
    // ... 其他属性
    get value() {
      if (dirty) {
        value = effect.run(); // 运行 effect，计算值
        dirty = false; // 计算完成后，设置为不脏
      }
      return value;
    },
    set value(newValue) {
      setter(newValue);
    },
  };

  effect = new ReactiveEffect(getter, () => {
    if (!dirty) {
      dirty = true; // 依赖变化，设置为脏的
      trigger(computedRef, "set", "value"); // 触发更新
    }
  });

  if (!isReadonly && getterOrOptions.lazy) {
    dirty = !getterOrOptions.lazy; // 如果不是懒加载，则立即计算
  } else {
    effect.run(); // 立即执行一次
  }

  return computedRef;
}

这段代码做了以下几件事：

定义 dirty 变量: 初始值为 true，表示 computed 属性一开始是“脏的”，需要计算。
创建 ReactiveEffect 对象: 这个对象负责追踪 computed 属性的依赖，并在依赖发生变化时触发更新。
实现 get 方法: 在 get 方法中，首先检查 dirty 标志。如果 dirty 为 true，则运行 effect.run()，计算 computed 属性的值，并将 dirty 标志设置为 false。
实现 set 方法: set 方法用于设置 computed 属性的值，如果 computed 属性是只读的，则会发出警告。
lazy 属性的处理: 如果 getterOrOptions.lazy 为 true (显式设置了 lazy 为 true)，则 dirty 保持为 true，表示延迟计算。否则，会立即执行一次 effect.run()，确保即使是 lazy: false 的情况，也会立即计算一次。

ReactiveEffect 类：依赖追踪的幕后英雄

ReactiveEffect 类是 Vue 3 响应式系统的核心组成部分，它负责追踪响应式数据的依赖，并在依赖发生变化时触发更新。

简单来说，ReactiveEffect 对象会记录下 computed 属性在计算过程中访问了哪些响应式数据，并将这些响应式数据添加到自己的依赖列表中。当这些响应式数据发生变化时，ReactiveEffect 对象会收到通知，并将 dirty 标志设置为 true，触发 computed 属性的重新计算。

工作流程：环环相扣的精妙设计

现在，咱们来总结一下 computed 属性的工作流程：

初始化: 创建 computed 属性时，dirty 标志被设置为 true，表示需要计算。同时，创建一个 ReactiveEffect 对象，用于追踪依赖。
首次访问: 当我们第一次访问 computed 属性时，会触发 get 方法。由于 dirty 为 true，所以会运行 effect.run()，计算 computed 属性的值，并将 dirty 标志设置为 false。
依赖变化: 当 computed 属性的依赖发生变化时，ReactiveEffect 对象会收到通知，并将 dirty 标志设置为 true。
再次访问: 当我们再次访问 computed 属性时，会再次触发 get 方法。由于 dirty 为 true，所以会再次运行 effect.run()，重新计算 computed 属性的值，并将 dirty 标志设置为 false。
懒加载 (lazy: true): 只有在首次访问时才会计算，后续依赖变化只会设置 dirty 为 true，但不会立即计算，直到下次访问。

表格总结：dirty 和 lazy 的作用

属性	作用	默认值
`dirty`	表示 `computed` 属性是否需要重新计算。`true` 表示需要重新计算，`false` 表示不需要重新计算。	`true`
`lazy`	表示 `computed` 属性是否是懒加载的。`true` 表示懒加载，只有在第一次被访问时才会进行计算。 `false` 表示非懒加载，在初始化时就会立即计算一次（即使没有被访问）。	`false`

例子说话：lazy 属性的威力

为了更好地理解 lazy 属性的作用，咱们来看一个例子：

<template>
  <p>Full Name: {{ fullName }}</p>
  <button @click="updateNames">Update Names</button>
</template>

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

export default {
  setup() {
    const firstName = ref('张');
    const lastName = ref('三');

    const fullName = computed({
      get: () => {
        console.log('Calculating full name (lazy)...');
        return firstName.value + ' ' + lastName.value;
      },
      set: (value) => {
        const parts = value.split(' ');
        firstName.value = parts[0];
        lastName.value = parts[1];
      },
      lazy: true, // 开启懒加载
    });

    const updateNames = () => {
      firstName.value = '李';
      lastName.value = '四';
      firstName.value = '王';
      lastName.value = '五';
    };

    return {
      firstName,
      lastName,
      fullName,
      updateNames,
    };
  },
};
</script>

在这个例子里，我们给 fullName 属性设置了 lazy: true。这意味着，只有当我们第一次访问 fullName 时，才会进行计算。

当我们点击 "Update Names" 按钮时，firstName 和 lastName 的值会连续变化多次。但是，由于 fullName 是懒加载的，所以只有在第一次访问 fullName 时才会计算一次，避免了不必要的重复计算。

如果我们把 lazy 设置为 false，那么每次 firstName 或 lastName 的值发生变化时，fullName 都会被重新计算一次，即使我们没有立即访问 fullName。

总结：dirty 和 lazy，性能优化的好帮手

dirty 标志和 lazy 属性是 Vue 3 中 computed 属性的重要组成部分，它们通过巧妙的设计，避免了不必要的重复计算，提高了应用的性能。

dirty 标志负责标记 computed 属性是否需要重新计算。
lazy 属性负责控制 computed 属性是否是懒加载的。

合理地使用 dirty 标志和 lazy 属性，可以让我们写出更高效、更流畅的 Vue 应用。

最后的话：学无止境，继续探索

今天咱们就聊到这里。希望通过今天的讲解，大家对 Vue 3 中 computed 属性的 dirty 标志和 lazy 属性有了更深入的理解。

当然，Vue 3 的源码还有很多值得我们学习的地方。希望大家能够继续探索，不断提升自己的技术水平。

下次有机会，咱们再聊聊 Vue 3 响应式系统的其他有趣特性。

各位，拜拜！

发表回复 取消回复

发表回复取消回复