createComputedGetter() — vue Function Reference

Architecture documentation for the createComputedGetter() function in state.ts from the vue codebase.

Function typescript CoreInstance Reactivity calls 2 called by 1

Entity Profile

CoreInstance→ Reactivity→ createComputedGetter() — vue Function Reference

Dependency Diagram

graph TD
  f80658ce_fb05_8791_c92f_3c0410b5260a["createComputedGetter()"]
  4b445b08_139d_b6b4_0861_2120f0449ae2["defineComputed()"]
  4b445b08_139d_b6b4_0861_2120f0449ae2 -->|calls| f80658ce_fb05_8791_c92f_3c0410b5260a
  86936286_63e2_eb4f_1b26_6a4b4026b810["evaluate()"]
  f80658ce_fb05_8791_c92f_3c0410b5260a -->|calls| 86936286_63e2_eb4f_1b26_6a4b4026b810
  d1eb6d83_f4fb_7e95_6bf0_bea3d8b0996f["depend()"]
  f80658ce_fb05_8791_c92f_3c0410b5260a -->|calls| d1eb6d83_f4fb_7e95_6bf0_bea3d8b0996f
  style f80658ce_fb05_8791_c92f_3c0410b5260a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/instance/state.ts lines 256–277

function createComputedGetter(key) {
  return function computedGetter() {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate()
      }
      if (Dep.target) {
        if (__DEV__ && Dep.target.onTrack) {
          Dep.target.onTrack({
            effect: Dep.target,
            target: this,
            type: TrackOpTypes.GET,
            key
          })
        }
        watcher.depend()
      }
      return watcher.value
    }
  }
}