详解Vue3中的watch侦听器和watchEffect高级侦听器

import { ref, watch } from 'vue'
  
let message = ref({
    nav:{
        bar:{
            name:""
        }
    }
})
watch(message, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
},{
    immediate:true,
    deep:true

import { ref, watch ,reactive} from 'vue'
let message = ref('')
let message2 = ref('')
  
watch([message,message2], (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
})

import { ref, watch ,reactive} from 'vue'
let message = reactive({
    nav:{
        bar:{
            name:""
        }
    }
})
watch(message, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
})

import { ref, watch ,reactive} from 'vue'
let message = reactive({
    name:"",
    name2:""
})
watch(()=>message.name, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
})

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

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);
})

const stop =  watchEffect((oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(()=>{
  
    })
    console.log('message2', message2.value);
},{
    flush:"post",// pre:组件更新前执行;sync:强制效果始终同步触发,post:组件更新后执行
    onTrigger () { //onTrigger  可以帮助我们调试 watchEffect
  
    }
})
stop()