watch() — vue Function Reference

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

Function typescript CoreInstance Reactivity calls 2 called by 1

Entity Profile

CoreInstance→ Reactivity→ watch() — vue Function Reference

Dependency Diagram

graph TD
  3cbf8aba_5563_0e8d_9c9d_e4f8166bfefb["watch()"]
  b2856354_51ef_6ef1_ec4b_ae2e72186601["doWatch()"]
  b2856354_51ef_6ef1_ec4b_ae2e72186601 -->|calls| 3cbf8aba_5563_0e8d_9c9d_e4f8166bfefb
  0bfbb910_39a9_6fb2_a13f_4bd26024d513["watchEffect()"]
  3cbf8aba_5563_0e8d_9c9d_e4f8166bfefb -->|calls| 0bfbb910_39a9_6fb2_a13f_4bd26024d513
  b2856354_51ef_6ef1_ec4b_ae2e72186601["doWatch()"]
  3cbf8aba_5563_0e8d_9c9d_e4f8166bfefb -->|calls| b2856354_51ef_6ef1_ec4b_ae2e72186601
  style 3cbf8aba_5563_0e8d_9c9d_e4f8166bfefb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/v3/apiWatch.ts lines 139–152

export function watch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: any,
  options?: WatchOptions<Immediate>
): WatchStopHandle {
  if (__DEV__ && typeof cb !== 'function') {
    warn(
      `\`watch(fn, options?)\` signature has been moved to a separate API. ` +
        `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
        `supports \`watch(source, cb, options?) signature.`
    )
  }
  return doWatch(source as any, cb, options)
}