vue3中的watch用法详解

致敬原作，在这儿→ Vue3中watch的最佳实践 - 掘金 (juejin.cn)

watch(WatcherSource, Callback, [WatchOptions])

type WatcherSource<T> = Ref<T> | (() => T) 

interface WatchOptions extends WatchEffectOptions {
    deep?: boolean // 默认：false 
    immediate?: boolean // 默认：false 
    flush?: string // 默认：'pre'
}

参数说明：

WatcherSource: 用于指定要侦听的响应式数据源。侦听器数据源可以是返回值的 getter 函数，也可以直接是 ref。

Callback: 执行的回调函数，可依次接收当前值newValue，先前值oldValue作为入参。

WatchOptions：deep、immediate、flush可选。

• 当需要对响应式对象进行深度监听时，设置deep: true。

• 默认情况下watch是惰性的，当我们设置immediate: true时，watch会在初始化时立即执行回调函数。

• flush 选项可以更好地控制回调的时间。它可设置为 pre、post 或 sync。

  • 默认值是 pre，指定的回调应该在渲染前被调用。
  • post 值是可以用来将回调推迟到渲染之后的。如果回调需要通过 $refs 访问更新的 DOM 或子组件，那么则使用该值。
  • 如果 flush 被设置为 sync，一旦值发生了变化，回调将被同步调用（少用，影响性能）。