目錄

計算屬性的基本概念

計算屬性的核心實現

ComputedRefImpl 類的實現

ReactiveEffect 與計算屬性的關系

計算屬性的工作流程

1. 創建計算屬性

2. 依賴收集過程

3. 嵌套 effect 的處理

4. 更新過程

嵌套 effect 關系圖解 

依賴關系建立過程

代碼實現分析

1. 創建計算屬性

2. 訪問計算屬性

3. 響應式數據變化時

具體流程示例

關鍵點總結

計算屬性的緩存機制

總結

---

計算屬性是 Vue 中非常重要的特性，它允許我們聲明性地計算衍生值。本文將深入探討 Vue 的計算屬性是如何實現的，特別是它如何依賴 ReactiveEffect  來完成響應式更新。

計算屬性的基本概念

計算屬性本質上是一個可緩存的值，它只有在依賴的響應式數據發生變化時才會重新計算。這種特性使得計算屬性非常適合處理復雜的邏輯計算。

計算屬性的核心實現

export function computed(getterOrOptions) {let getter;let setter;let onlyGetter = isFunction(getterOrOptions);if (onlyGetter) {getter = getterOrOptions;setter = () => {};} else {getter = getterOrOptions.get;setter = getterOrOptions.set;}return new ComputedRefImpl(getter, setter);
}

computed 函數接收一個 getter 函數或者一個包含 get 和 set 方法的對象，然后返回一個

ComputedRefImpl 實例。這個實例就是我們使用的計算屬性。

ComputedRefImpl 類的實現

class ComputedRefImpl {public _value;public effect;public dep;constructor(public getter, public setter) {this.effect = new ReactiveEffect(() => getter(this._value),() => {triggerRefValue(this);});}get value() {if (this.effect.dirty) {this._value = this.effect.run();trackRefValue(this);}return this._value;}set value(newValue) {this.setter(newValue);}
}

ComputedRefImpl 類是計算屬性的核心實現，它包含了三個關鍵屬性：

•  _value ：存儲計算結果

•  effect：一個   ReactiveEffect  實例，用于追蹤依賴和觸發更新

•  dep ：存儲依賴于這個計算屬性的其他 effect

ReactiveEffect 與計算屬性的關系

計算屬性的實現依賴于 ReactiveEffect 類。讓我們看看 ReactiveEffect  的關鍵部分：

export class ReactiveEffect {_trackId = 0;deps = [];_depsLength = 0;_runing = 0;_dirtyLevel = DirtyLevel.Dirty;public active = true;constructor(public fn, public scheduler) {}public get dirty() {return this._dirtyLevel === DirtyLevel.Dirty;}public set dirty(value) {this._dirtyLevel = value ?