Vue computedのキャッシュ実装原理の詳細な説明

<div id="アプリ">
  <span @click="change">{{sum}}</span>
</div>
<script src="./vue2.6.js"></script>
<スクリプト>
  新しいVue({
    el: "#app",
    データ（） {
      戻る {
        カウント: 1,
      }
    },
    メソッド: {
      変化（） {
        このカウント = 2
      },
    },
    計算: {
      合計() {
        this.count + 1 を返す
      },
    },
  })
</スクリプト>

opts.computed の場合、{initComputed(vm, opts.computed);}

var ウォッチャー = vm._computedWatchers = Object.create(null); 
// 計算されたプロパティごとに計算されたウォッチャーを順番に定義します
for (const キー in 計算済み) {
  const userDef = computed[キー]
  watchers[キー] = 新しいウォッチャー(
      vm、// インスタンス ゲッター、// ユーザーが評価関数の合計に渡した値
      noop, // コールバック関数は最初に無視できます { lazy: true } // 計算されたウォッチャーをマークするために lazy 属性を宣言します
  ）
  // ユーザーが this.sum を呼び出すと何が起こるか defineComputed(vm, key, userDef)
}

{
    依存関係: [],
    汚い: 本当、
    ゲッター: ƒ sum(),
    怠惰: 本当、
    値: 未定義
}

Object.defineProperty(ターゲット、キー、{ 
    得る（） {
        // 先ほど述べたコンポーネントインスタンスから計算されたウォッチャーを取得します
        const ウォッチャー = this._computedWatchers && this._computedWatchers[キー]
        if (ウォッチャー) {
          // ダーティの場合にのみ再評価されます if (watcher.dirty) {
            // これは評価し、getを呼び出し、Dep.targetを設定します
            ウォッチャー.評価()
          }
          // これも重要なポイントなので、後で詳しく説明します if (Dep.target) {
            ウォッチャー.depend()
          }
          //最後に計算された値を返します return watcher.value
        }
    }
})

評価する（） {
  //get関数を呼び出して評価します。this.value = this.get()
  // ダーティを false としてマークする
  this.dirty = 偽
}

更新コンポーネント = () => {
  vm._update(vm._render(), ハイドレーション)
}
// レンダリング ウォッチャーを作成します。レンダリング ウォッチャーが初期化されると、その get() メソッド、つまりレンダリング関数が呼び出され、依存関係が収集されます。new Watcher(vm, updateComponent, noop, {}, true /* isRenderWatcher */)

得る （） {
    //現在のウォッチャーをスタックの一番上に置き、Dep.target に設定します
    pushTarget(これ)
    値を与える
    定数 vm = this.vm
    // ユーザー定義関数を呼び出すと this.count にアクセスし、そのゲッターメソッドにアクセスします。これについては後述します。 value = this.getter.call(vm, vm)
    // 評価が完了したら、現在のウォッチャーがスタックからポップアウトされます popTarget()
    this.cleanupDeps()
    戻り値
 }

// クロージャでは、キーカウントに定義された依存関係が保持されます
定数 dep = 新しい Dep()
 
// クロージャは最後のset関数によって設定された値も保持します
valを
 
Object.defineProperty(obj, キー, {
  取得: 関数reactiveGetter() {
    定数値 = val
    // Dep.target は現在ウォッチャーを計算しています
    if (依存ターゲット) {
      // 依存関係を収集 dep.depend()
    }
    戻り値
  },
})

// 依存()
依存する（） {
  if (依存ターゲット) {
    Dep.target.addDep(これ)
  }
}

// ウォッチャーの addDep 関数 addDep (dep: Dep) {
  // ここでは、簡素化のために一連の重複排除操作が実行されます // ここでは、count の dep も独自の deps に格納されます this.deps.push(dep)
  // ウォッチャー自体をパラメータとして // dep の addSub 関数に戻る dep.addSub(this)
}

クラス Dep {
  サブ = []
 
  addSub (サブ: ウォッチャー) {
    this.subs.push(サブ)
  }
}

// ウォッチャー依存
依存する（） {
  i = this.deps.length とします
  (i--) {
    this.deps[i].depend()
  }
}

クラス Dep {
  サブ = []
  
  依存する（） {
    if (依存ターゲット) {
      Dep.target.addDep(これ)
    }
  }
}

{
    サブ: [合計計算ウォッチャー、レンダリングウォッチャー]
}

// クロージャでは、キーカウントに定義された依存関係が保持されます
定数 dep = 新しい Dep()
 
// クロージャは最後のset関数によって設定された値も保持します
valを
 
Object.defineProperty(obj, キー, {
  設定: 関数 reactiveSetter (newVal) {
      val = 新しい値
      // カウントの依存関係の通知をトリガーします
      dep.notify()
    }
  })
})

クラス Dep {
  サブ = []
  
  通知（）{
    (i = 0, l = subs.length; i < l; i++) の場合 {
      subs[i].update()
    }
  }
}

アップデート （） {
  if (this.lazy) {
    this.dirty = true
  }
}

Object.defineProperty(ターゲット、キー、{ 
    得る（） {
        const ウォッチャー = this._computedWatchers && this._computedWatchers[キー]
        if (ウォッチャー) {
          // 前のステップで、dirty はすでに true に設定されていたため、if (watcher.dirty) { で再評価されます。
            ウォッチャー.評価()
          }
          if (依存ターゲット) {
            ウォッチャー.depend()
          }
          //最後に計算された値を返します return watcher.value
        }
    }
})