queueWatcher() — vue Function Reference

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

Function typescript CoreInstance Lifecycle calls 1 called by 3

Entity Profile

CoreInstance→ Lifecycle→ queueWatcher() — vue Function Reference

Dependency Diagram

graph TD
  a5f84bab_9034_ce7b_6911_25c506039541["queueWatcher()"]
  59e4bdf1_7b9a_0d0a_248e_ef175bec51af["update()"]
  59e4bdf1_7b9a_0d0a_248e_ef175bec51af -->|calls| a5f84bab_9034_ce7b_6911_25c506039541
  b2856354_51ef_6ef1_ec4b_ae2e72186601["doWatch()"]
  b2856354_51ef_6ef1_ec4b_ae2e72186601 -->|calls| a5f84bab_9034_ce7b_6911_25c506039541
  acb345d2_cef4_580d_4a60_3031925d6581["queueWatcher()"]
  acb345d2_cef4_580d_4a60_3031925d6581 -->|calls| a5f84bab_9034_ce7b_6911_25c506039541
  9ee171a6_a4b8_25d2_3782_d5fdbe38bfec["flushSchedulerQueue()"]
  a5f84bab_9034_ce7b_6911_25c506039541 -->|calls| 9ee171a6_a4b8_25d2_3782_d5fdbe38bfec
  style a5f84bab_9034_ce7b_6911_25c506039541 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)
  }
}