watch()

监视一个或多个响应式数据源并在源更改时调用回调函数。

类型

// watching single source
function watch(
  source: WatchSource,
  callback: WatchCallback,
  options?: WatchOptions
): StopHandle

// watching multiple sources
function watch(
  sources: WatchSource[],
  callback: WatchCallback,
  options?: WatchOptions
): StopHandle

type WatchCallback = (
  value: T,
  oldValue: T,
  onCleanup: (cleanupFn: () => void) => void
) => void

type WatchSource =
  | Ref // ref
  | (() => T) // getter
  | T extends object
  ? T
  : never // reactive object

interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean // default: false
  deep?: boolean // default: false
  flush?: 'pre' | 'post' | 'sync' // default: 'pre'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
}

为了便于阅读，类型被简化了。

细节

watch()默认情况下是惰性的，即仅当监视的源发生更改时才调用回调。

第一个参数是观察者的来源。源可以是以下之一：

• 返回值的 getter 函数
• 一个参考
• 反应性对象
• 或上述数组。

第二个参数是源更改时将调用的回调。回调接收三个参数：新值、旧值和用于注册副作用清除回调的函数。清理回调将在下一次重新运行效果之前调用，并可用于清理无效的副作用，例如挂起的异步请求。

当观察多个源时，回调接收到两个数组，其中包含与源数组对应的新/旧值。

第三个可选参数是一个支持以下选项的选项对象：

• immediate：在观察者创建时立即触发回调。旧值将 undefined 在第一次调用时出现。
• deep：如果源是对象，则强制深度遍历源，以便回调触发深度突变。请参阅深度观察者。
• flush：调整回调的刷新时间。请参阅回调刷新时间。
• onTrack / onTrigger:调试观察者的依赖。请参阅观察程序调试。

相比 watchEffect()，watch()允许我们：

• 懒惰地执行副作用；
• 更具体地说明应该触发观察者重新运行的状态；
• 访问监视状态的先前值和当前值。

例子

const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

当观察多个源时，回调接收包含与源数组对应的新/旧值的数组：

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

使用 getter 源时，仅当 getter 的返回值发生更改时才会触发观察程序。如果您希望回调即使在深度突变时也能触发，您需要使用{deep: true}，显式强制观察者进入深度模式。请注意，在深度模式下，如果回调是由深度突变触发的，则新值和旧值将是同一个对象：

const state = reactive({ count: 0 })
watch(
  () => state,
  (newValue, oldValue) => {
    // newValue === oldValue
  },
  { deep: true }
)

当直接观察反应对象时，观察者自动处于深度模式：

const state = reactive({ count: 0 })
watch(state, () => {
  /* triggers on deep mutation to state */
})

watch()共享相同的刷新时间和调试选项watchEffect()：

watch(source, callback, {
  flush: 'post',
  onTrack(e) {
    debugger
  }
})

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com