defineComputed() — vue Function Reference

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

Function typescript CoreInstance Lifecycle calls 2 called by 2

Entity Profile

CoreInstance→ Lifecycle→ defineComputed() — vue Function Reference

Dependency Diagram

graph TD
  4b445b08_139d_b6b4_0861_2120f0449ae2["defineComputed()"]
  13d1baef_6bea_6a9a_dcef_508dfa47a6ca["initComputed()"]
  13d1baef_6bea_6a9a_dcef_508dfa47a6ca -->|calls| 4b445b08_139d_b6b4_0861_2120f0449ae2
  c4c9a03b_1660_44a3_39d7_280f159fba8d["initComputed()"]
  c4c9a03b_1660_44a3_39d7_280f159fba8d -->|calls| 4b445b08_139d_b6b4_0861_2120f0449ae2
  f80658ce_fb05_8791_c92f_3c0410b5260a["createComputedGetter()"]
  4b445b08_139d_b6b4_0861_2120f0449ae2 -->|calls| f80658ce_fb05_8791_c92f_3c0410b5260a
  892aab87_39fb_8b64_5905_b29faf07e7b5["createGetterInvoker()"]
  4b445b08_139d_b6b4_0861_2120f0449ae2 -->|calls| 892aab87_39fb_8b64_5905_b29faf07e7b5
  style 4b445b08_139d_b6b4_0861_2120f0449ae2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/instance/state.ts lines 226–254

export function defineComputed(
  target: any,
  key: string,
  userDef: Record<string, any> | (() => any)
) {
  const shouldCache = !isServerRendering()
  if (isFunction(userDef)) {
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)
      : createGetterInvoker(userDef)
    sharedPropertyDefinition.set = noop
  } else {
    sharedPropertyDefinition.get = userDef.get
      ? shouldCache && userDef.cache !== false
        ? createComputedGetter(key)
        : createGetterInvoker(userDef.get)
      : noop
    sharedPropertyDefinition.set = userDef.set || noop
  }
  if (__DEV__ && sharedPropertyDefinition.set === noop) {
    sharedPropertyDefinition.set = function () {
      warn(
        `Computed property "${key}" was assigned to but it has no setter.`,
        this
      )
    }
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}