• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • watch()

    watch API 与选项式 API this.$watch(以及相应的 watch 选项)完全等效。watch需要侦听特定的 data 源,并在单独的回调函数中副作用。默认情况下,它也是惰性的——即,回调是仅在侦听源发生更改时调用。

    • 与 watchEffect 比较,watch允许我们:

      • 惰性地执行副作用;
      • 更具体地说明应触发侦听器重新运行的状态;
      • 访问侦听状态的先前值和当前值。

    侦听一个单一源

    侦听器 data 源可以是返回值的 getter 函数,也可以是 ref:

    // 侦听一个getter
    const state = reactive({ count: 0 })
    watch(
    	() => state.count,
    	(count, prevCount) => {
    		/* ... */
    	}
    )
    
    // 直接侦听一个ref
    const count = ref(0)
    watch(count, (count, prevCount) => {
    	/* ... */
    })
    


    侦听多个源

    侦听器还可以使用数组同时侦听多个源:

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


    与 watchEffect 共享行为

    watchwatchEffect在手动停止,副作用无效(将onInvalidate作为第三个参数传递给回调),flush timing 和 debugging 有共享行为。

    类型声明:

    // 侦听单一源
    function watch<T>(
    	source: WatcherSource<T>,
    	callback: (
    		value: T,
    		oldValue: T,
    		onInvalidate: InvalidateCbRegistrator
    	) => void,
    		options?: WatchOptions
    ): StopHandle
    
    // 侦听多个源
    function watch<T extends WatcherSource<unknown>[]>(
    	sources: T
    	callback: (
    		values: MapSources<T>,
    		oldValues: MapSources<T>,
    		onInvalidate: InvalidateCbRegistrator
    	) => void,
    		options? : WatchOptions
    ): StopHandle
    
    type WatcherSource<T> = Ref<T> | (() => T)
    
    type MapSources<T> = {
    	[K in keyof T]: T[K] extends WatcherSource<infer V> ? V : never
    }
    
    // 参见 `watchEffect` 类型声明共享选项
    interface WatchOptions extends WatchEffectOptions {
    	immediate?: boolean // default: false
    	deep?: boolean
    }
    

    上篇:reactive()