doWatch() — vue Function Reference

Architecture documentation for the doWatch() function in apiWatch.ts from the vue codebase.

Function typescript VueCore Observer calls 9 called by 4

Entity Profile

VueCore→ Observer→ doWatch() — vue Function Reference

Dependency Diagram

graph TD
  bfa86000_56fb_9b0f_e681_81fbf55feaec["doWatch()"]
  e5380f01_49bc_d965_1141_151fb5c6c097["apiWatch.ts"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|defined in| e5380f01_49bc_d965_1141_151fb5c6c097
  089bdced_38c8_41bb_6c2b_1e392ee69bf4["watchEffect()"]
  089bdced_38c8_41bb_6c2b_1e392ee69bf4 -->|calls| bfa86000_56fb_9b0f_e681_81fbf55feaec
  0da9c5bd_b798_a9c1_4ea7_8f9aa8a7326d["watchPostEffect()"]
  0da9c5bd_b798_a9c1_4ea7_8f9aa8a7326d -->|calls| bfa86000_56fb_9b0f_e681_81fbf55feaec
  2ddd940b_baff_85a1_bb93_8a3674891dd2["watchSyncEffect()"]
  2ddd940b_baff_85a1_bb93_8a3674891dd2 -->|calls| bfa86000_56fb_9b0f_e681_81fbf55feaec
  8fa07b52_41f7_9cba_4986_3b311b491283["watch()"]
  8fa07b52_41f7_9cba_4986_3b311b491283 -->|calls| bfa86000_56fb_9b0f_e681_81fbf55feaec
  8fa07b52_41f7_9cba_4986_3b311b491283["watch()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| 8fa07b52_41f7_9cba_4986_3b311b491283
  f27f8043_126c_8edc_d490_d3e19f848317["depend()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| f27f8043_126c_8edc_d490_d3e19f848317
  f264de96_ce30_ab7e_6f2f_bd7a1a19804f["isRef()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| f264de96_ce30_ab7e_6f2f_bd7a1a19804f
  9c37c7df_b33a_f5b7_931d_e335ff41ce94["isShallow()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| 9c37c7df_b33a_f5b7_931d_e335ff41ce94
  cfa7ea60_e211_687f_9deb_b342e671fcc2["isReactive()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| cfa7ea60_e211_687f_9deb_b342e671fcc2
  9af667fb_20e8_0763_f10d_d63da0255ba8["get()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| 9af667fb_20e8_0763_f10d_d63da0255ba8
  b4e0d823_0133_d156_5392_8b2e8367ebd9["queueWatcher()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| b4e0d823_0133_d156_5392_8b2e8367ebd9
  71876f35_b702_de2d_a393_99f72b820099["run()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| 71876f35_b702_de2d_a393_99f72b820099
  be270b49_47e8_8f99_8878_880772c2e703["teardown()"]
  bfa86000_56fb_9b0f_e681_81fbf55feaec -->|calls| be270b49_47e8_8f99_8878_880772c2e703
  style bfa86000_56fb_9b0f_e681_81fbf55feaec fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/v3/apiWatch.ts lines 154–353

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  {
    immediate,
    deep,
    flush = 'pre',
    onTrack,
    onTrigger
  }: WatchOptions = emptyObject
): WatchStopHandle {
  if (__DEV__ && !cb) {
    if (immediate !== undefined) {
      warn(
        `watch() "immediate" option is only respected when using the ` +
          `watch(source, callback, options?) signature.`
      )
    }
    if (deep !== undefined) {
      warn(
        `watch() "deep" option is only respected when using the ` +
          `watch(source, callback, options?) signature.`
      )
    }
  }

  const warnInvalidSource = (s: unknown) => {
    warn(
      `Invalid watch source: ${s}. A watch source can only be a getter/effect ` +
        `function, a ref, a reactive object, or an array of these types.`
    )
  }

  const instance = currentInstance
  const call = (fn: Function, type: string, args: any[] | null = null) => {
    const res = invokeWithErrorHandling(fn, null, args, instance, type)
    if (deep && res && res.__ob__) res.__ob__.dep.depend()
    return res
  }

  let getter: () => any
  let forceTrigger = false
  let isMultiSource = false

  if (isRef(source)) {
    getter = () => source.value
    forceTrigger = isShallow(source)
  } else if (isReactive(source)) {
    getter = () => {
      ;(source as any).__ob__.dep.depend()
      return source
    }
    deep = true
  } else if (isArray(source)) {
    isMultiSource = true
    forceTrigger = source.some(s => isReactive(s) || isShallow(s))
    getter = () =>
      source.map(s => {
        if (isRef(s)) {
          return s.value
        } else if (isReactive(s)) {
          s.__ob__.dep.depend()
          return traverse(s)
        } else if (isFunction(s)) {
          return call(s, WATCHER_GETTER)
        } else {
          __DEV__ && warnInvalidSource(s)
        }
      })
  } else if (isFunction(source)) {
    if (cb) {
      // getter with cb
      getter = () => call(source, WATCHER_GETTER)
    } else {
      // no cb -> simple effect
      getter = () => {
        if (instance && instance._isDestroyed) {
          return
        }
        if (cleanup) {
          cleanup()