computed.ts — vue Source File

Architecture documentation for computed.ts, a typescript file in the vue codebase. 12 imports, 1 dependents.

File typescript VueCore Observer 12 imports 1 dependents 3 functions 1 classes

Entity Profile

VueCore→ Observer→ computed.ts — vue Source File

Dependency Diagram

graph LR
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af["computed.ts"]
  22b44e72_ad0a_6a98_e36a_e325291fd02b["ref.ts"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> 22b44e72_ad0a_6a98_e36a_e325291fd02b
  29d11db1_dfc1_094c_66f0_0ae7d09000cd["Ref"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> 29d11db1_dfc1_094c_66f0_0ae7d09000cd
  9f3b1774_ebd5_0845_1a85_868e0c1fd480["currentInstance.ts"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> 9f3b1774_ebd5_0845_1a85_868e0c1fd480
  e84ea476_9f30_e7b9_aaa0_4026f0c97365["reactive.ts"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> e84ea476_9f30_e7b9_aaa0_4026f0c97365
  02125244_44e5_bcdb_5575_964348bb90d8["ReactiveFlags"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> 02125244_44e5_bcdb_5575_964348bb90d8
  7cfaddc3_c5e5_7577_20e9_59bc8caeee91["operations.ts"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> 7cfaddc3_c5e5_7577_20e9_59bc8caeee91
  7fd1b3c3_dd3b_c683_10c8_49d1fa005cd2["TrackOpTypes"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> 7fd1b3c3_dd3b_c683_10c8_49d1fa005cd2
  85e1f909_7644_0ca7_f1dd_88c92922f129["debug.ts"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> 85e1f909_7644_0ca7_f1dd_88c92922f129
  eb6c0718_1e62_2e81_5d49_ba86c998ba08["DebuggerOptions"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> eb6c0718_1e62_2e81_5d49_ba86c998ba08
  6d8f8976_7066_720b_0d45_45fe42921eaf["util"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> 6d8f8976_7066_720b_0d45_45fe42921eaf
  b0726a9b_3416_ba5e_8288_ca534387d48d["watcher"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> b0726a9b_3416_ba5e_8288_ca534387d48d
  33c70915_1726_ee82_246e_a7d09e56426a["dep"]
  49a97e06_4034_4e1d_a0e8_bb7368ceb3af --> 33c70915_1726_ee82_246e_a7d09e56426a
  e5380f01_49bc_d965_1141_151fb5c6c097["apiWatch.ts"]
  e5380f01_49bc_d965_1141_151fb5c6c097 --> 49a97e06_4034_4e1d_a0e8_bb7368ceb3af
  style 49a97e06_4034_4e1d_a0e8_bb7368ceb3af fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { isServerRendering, noop, warn, def, isFunction } from 'core/util'
import { Ref, RefFlag } from './ref'
import Watcher from 'core/observer/watcher'
import Dep from 'core/observer/dep'
import { currentInstance } from '../currentInstance'
import { ReactiveFlags } from './reactive'
import { TrackOpTypes } from './operations'
import { DebuggerOptions } from '../debug'

declare const ComputedRefSymbol: unique symbol

export interface ComputedRef<T = any> extends WritableComputedRef<T> {
  readonly value: T
  [ComputedRefSymbol]: true
}

export interface WritableComputedRef<T> extends Ref<T> {
  readonly effect: any /* Watcher */
}

export type ComputedGetter<T> = (...args: any[]) => T
export type ComputedSetter<T> = (v: T) => void

export interface WritableComputedOptions<T> {
  get: ComputedGetter<T>
  set: ComputedSetter<T>
}

export function computed<T>(
  getter: ComputedGetter<T>,
  debugOptions?: DebuggerOptions
): ComputedRef<T>
export function computed<T>(
  options: WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions
): WritableComputedRef<T>
export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions
) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>

  const onlyGetter = isFunction(getterOrOptions)
  if (onlyGetter) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          warn('Write operation failed: computed value is readonly')
        }
      : noop
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }

  const watcher = isServerRendering()
    ? null
    : new Watcher(currentInstance, getter, noop, { lazy: true })

  if (__DEV__ && watcher && debugOptions) {
    watcher.onTrack = debugOptions.onTrack
    watcher.onTrigger = debugOptions.onTrigger
  }

  const ref = {
    // some libs rely on the presence effect for checking computed refs
    // from normal refs, but the implementation doesn't matter
    effect: watcher,
    get value() {
      if (watcher) {
        if (watcher.dirty) {
          watcher.evaluate()
        }
        if (Dep.target) {
          if (__DEV__ && Dep.target.onTrack) {
            Dep.target.onTrack({
              effect: Dep.target,
              target: ref,
              type: TrackOpTypes.GET,
              key: 'value'
            })
          }
          watcher.depend()
        }
        return watcher.value
      } else {
        return getter()
      }
    },
    set value(newVal) {
      setter(newVal)
    }
  } as any

  def(ref, RefFlag, true)
  def(ref, ReactiveFlags.IS_READONLY, onlyGetter)

  return ref
}