constructor() — vue Function Reference

Architecture documentation for the constructor() function in watcher.ts from the vue codebase.

Function typescript CoreRuntime ObserverSystem calls 3 called by 1

Entity Profile

CoreRuntime→ ObserverSystem→ constructor() — vue Function Reference

Dependency Diagram

graph TD
  3bb87b05_4ddb_5adb_026a_7e9b68e8245c["constructor()"]
  178aac96_e94d_95b4_e78c_8687b2ba8db6["constructor()"]
  178aac96_e94d_95b4_e78c_8687b2ba8db6 -->|calls| 3bb87b05_4ddb_5adb_026a_7e9b68e8245c
  2a4676b0_3474_8b6b_8cd5_cc83c702bc40["get()"]
  3bb87b05_4ddb_5adb_026a_7e9b68e8245c -->|calls| 2a4676b0_3474_8b6b_8cd5_cc83c702bc40
  a814a33e_ccf0_cf8c_f20a_1b45d7dca291["recordEffectScope()"]
  3bb87b05_4ddb_5adb_026a_7e9b68e8245c -->|calls| a814a33e_ccf0_cf8c_f20a_1b45d7dca291
  9220325a_3cfc_e259_1511_c64f33af5490["constructor()"]
  3bb87b05_4ddb_5adb_026a_7e9b68e8245c -->|calls| 9220325a_3cfc_e259_1511_c64f33af5490
  style 3bb87b05_4ddb_5adb_026a_7e9b68e8245c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/observer/watcher.ts lines 67–128

  constructor(
    vm: Component | null,
    expOrFn: string | (() => any),
    cb: Function,
    options?: WatcherOptions | null,
    isRenderWatcher?: boolean
  ) {
    recordEffectScope(
      this,
      // if the active effect scope is manually created (not a component scope),
      // prioritize it
      activeEffectScope && !activeEffectScope._vm
        ? activeEffectScope
        : vm
        ? vm._scope
        : undefined
    )
    if ((this.vm = vm) && isRenderWatcher) {
      vm._watcher = this
    }
    // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
      this.before = options.before
      if (__DEV__) {
        this.onTrack = options.onTrack
        this.onTrigger = options.onTrigger
      }
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.post = false
    this.dirty = this.lazy // for lazy watchers
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = __DEV__ ? expOrFn.toString() : ''
    // parse expression for getter
    if (isFunction(expOrFn)) {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = noop
        __DEV__ &&
          warn(
            `Failed watching path: "${expOrFn}" ` +
              'Watcher only accepts simple dot-delimited paths. ' +
              'For full control, use a function instead.',
            vm
          )
      }
    }
    this.value = this.lazy ? undefined : this.get()
  }