8.watchEffect高级侦听器

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

如果用到 message 就只会监听 message 就是用到几个监听几个 而且是非惰性，且会默认调用一次

let message = ref('')
let message2 = ref('')
 watchEffect(() => {
    //console.log('message', message.value);
    console.log('message2', message2.value);
})

1.监听前调用一个函数

import { watchEffect, ref } from 'vue'
let message = ref('')
let message2 = ref('')
 watchEffect((oninvalidate) => {
    console.log('message2', message2.value);
    oninvalidate(()=>{
        console.log('before') // before在监听前调用
    })
})

2.停止监听

import { watchEffect, ref } from 'vue'
let message = ref('')
let message2 = ref('')
const stop = watchEffect((oninvalidate) => {
    console.log('message2', message2.value);
    oninvalidate(()=>{
        console.log('before') // before在监听前调用
    })
})
const stopWatch = () => stop() //停止监听

3.oninvalidate 的调用时机

import { watchEffect, ref } from 'vue'
let message = ref('')
let message2 = ref('')
const stop = watchEffect((oninvalidate) => {
    console.log('message2', message2.value);
    oninvalidate(()=>{
        console.log('before') // before在监听前调用
    })
},{
  flush:"post", // 调用时机选择
    onTrigger () { // onTrigger  可以帮助我们调试watchEffect

    }

})
stop()

副作用刷新时机 flush 一般使用 post

	pre	sync	post
更新时机	组件更新前执行	强制效果始终同步触发	组件更新后执行