watchEffect高级侦听

watchEffect

1、使用哪个就监听哪个的值 ：

import { watchEffect,ref } from 'vue';

let message1 = ref<string>('明天你好')

let message2 = ref<string>('加油')

watchEffect(()=>{

    console.log('message1:',message1.value);

    console.log('message2:',message2.value);

})

 

2、清除副作用

Tips：就是在触发前会调用一个函数可以处理你的逻辑，例如防抖

import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{

})
console.log('message2', message2.value);
})

3、停止追踪，watchEffect返回一个函数。调用之后会停止更新

const stop = watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{

})
console.log('message2', message2.value);
},{
flush:"post",
onTrigger () {

}
})
stop()    //调用停止更新

4、更多的配置项，一般都使用post

更新时机：pre:组件更新之前执行   sync：强制效果始终同时出发  post ：组件更新之后执行

 

 上图所示，设置了flush:post之后，可以在DOM加载完毕后获取到这个input组件

5、利用onTrigger可以调试watchEffect

import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{

})
console.log('message2', message2.value);
},{
flush:"post",
onTrigger () {

}
})