• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 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
      }
    })
    

    上篇:readonly()

    下篇:watchEffect()