Vue.js watch()用法及代码示例

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

类型

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

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

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

type WatchSource<T> =
  | Ref<T> // 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
  }
})

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 watch()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。