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 } })