解释 Vue 3 源码中 `computed` 函数的实现细节，包括其惰性求值 (`lazy` watcher)、缓存机制 (`dirty` 标志) 和依赖更新逻辑。

观众朋友们，晚上好！欢迎来到今天的 Vue 3 源码剖析系列讲座。今天我们要聊的是 Vue 3 中一个非常重要且常用的特性：computed 计算属性。它就像你厨房里的多功能料理机，能根据现有的食材（响应式数据）为你制作出各种美味佳肴（计算结果）。

开场白：计算属性的重要性

为什么我们需要计算属性呢？想象一下，你有一个商品列表，每个商品都有价格和数量。你想显示所有商品的总价，你肯定不会直接在模板里写 price1 * quantity1 + price2 * quantity2 + ... 吧？这简直是噩梦！

计算属性就是来拯救你的。它可以将这些复杂的计算逻辑封装起来，并且具有缓存机制，只有当依赖的数据发生变化时才会重新计算。这不仅简化了模板，还提高了性能。

那么，Vue 3 的 computed 到底是如何实现的呢？让我们深入源码一探究竟。

第一部分：computed 函数的概览

在 Vue 3 中，computed 函数的定义大致如下（简化版）：

function computed<T>(
  getter: () => T,
  debugOptions?: DebuggerOptions
): ComputedRef<T>;

function computed<T>(
  options: {
    get: () => T;
    set: (value: T) => void;
  },
  debugOptions?: DebuggerOptions
): WritableComputedRef<T>;

可以看到，computed 函数有两种形式：

只读模式（Getter Only）： 传入一个 getter 函数，返回一个只读的 ComputedRef。
读写模式（Getter & Setter）： 传入一个包含 get 和 set 属性的对象，返回一个可读写的 WritableComputedRef。

我们先从最常见的只读模式开始分析。

第二部分：ComputedRefImpl 类：计算属性的核心

无论哪种形式，computed 函数最终都会创建一个 ComputedRefImpl 实例。这个类是计算属性的核心，负责管理计算逻辑、缓存和依赖追踪。

以下是 ComputedRefImpl 类的简化版结构：

class ComputedRefImpl<T> {
  public dep?: Dep = undefined; // 依赖收集的 Dep 对象

  private _value!: T; // 缓存的计算结果
  public readonly effect: ReactiveEffect<T>; // 响应式 effect
  public readonly __v_isRef = true; // 标记为 ref

  public _dirty = true; // 脏值标志，初始为 true，表示需要重新计算
  public _cacheable: boolean; // 是否可缓存，默认为 true

  constructor(
    getter: Getter<T>,
    private readonly _setter: Setter<T>,
    isReadonly: boolean,
    isSSR: boolean
  ) {
    this.effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true; // 标记为脏值
        triggerRef(this); // 触发依赖于该计算属性的 effect
      }
    });
    this.effect.computed = this; // 标记该 effect 是计算属性
    this.effect.active = this._cacheable = !isSSR;
    this.isReadonly = isReadonly;
  }

  get value() {
    // ... 获取计算结果的逻辑
  }

  set value(newValue: T) {
    // ... 设置计算属性值的逻辑（仅读写模式下）
  }
}

让我们逐个分析这些属性：

dep: 用于收集依赖该计算属性的 effect。当计算属性的值发生变化时，会触发这些 effect。
_value: 存储计算属性的缓存值。
effect: 一个 ReactiveEffect 实例，负责执行 getter 函数，并追踪 getter 函数中用到的响应式数据。
_dirty: 一个布尔值，表示计算属性是否“脏”（需要重新计算）。初始值为 true，表示需要首次计算。
_cacheable: 一个布尔值，表示计算属性是否可缓存。默认为 true。
getter: 计算属性的 getter 函数，用于计算属性的值。
setter: 计算属性的 setter 函数，用于设置计算属性的值（仅读写模式下）。

第三部分：惰性求值（Lazy Evaluation）

计算属性的一个重要特性是惰性求值。这意味着，只有当计算属性的值被访问时，才会进行计算。如果计算属性的值一直没有被访问，那么就不会执行 getter 函数。

这是通过 ComputedRefImpl 的 get value() 方法来实现的：

get value() {
  if (this._dirty) {
    this._dirty = false;
    this._value = this.effect.run()!; // 执行 effect.run() 进行计算
  }
  trackRefValue(this); // 收集依赖
  return this._value;
}

可以看到，get value() 方法首先检查 _dirty 标志。如果 _dirty 为 true，表示需要重新计算，那么就会执行 this.effect.run()。effect.run() 会执行 getter 函数，并将计算结果存储到 this._value 中。然后，将 _dirty 标志设置为 false，表示已经计算过了。

如果 _dirty 为 false，则直接返回缓存的 this._value，避免重复计算。

第四部分：缓存机制（Caching）

_dirty 标志是实现缓存机制的关键。当计算属性依赖的响应式数据发生变化时，会触发 ReactiveEffect 的 scheduler 函数，将 _dirty 标志设置为 true。这样，下次访问计算属性的值时，就会重新计算。

让我们回顾一下 ReactiveEffect 的 scheduler 函数：

this.effect = new ReactiveEffect(getter, () => {
  if (!this._dirty) {
    this._dirty = true; // 标记为脏值
    triggerRef(this); // 触发依赖于该计算属性的 effect
  }
});

当依赖发生变化时，scheduler会执行：

设置 _dirty = true。
执行 triggerRef(this)，通知所有依赖于该计算属性的其他 effect，它们也需要更新。

第五部分：依赖更新逻辑（Dependency Tracking）

trackRefValue(this) 函数负责收集依赖于该计算属性的 effect。这个函数会将当前的 activeEffect 添加到 this.dep 中。

function trackRefValue(ref: RefBase<any>) {
  if (isTracking()) {
    trackEffects(ref.dep || (ref.dep = createDep()));
  }
}

isTracking() 函数用于判断当前是否存在活动的 effect。如果存在，则表示有其他 effect 正在访问计算属性的值，需要进行依赖收集。

trackEffects(dep) 函数会将当前的 activeEffect 添加到 dep 中。

export function trackEffects(
  dep: Dep,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  let shouldTrack = false;
  if (effectTrackDepth <= maxMarkerBits) {
    shouldTrack = !newTracked(dep);
  } else {
    shouldTrack = !dep.has(activeEffect!);
  }

  if (shouldTrack) {
    dep.add(activeEffect!);
    activeEffect!.deps.push(dep);
  }
}

第六部分：读写模式（Getter & Setter）

对于读写模式的计算属性，ComputedRefImpl 类的 set value() 方法允许我们设置计算属性的值。

set value(newValue: T) {
  this._setter(newValue); // 执行 setter 函数
}

set value() 方法会调用我们传入的 setter 函数，从而修改计算属性依赖的响应式数据。这会导致计算属性的值发生变化，并触发依赖更新。

第七部分：源码示例分析

为了更好地理解 computed 的实现，让我们来看一个具体的例子：

<template>
  <p>Count: {{ count }}</p>
  <p>Double Count: {{ doubleCount }}</p>
  <button @click="increment">Increment</button>
</template>

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

export default {
  setup() {
    const count = ref(0);

    const doubleCount = computed(() => {
      console.log('Calculating doubleCount');
      return count.value * 2;
    });

    const increment = () => {
      count.value++;
    };

    return {
      count,
      doubleCount,
      increment,
    };
  },
};
</script>

在这个例子中，doubleCount 是一个计算属性，它依赖于 count。

当组件首次渲染时，会访问 doubleCount 的值，触发 ComputedRefImpl 的 get value() 方法。
由于 _dirty 为 true，会执行 getter 函数（() => count.value * 2），计算 doubleCount 的值，并将 _dirty 设置为 false。
同时，count.value 会触发 count 的依赖收集，将 doubleCount 的 effect 添加到 count 的 dep 中。
当我们点击 "Increment" 按钮时，count.value++ 会修改 count 的值，并触发 count 的 dep 中的所有 effect。
doubleCount 的 effect 的 scheduler 函数会被执行，将 _dirty 设置为 true。
下次访问 doubleCount 的值时，会重新计算。

第八部分：总结

让我们用一张表格来总结一下 computed 的核心机制：

特性	描述
惰性求值	只有当计算属性的值被访问时，才会进行计算。
缓存机制	计算属性会将计算结果缓存起来，只有当依赖的响应式数据发生变化时，才会重新计算。
依赖追踪	计算属性会追踪 `getter` 函数中用到的响应式数据，当这些数据发生变化时，会自动更新计算属性的值。
`_dirty` 标志	用于标记计算属性是否“脏”（需要重新计算）。当依赖的响应式数据发生变化时，`_dirty` 会被设置为 `true`。
`ReactiveEffect`	负责执行 `getter` 函数，并追踪 `getter` 函数中用到的响应式数据。当依赖的响应式数据发生变化时，会触发 `ReactiveEffect` 的 scheduler 函数，将 `_dirty` 标志设置为 `true`。

总而言之，Vue 3 的 computed 函数通过 ComputedRefImpl 类、惰性求值、缓存机制和依赖追踪等机制，实现了高效且易用的计算属性功能。它极大地简化了模板，提高了性能，是 Vue 开发中不可或缺的一部分。

尾声：一些小技巧

尽量避免在 getter 函数中进行副作用操作，例如修改 DOM 或发送网络请求。这可能会导致意外的行为。
如果计算属性的计算量很大，可以考虑使用 throttle 或 debounce 来限制计算频率，避免性能问题。
可以使用 debugOptions 来调试计算属性，例如查看计算属性的依赖关系。

好了，今天的讲座就到这里。希望大家通过今天的学习，对 Vue 3 的 computed 函数有了更深入的了解。下次再见！

发表回复 取消回复

发表回复取消回复