createComputedGetter() — vue Function Reference

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

Function typescript VueCore Instance calls 2 called by 1

Entity Profile

VueCore→ Instance→ createComputedGetter() — vue Function Reference

Dependency Diagram

graph TD
  7a9733ae_710c_5b35_fded_f5829a6aeedc["createComputedGetter()"]
  079339bc_f0ce_0fd0_3d1b_26a2dc073616["state.ts"]
  7a9733ae_710c_5b35_fded_f5829a6aeedc -->|defined in| 079339bc_f0ce_0fd0_3d1b_26a2dc073616
  743f92db_5862_0bb2_3ad1_47ccd2ae1c10["defineComputed()"]
  743f92db_5862_0bb2_3ad1_47ccd2ae1c10 -->|calls| 7a9733ae_710c_5b35_fded_f5829a6aeedc
  b14c934a_c745_b1c9_851b_632eb5aa48a6["evaluate()"]
  7a9733ae_710c_5b35_fded_f5829a6aeedc -->|calls| b14c934a_c745_b1c9_851b_632eb5aa48a6
  f27f8043_126c_8edc_d490_d3e19f848317["depend()"]
  7a9733ae_710c_5b35_fded_f5829a6aeedc -->|calls| f27f8043_126c_8edc_d490_d3e19f848317
  style 7a9733ae_710c_5b35_fded_f5829a6aeedc 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
    }
  }
}