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: '$'}