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: '$'}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
2018-11-30 lessc命令编译less