[vue] Vue3有bug？隐藏在watch中的两个坑

接下来描述的两个问题，应该是vue3中的bug，

目前使用的vue版本是3.3.4

最后测试日期是2023年8月18日下午

只要是用watch监视reactive定义的对象或者数组，都会出现以下两个问题 ，举例：

setup(){

let data = reactive({
    a:"1",
    b:"2",
    c:{
        d:"test"
    }
)}

// 以下代码就会出现2个问题
watch(data,(newv,oldv)=>{ // 监视data
   console.log("data改变了",newv,oldv);
},{deep:false})

watch(data.c,(newv,oldv)=>{ // 监视data.c
   console.log("data.c改变了",newv,oldv);
},{deep:false}) 

// 注意：只要是监听reactive定义的对象、数组，就都会遇到这问题，很坑
// 但如果监听data.a或者data.b 这种基本类型的就不会有问题

}

reactive({ 监听这里面的东西，只要是对象或数组，都会有这俩问题 })

1.问题1：无法正确获取oldvalue

        watch监听的回调函数接收两个参数 newvalue 和 oldvalue (改变数据时的新数据和旧数据)

        在监听ref数据时一切正常，但监听reactive的时候，获取的oldvalue是错误的

        数据：let data = reactive({ test : "1" })

        场景：将"1" 改成"2"，然后通过watch的回调函数获取newvalue和oldvalue

        正确情况：newvalue : {test:"2"}  ,  oldvalue : {test:"1"}

        实际情况：newvalue : {test:"2"}  ,  oldvalue : {test:"2"}  问题就出在这，这个是错的

如果必须这样监视，那么针对这个bug的解决方案就是把reative定义的数据挑出来，用ref单独定义。

---

2.问题2：深度监视默认开启，且无法关闭

在这种情况下，还会默认开启深度监视(deep:true)

所以无论是配置deep:true 或者 deep:false

都是不生效的