Home / Class/ Watcher Class — vue Architecture

Watcher Class — vue Architecture

Architecture documentation for the Watcher class in watcher.ts from the vue codebase.

Entity Profile

Dependency Diagram

graph TD
  e7f4f452_deed_8a48_b501_c415a06a6251["Watcher"]
  acd39cb4_1b40_1f96_d7d8_00ba7dc7b283["watcher.ts"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|defined in| acd39cb4_1b40_1f96_d7d8_00ba7dc7b283
  8603c200_e0a7_36c4_e293_fa045d31fa46["constructor()"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 8603c200_e0a7_36c4_e293_fa045d31fa46
  ad67e7ed_c155_de53_2de2_0458d2c842ef["get()"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| ad67e7ed_c155_de53_2de2_0458d2c842ef
  5aef7771_bdc8_a374_cfde_6f534dc3bd40["addDep()"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 5aef7771_bdc8_a374_cfde_6f534dc3bd40
  5e45cb10_075f_436d_5803_7d7474a26d26["cleanupDeps()"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 5e45cb10_075f_436d_5803_7d7474a26d26
  4f1747ac_5aeb_b4ff_a868_1c9fed4bec76["update()"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 4f1747ac_5aeb_b4ff_a868_1c9fed4bec76
  a4fba0c0_c91e_f56f_3c69_5a18514bb8e1["run()"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| a4fba0c0_c91e_f56f_3c69_5a18514bb8e1
  0f484864_ebd2_9142_daff_b0e63d1dd58a["evaluate()"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 0f484864_ebd2_9142_daff_b0e63d1dd58a
  4fb245e9_ef0c_c389_c113_747330caa63e["depend()"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 4fb245e9_ef0c_c389_c113_747330caa63e
  f780ff44_85db_e399_d971_8fdf493ab15a["teardown()"]
  e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| f780ff44_85db_e399_d971_8fdf493ab15a

Relationship Graph

Source Code

src/core/observer/watcher.ts lines 41–278

export default class Watcher implements DepTarget {
  vm?: Component | null
  expression: string
  cb: Function
  id: number
  deep: boolean
  user: boolean
  lazy: boolean
  sync: boolean
  dirty: boolean
  active: boolean
  deps: Array<Dep>
  newDeps: Array<Dep>
  depIds: SimpleSet
  newDepIds: SimpleSet
  before?: Function
  onStop?: Function
  noRecurse?: boolean
  getter: Function
  value: any
  post: boolean

  // dev only
  onTrack?: ((event: DebuggerEvent) => void) | undefined
  onTrigger?: ((event: DebuggerEvent) => void) | undefined

  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. ' +

Domain

Frequently Asked Questions

What is the Watcher class?
Watcher is a class in the vue codebase, defined in src/core/observer/watcher.ts.
Where is Watcher defined?
Watcher is defined in src/core/observer/watcher.ts at line 41.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free