vue3中的watch监听，有可能会遇到坑

两个坑：

1.监视reactive定义的响应式数据时，oldValue无法正确获取，强制开启了深度监听（deep配置无效）

2.监视reactive定义的响应式数据中某个属性时，deep配置有效

setUp(){
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
        name:"张三"，
        age:18,
        job:{
            j1:{
                salary:20
            }
        }
    })



    //情况一，监视ref所定义的一个响应式数据
    watch(sum,(newValue,oldValue)=>{
        console.log('sumg改变了',newValue,oldValue)
    },{immediate:true})


    //情况二，监视ref所定义的多个响应式数据
    watch([sum,msg],(newValue,oldValue)=>{
        console.log('sumg或msg改变了',newValue,oldValue)
    },{immediate:true})


    //情况三，监视reactive所定义的一个响应式数据的全部属性
    //    注意1.此处无法正确的获取oldValue
    //    注意2.强制开启了深度监视（deep配置无效）
    watch(person,(newValue,oldValue)=>{
        console.log('person改变了',newValue,oldValue)
    },{deep:false})


    //情况四，监视reactive所定义的一个响应式数据中的某个属性
    watch(()=>person.name,(newValue,oldValue)=>{
        console.log('person的name改变了',newValue,oldValue)
    })


    //情况五，监视reactive所定义的一个响应式数据中的某些属性
    watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
        console.log('person的name或age改变了',newValue,oldValue)
    })

    
    //特殊情况
    watch(()=>person.job,,(newValue,oldValue)=>{
        console.log('person的job改变了',newValue,oldValue)
    },{deep:true})//此处由于监视的reactive所定义的对象中的某个属性，所以deep配置有效

}

注意：一般开发中使用情况三就可以，如果操作其中的某个属性，单独给她拎出来就可以