queueWatcher() — vue Function Reference

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

Function typescript CoreRuntime ObserverSystem calls 1 called by 2

Entity Profile

CoreRuntime→ ObserverSystem→ queueWatcher() — vue Function Reference

Dependency Diagram

graph TD
  ba3e2e94_ad22_f194_419c_8e274feb8fdd["queueWatcher()"]
  14b99303_c554_b866_9055_da13a09ced22["update()"]
  14b99303_c554_b866_9055_da13a09ced22 -->|calls| ba3e2e94_ad22_f194_419c_8e274feb8fdd
  880ea200_f528_af26_3f6f_c77fc2f21647["doWatch()"]
  880ea200_f528_af26_3f6f_c77fc2f21647 -->|calls| ba3e2e94_ad22_f194_419c_8e274feb8fdd
  5f88c922_50d0_318e_0c71_29334294af47["flushSchedulerQueue()"]
  ba3e2e94_ad22_f194_419c_8e274feb8fdd -->|calls| 5f88c922_50d0_318e_0c71_29334294af47
  style ba3e2e94_ad22_f194_419c_8e274feb8fdd 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)
  }
}