run() — vue Function Reference

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

Function typescript CoreRuntime ObserverSystem calls 2 called by 5

Entity Profile

CoreRuntime→ ObserverSystem→ run() — vue Function Reference

Dependency Diagram

graph TD
  eb15026c_5696_e629_0e8f_4bc0a98f7d98["run()"]
  5f88c922_50d0_318e_0c71_29334294af47["flushSchedulerQueue()"]
  5f88c922_50d0_318e_0c71_29334294af47 -->|calls| eb15026c_5696_e629_0e8f_4bc0a98f7d98
  14b99303_c554_b866_9055_da13a09ced22["update()"]
  14b99303_c554_b866_9055_da13a09ced22 -->|calls| eb15026c_5696_e629_0e8f_4bc0a98f7d98
  880ea200_f528_af26_3f6f_c77fc2f21647["doWatch()"]
  880ea200_f528_af26_3f6f_c77fc2f21647 -->|calls| eb15026c_5696_e629_0e8f_4bc0a98f7d98
  9cad6239_f942_b8a2_b55d_bd455308e7dc["effect()"]
  9cad6239_f942_b8a2_b55d_bd455308e7dc -->|calls| eb15026c_5696_e629_0e8f_4bc0a98f7d98
  58398ca0_ee87_00ce_db95_d8e11ce46b1e["mountComponent()"]
  58398ca0_ee87_00ce_db95_d8e11ce46b1e -->|calls| eb15026c_5696_e629_0e8f_4bc0a98f7d98
  2a4676b0_3474_8b6b_8cd5_cc83c702bc40["get()"]
  eb15026c_5696_e629_0e8f_4bc0a98f7d98 -->|calls| 2a4676b0_3474_8b6b_8cd5_cc83c702bc40
  f90cd36d_8da0_2497_bd42_a0d1067ec3eb["run()"]
  eb15026c_5696_e629_0e8f_4bc0a98f7d98 -->|calls| f90cd36d_8da0_2497_bd42_a0d1067ec3eb
  style eb15026c_5696_e629_0e8f_4bc0a98f7d98 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/observer/watcher.ts lines 211–239

  run() {
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        // Deep watchers and watchers on Object/Arrays should fire even
        // when the value is the same, because the value may
        // have mutated.
        isObject(value) ||
        this.deep
      ) {
        // set new value
        const oldValue = this.value
        this.value = value
        if (this.user) {
          const info = `callback for watcher "${this.expression}"`
          invokeWithErrorHandling(
            this.cb,
            this.vm,
            [value, oldValue],
            this.vm,
            info
          )
        } else {
          this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }