doWatch() — vue Function Reference

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

Function typescript CompilerSFC StyleProcessor calls 9 called by 4

Entity Profile

CompilerSFC→ StyleProcessor→ doWatch() — vue Function Reference

Dependency Diagram

graph TD
  1b10e00d_02e6_305e_b4ad_0e11475c3139["doWatch()"]
  38aa88fe_678d_7728_4258_240bdb85b32b["apiWatch.ts"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|defined in| 38aa88fe_678d_7728_4258_240bdb85b32b
  b8e035ae_6612_326b_69a3_033d12f34655["watchEffect()"]
  b8e035ae_6612_326b_69a3_033d12f34655 -->|calls| 1b10e00d_02e6_305e_b4ad_0e11475c3139
  413e720c_9471_1fbe_c160_e12f43128576["watchPostEffect()"]
  413e720c_9471_1fbe_c160_e12f43128576 -->|calls| 1b10e00d_02e6_305e_b4ad_0e11475c3139
  58317653_9bb1_32ea_f8cb_dc6066936032["watchSyncEffect()"]
  58317653_9bb1_32ea_f8cb_dc6066936032 -->|calls| 1b10e00d_02e6_305e_b4ad_0e11475c3139
  bb7994e2_ccda_3026_2419_abc4a3c80bfb["watch()"]
  bb7994e2_ccda_3026_2419_abc4a3c80bfb -->|calls| 1b10e00d_02e6_305e_b4ad_0e11475c3139
  bb7994e2_ccda_3026_2419_abc4a3c80bfb["watch()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| bb7994e2_ccda_3026_2419_abc4a3c80bfb
  4fb245e9_ef0c_c389_c113_747330caa63e["depend()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| 4fb245e9_ef0c_c389_c113_747330caa63e
  64ef09a1_8484_35c7_6154_30d045c3ca15["isRef()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| 64ef09a1_8484_35c7_6154_30d045c3ca15
  4dec4402_504f_d778_cdf1_34adb751a2fb["isShallow()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| 4dec4402_504f_d778_cdf1_34adb751a2fb
  998575fc_6104_64df_b366_9135ccd9e5f9["isReactive()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| 998575fc_6104_64df_b366_9135ccd9e5f9
  ad67e7ed_c155_de53_2de2_0458d2c842ef["get()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| ad67e7ed_c155_de53_2de2_0458d2c842ef
  331094c1_856e_230e_e56a_5500d0a6236f["queueWatcher()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| 331094c1_856e_230e_e56a_5500d0a6236f
  a4fba0c0_c91e_f56f_3c69_5a18514bb8e1["run()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| a4fba0c0_c91e_f56f_3c69_5a18514bb8e1
  f780ff44_85db_e399_d971_8fdf493ab15a["teardown()"]
  1b10e00d_02e6_305e_b4ad_0e11475c3139 -->|calls| f780ff44_85db_e399_d971_8fdf493ab15a
  style 1b10e00d_02e6_305e_b4ad_0e11475c3139 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()