vue3watch监听ref,reactive的注意事项

vue3中将数据变为响应式的方式有ref,reactive两种方式,ref主要是基本数据类型,reactive是将对象类型转为响应式数据

wacth属性在vue3中式一个函数,带有三个参数,第一个为想要监听的数据,第二个回调函数,第三个watch的配置

一:监听ref响应式的数据

       let sum = ref(1)
       let msg = ref("hhh")
        watch(
         // sum, //监听一个
            [sum,msg],  //监听多个
            (newValue, oldValue) => {
                console.log(newValue, oldValue) // 1 'hhh' undefined undefined
            },
            { immediate: true }   //立即监听属性
        )

二:监听reactive响应式的数据,需要注意几点

        let obj = reactive({
            name: "小猪妖",
            age: 12,
            job: {
                content: "砍柴"
            },
            a: {
                b: {
                     salary: 0.6,
                },
            },
        })
    //一:监听整个obj数据 此时的oldValue获取是有问题的,是vue3的一个bug,并且deep属性是强制开启
        watch(obj,(newValue,oldValue)=>{
             console.log(newValue,oldValue) 
            },{immediate:true,deep:true})  //此处配置deep属性无效果

    //二:监听obj中的某一个属性 此时监听的数据是需要调用的,否侧无效,且oldValue值正常获取
        watch(()=>obj.name,(newValue,oldValue)=>{
             console.log(newValue,oldValue)  //小乌鸦 undefined
            },{immediate:true}) 

    //三:监听obj中的多个属性 且oldValue值正常获取
        watch([()=>obj.name,()=>obj.age],(newValue,oldValue)=>{
             console.log(newValue,oldValue)  //小乌鸦 12 undefined undefined
            },{deep:false,immediate:true}) 
   //四:监听obj中的某一个属性且该属性的值为对象时,此时是需要开启deep的配置,否侧无法深度监听里面的数据,且获取的oldValue有问题 
        watch(obj.a,(newValue,oldValue)=>{
             console.log(newValue,oldValue)  //
            },{deep:false,immediate:true}) //此处配置deep属性