VUE3 API之watch与watchEffect

watch(source,callback,options)

官方术语：侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

watchEffect(effect,options)

官方术语：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

总结：

watch:

默认仅在监听发生改变时触发回调，设置 immediate:true 可在侦听器创建时立即触发回调。

第一个参数是监听源：source，可以是以下几种
- 一个函数（getter）,返回一个值。这种情况下，默认监听值的子属性，深层监听需要设置{deep:true}。见例子一。
- 响应式对象----这种情况下，可以深层监听。
- ref
- 由以上类型的值组成的数组。

第二个参数是发生变化时要调用的函数:callback。包含三个参数，新值，旧值，一个用于注册副作用清理回调的函数。多个监听源callback的参数，见例子二，获取新旧值，见例子三。第三个参数见下文。
第三个可选的参数是一个对象，支持以下这些选项：

immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。
flush：调整回调函数的刷新时机。默认‘pre’，组件更新之前被调用；‘post’，在组件渲染之后执行,onMounted后，可以访问DOM；‘sync’,监听源发生改变时立即执行（慎，参考例子二，修改了监听源，却只触发了一次callback，设置{ flush: 'sync' }，后，会触发两次callback）。
onTrack / onTrigger：调试侦听器的依赖。

watchEffect:

默认在侦听器创建时立即触发回调，在执行中收集监听源；在组件更新之前被调用（flush:'pre'）;
第一个参数是要运行的副作用函数。这个副作用函数的参数也是一个函数，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用。
第二个参数可选的参数是一个对象，支持以下这些选项:
- flush?: 'pre' | 'post' | 'sync' // 默认：'pre'
- onTrack?: (event: DebuggerEvent) => void
- onTrigger?: (event: DebuggerEvent) => void

+++++++++++++++++++++++++++++++++++++++++++++++++++++

：清除副作用函数，用来清理无效的副作用-触发的时机如下：

收集的监听源发生改变时，在下一次副作用函数执行前
监听器被停止(执行stop，或是组件被卸载)

使用场景，一个异步请求没有完成需要取消请求，

watchEffect(async (onCleanup) => {

  const { response, cancel } = doAsyncWork(id.value)

  // `cancel` 会在 `id` 更改时调用

  // 以便取消之前

  // 未完成的请求

  onCleanup(cancel)

  data.value = await response

})

或是防抖，上一个异步请求还没返回，又触发了一次副作用函数（监控用户输入不停的请求后台），需要取消上次的请求，进行新的请求。

+++++++++++++++++++++++++++++++++++++++++++++++++++++

：返回值是一个用来停止该副作用的函数。

const stop = watchEffect(() => {})

// 当不再需要此侦听器时:

stop()

+++++++++++++++++++++++++++++++++++++++++++++++++++++

watchPostEffect()#

watchEffect() 使用 flush: 'post' 选项时的别名。

watchSyncEffect()#

watchEffect() 使用 flush: 'sync' 选项时的别名。

+++++++++++++++++++++++++++++++++++++++++++++++++++++

例子一

const original1 = reactive({ count: { unit: { ccc: 1 } } });

const stop3 = watch(() => original1.count.unit.ccc, (n, o) => {

    console.log('触发了original1.count.unit.ccc监听');

})

original1.count.unit.ccc = 2;

//控制台

触发了original1.count.unit.ccc监听

//改为

const original1 = reactive({ count: { unit: { ccc: 1 } } });

const stop3 = watch(() => original1.count.unit, (n, o) => {

    console.log('触发了original1.count.unit.ccc监听');

})

original1.count.unit.ccc = 2;

//控制台   无打印

//添加watchOptions {deep:true}

const original1 = reactive({ count: { unit: { ccc: 1 } } });

const stop3 = watch(() => original1.count.unit, (n, o) => {

　　console.log('触发了original1.count.unit.ccc监听');

}, { deep:true })

original1.count.unit.ccc = 2;

//控制台

触发了original1.count.unit.ccc监听

例子二

const stop3 = watch([() => original1.count.unit.ccc, original], ([prevN1, prevN], [oldN1, oldN]) => {

    console.log('触发了original1.count.unit.ccc监听');

    console.log(prevN1, prevN);

    console.log('触发了original监听');

    console.log(oldN1, oldN);

},)

original1.count.unit.ccc = 2

original.count.unit = '*'

浏览打印

　例子三

const original = reactive({ count: { unit: '$' } });

const stop = watch(() => JSON.parse(JSON.stringify(original.count)), (n, o) => {//A watch source can only be a getter/effect

    console.log('watch');

    console.log(n, o);

}, { deep: true })

original.count.unit = '*'

//浏览器打印

{unit: '*'} {unit: '$'}