queueWatcher() — vue Function Reference

Architecture documentation for the queueWatcher() function in scheduler.ts from the vue codebase.

Function typescript CoreRuntime Observer calls 1 called by 2

Entity Profile

CoreRuntime→ Observer→ queueWatcher() — vue Function Reference

Dependency Diagram

graph TD
  331094c1_856e_230e_e56a_5500d0a6236f["queueWatcher()"]
  7cc5a667_1876_f28e_e26f_27fcdcba292e["scheduler.ts"]
  331094c1_856e_230e_e56a_5500d0a6236f -->|defined in| 7cc5a667_1876_f28e_e26f_27fcdcba292e
  4f1747ac_5aeb_b4ff_a868_1c9fed4bec76["update()"]
  4f1747ac_5aeb_b4ff_a868_1c9fed4bec76 -->|calls| 331094c1_856e_230e_e56a_5500d0a6236f
  1b10e00d_02e6_305e_b4ad_0e11475c3139["doWatch()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| 331094c1_856e_230e_e56a_5500d0a6236f
  f5b111c0_f7e1_77b3_8a0f_5e97da3014ec["flushSchedulerQueue()"]
  331094c1_856e_230e_e56a_5500d0a6236f -->|calls| f5b111c0_f7e1_77b3_8a0f_5e97da3014ec
  style 331094c1_856e_230e_e56a_5500d0a6236f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/observer/scheduler.ts lines 167–199

export function queueWatcher(watcher: Watcher) {
  const id = watcher.id
  if (has[id] != null) {
    return
  }

  if (watcher === Dep.target && watcher.noRecurse) {
    return
  }

  has[id] = true
  if (!flushing) {
    queue.push(watcher)
  } else {
    // if already flushing, splice the watcher based on its id
    // if already past its id, it will be run next immediately.
    let i = queue.length - 1
    while (i > index && queue[i].id > watcher.id) {
      i--
    }
    queue.splice(i + 1, 0, watcher)
  }
  // queue the flush
  if (!waiting) {
    waiting = true

    if (__DEV__ && !config.async) {
      flushSchedulerQueue()
      return
    }
    nextTick(flushSchedulerQueue)
  }
}