queueWatcher() — vue Function Reference

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

Function typescript VueCore Observer calls 1 called by 2

Entity Profile

VueCore→ Observer→ queueWatcher() — vue Function Reference

Dependency Diagram

graph TD
  b4e0d823_0133_d156_5392_8b2e8367ebd9["queueWatcher()"]
  36c7708b_24b4_08c9_e39f_50f332a4b206["scheduler.ts"]
  b4e0d823_0133_d156_5392_8b2e8367ebd9 -->|defined in| 36c7708b_24b4_08c9_e39f_50f332a4b206
  82001dd5_db37_dcc4_2a46_4033717cc6a2["update()"]
  82001dd5_db37_dcc4_2a46_4033717cc6a2 -->|calls| b4e0d823_0133_d156_5392_8b2e8367ebd9
  bfa86000_56fb_9b0f_e681_81fbf55feaec["doWatch()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| b4e0d823_0133_d156_5392_8b2e8367ebd9
  07ee0e45_f4fc_db24_4b7f_12ba4b3026a3["flushSchedulerQueue()"]
  b4e0d823_0133_d156_5392_8b2e8367ebd9 -->|calls| 07ee0e45_f4fc_db24_4b7f_12ba4b3026a3
  style b4e0d823_0133_d156_5392_8b2e8367ebd9 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)
  }
}