defineComputed() — vue Function Reference

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

Function typescript CoreRuntime InstanceState calls 2 called by 2

Entity Profile

CoreRuntime→ InstanceState→ defineComputed() — vue Function Reference

Dependency Diagram

graph TD
  cba9a7a5_cb68_c483_2155_95fbf45613ad["defineComputed()"]
  513e4cf1_6313_4e41_3156_8a9840fbfa91["initComputed()"]
  513e4cf1_6313_4e41_3156_8a9840fbfa91 -->|calls| cba9a7a5_cb68_c483_2155_95fbf45613ad
  0c237bbb_9732_89a2_cbb9_7c182a36d1d8["initComputed()"]
  0c237bbb_9732_89a2_cbb9_7c182a36d1d8 -->|calls| cba9a7a5_cb68_c483_2155_95fbf45613ad
  5cb8f376_407a_c68e_8832_96939169e9e0["createComputedGetter()"]
  cba9a7a5_cb68_c483_2155_95fbf45613ad -->|calls| 5cb8f376_407a_c68e_8832_96939169e9e0
  ca1d4f7c_f2ab_a6a2_2a96_a925f830382f["createGetterInvoker()"]
  cba9a7a5_cb68_c483_2155_95fbf45613ad -->|calls| ca1d4f7c_f2ab_a6a2_2a96_a925f830382f
  style cba9a7a5_cb68_c483_2155_95fbf45613ad 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)
}