initComputed() — vue Function Reference

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

Function typescript VueCore Instance calls 1 called by 2

Entity Profile

VueCore→ Instance→ initComputed() — vue Function Reference

Dependency Diagram

graph TD
  920e66ae_3cc4_9da1_e697_9e4605afb494["initComputed()"]
  079339bc_f0ce_0fd0_3d1b_26a2dc073616["state.ts"]
  920e66ae_3cc4_9da1_e697_9e4605afb494 -->|defined in| 079339bc_f0ce_0fd0_3d1b_26a2dc073616
  3430fea3_ff5d_f4b7_a4ca_f1257a327ab1["initComputed()"]
  3430fea3_ff5d_f4b7_a4ca_f1257a327ab1 -->|calls| 920e66ae_3cc4_9da1_e697_9e4605afb494
  ff5d1d58_05a4_1c98_682b_8814ac1fe9fd["initState()"]
  ff5d1d58_05a4_1c98_682b_8814ac1fe9fd -->|calls| 920e66ae_3cc4_9da1_e697_9e4605afb494
  743f92db_5862_0bb2_3ad1_47ccd2ae1c10["defineComputed()"]
  920e66ae_3cc4_9da1_e697_9e4605afb494 -->|calls| 743f92db_5862_0bb2_3ad1_47ccd2ae1c10
  style 920e66ae_3cc4_9da1_e697_9e4605afb494 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/instance/state.ts lines 183–224

function initComputed(vm: Component, computed: Object) {
  // $flow-disable-line
  const watchers = (vm._computedWatchers = Object.create(null))
  // computed properties are just getters during SSR
  const isSSR = isServerRendering()

  for (const key in computed) {
    const userDef = computed[key]
    const getter = isFunction(userDef) ? userDef : userDef.get
    if (__DEV__ && getter == null) {
      warn(`Getter is missing for computed property "${key}".`, vm)
    }

    if (!isSSR) {
      // create internal watcher for the computed property.
      watchers[key] = new Watcher(
        vm,
        getter || noop,
        noop,
        computedWatcherOptions
      )
    }

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    } else if (__DEV__) {
      if (key in vm.$data) {
        warn(`The computed property "${key}" is already defined in data.`, vm)
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(`The computed property "${key}" is already defined as a prop.`, vm)
      } else if (vm.$options.methods && key in vm.$options.methods) {
        warn(
          `The computed property "${key}" is already defined as a method.`,
          vm
        )
      }
    }
  }
}