介绍
watchEffect
有两个参数,一个回调函数,一个是对象(设置配置项)watchEffect
执行传入的一个函数,同时响应式追踪其依赖,并在依赖更新时重新运行该函数watchEffect
是非惰性的,会默认自动调用一次的import { watchEffect, ref } from 'vue' let msg = ref<string>('炎夏') let msg2 = ref<string>('九月') watchEffect(() => { console.log('msg', msg.value); console.log('msg2', msg2.value); })
清除副作用
可以接收一个回调函数,在触发侦听之前调用,也就是值发生改变之前
比如我们可以在下面例子中,接收一个命名为
oninvalidate
的回调函数watchEffect((oninvalidate) => { oninvalidate(()=>{ // 可以用来做处理防抖或者处理逻辑之类的操作 // ... }) console.log('msg', msg.value); console.log('msg2', msg2.value); })
停止侦听
watchEffect
返回一个函数,在调用这个函数之后,watchEffect
就会停止侦听,不会再执行watchEffect
里的相关代码操作const stop = watchEffect((oninvalidate) => { oninvalidate(()=>{ // 可以用来做处理防抖或者处理逻辑之类的操作 // ... }) console.log('msg', msg.value); console.log('msg2', msg2.value); }) stop()
配置选项
watchEffect
可以设置配置项flush
:用来设置更新时机,有三个值:?pre:组件更新前执行,
?sync:强制效果始终同步触发,
?post:组件更新之后执行(常用)
onTrigger
:用来调试watchEffect
import { watchEffect, ref } from 'vue' watchEffect((oninvalidate) => { oninvalidate(()=>{ // ... }) console.log('msg', msg.value); console.log('msg2', msg2.value); },{ flush: 'post', onTrigger(){ debugger } })