首页IT科技vue3 watch computed(vue3之watchEffect详解)

vue3 watch computed(vue3之watchEffect详解)

时间2025-07-09 19:05:50分类IT科技浏览4710
导读:watchEffect函数的作用: 传入的一个函数,当依赖项变化的时候,重新执行改函数。...

watchEffect函数的作用:

传入的一个函数,当依赖项变化的时候,重新执行改函数。

watchEffect函特性:

与watch相似都可以监听一个数据源。

但是watchEffect会在初始化的时候调用一次,与watch的immediate类似。

watchEffect使用

watchEffect(() => { console.log(`当${sum.person.age}的值变化的时候调用,初始化 的时候也调用一次 `) }) //打印结果 //18 的值变化了!初始化调用 //19 的值变化了依赖项调用

watchEffect接收一个副作用函数

watchEffect(onInvalidate => { console.log(`${sum.person.age} 的值变化了!`) onInvalidate(() => { console.log(清除副作用函数执行了!) }) }) //打印结果 //18 的值变化了! //清除副作用函数执行了! //19 的值变化了!

onInvalidate清除副作用函数注意点

1.该函数总是在watchEffect执行的时候再次执行 2.当组件被销毁的时候该函数再次执行 3.该函数总是优先于watchEffect中的同步/异步代码执行 4.Promize函数的执行应该在该函数下面

onInvalidate清除副作用函数的执行时机由flush控制

watchEffect(onInvalidate => { console.log(`${sum.person.age} 的值变化了!`) onInvalidate(() => { console.log(清除函数执行了!) }) },{ //pre 在组件更新更新前运行,默认为pre //post在组件更新更新后运行 //sync强制效果始终同步触发。然而,这是低效的,应该很少需要。 flush:post })//打印结果 //18 的值变化了! //清除函数执行了! // 19 的值变化了!

watchEffect侦听器调试

watchEffect(() => { console.log(`${sum.person.age} 的值变化了!`) }, { onTrack(e) { //追踪其依赖的时候触发,只能在开发者模式下使用 console.log(e.target) }, onTrigger(e) { //依赖项被改变的时候触发,只能在开发者模式下使用 console.log(e.target) } })

watchPostEffect

watchEffect 的别名,带有 flush: ‘post’ 选项。

watchSyncEffect

watchEffect 的别名,带有 flush: ‘sync’ 选项。

#watch

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
格式化打印字符串(troff命令 – 格式化打印机和字符终端的文本) 如何快速恢复被降权的网站排名(提升百度SEO排名的6个知识点)