Vue3中watch监听的坑和基本使用方法

watch("监听的值",(newvalue,oldvalue)=>{},{deep:true,inmediate:true}) //可以接收3个参数
setup(){
    let sum=ref(0)
    let msg=ref('你好')
    let person=reactive({
        name:'张三',
        age:18,
        job:{
            job1:{
                salary:20            
            }        
        }    
    })
    //情况1:监听ref所定义的普通数据类型
    watch(sum,(newvalue,oldvalue)=>{
        console.log('sum变了',newvalue,oldvalue)    
    })
    //情况2：监听多个ref所定义的普通数据类型，通过数组的形式
    watch([sum,msg],(newvalue,oldvalue)=>{
         console.log('sum或者msg变了',newvalue,oldvalue)  //newvalue,oldvalue监听到的也是一个数组  
    })
    //情况三：监听reactive所定义的一个响应式数据的全部属性
        1，注意：此处无法正确获取到oldvalue的值
        2，注意：强制开启了深度监听(deep配置无效)
    watch(person,(newvalue,oldvalue)=>{
        console.log("person变化了",newvalue,oldvalue)    
    },{deep:false})//因为强制开启了深度监听所以即使配置关闭深度也无效
    //情况四：想要监听某个对象中的数据也需要通过回调的方式
    watch(()=person.name,(newvalue,oldvalue)=>{
            console.log("person的name变化了",newvalue,oldvalue)
    })
    //情况五：监听多个对象中的数据
     watch([()=person.name,()=person.age,](newvalue,oldvalue)=>{
            console.log("person的name或age变化了",newvalue,oldvalue)
    })
    //特殊情况:监听reactive定义的对象中的某个对象
    watch(()=>person.job,(newvalue,oldvalue)=>{
            console.log("person的job变化了",newvalue,oldvalue)
    },{deep:true})//此处的配置又生效了，因为reactive定义的数据已经转换为了proxy代理对象所以它里面的对象又可以使用deep配置，并且oldevalue也能正常获取
}