Vue3之watchEffect

watchEffect：立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖发生变化时重新执行该函数。默认调用一次

let msg1 = ref<string>('第一个消息')

let msg2 = ref<string>('第二个消息')

watchEffect((oninvalidate)=>{

        console.log('msg1=====>',msg1.value)

        console.log('msg2=====>',msg2.value)

        oninvalidate(()=>{ //监听数据变化之前调用 清除副作用

            console.log('before')

        })

    })

停止监听

const stop =  watchEffect((oninvalidate)=>{

        console.log('msg1=====>',msg1.value)

        console.log('msg2=====>',msg2.value)

        oninvalidate(()=>{

            console.log('before')

        })

    })

stop()

flush:更多的配置选项  pre:组件更新前执行  sync:强制效果始终同步触发  post:组件更新后执行

watchEffect((oninvalidate)=>{

        console.log('msg1=====>',msg1.value)

        console.log('msg2=====>',msg2.value)

        oninvalidate(()=>{

            console.log('before')

        })

    },{

        flush:'pre' ,//pre:组件更新前执行  sync:强制效果始终同步触发  post:组件更新后执行

    })

onTrigger：更多的配置选项  开启debugger，帮助调试

watchEffect((oninvalidate)=>{

        console.log('msg1=====>',msg1.value)

        console.log('msg2=====>',msg2.value)

        oninvalidate(()=>{

            console.log('before')

        })

    },{

        onTrigger(){

            debugger

        }

    })