[JavaScript知识库]Vue3：watch属性的坑||监视reactive数据时遇到的问题||深度监视||无法获取oldValue的原因

Vue3在使用watch属性监视reactive定义的响应式数据时遇到的坑：
1.当监测对象为对象类型时，无法获取到oldValue。
2.当监测对象是reactive定义的数据时，强制开启深度监视。
3.当监测对象时reactive定义数据中的一个类型为对象的属性时，需要手动开启深度监视。

	    //  监视ref定义的一个响应式数据
        watch(sum,(newV,oldV)=>{
            console.log(newV+'-'+oldV);
        })
        watch(msg,(newV,oldV)=>{
            console.log(newV+'-'+oldV);
        })

        // 监视ref定义的多个响应式数据
        watch([sum,msg],(newV,oldV)=>{
            console.log(newV,oldV);
        })

        // watch可以携带三个参数，第三个为配置项对象
        watch([sum,msg],(newV,oldV)=>{
            console.log(newV,oldV);
        },{immediate: true,deep: true})

        // 监视reactive数据，
        // 注意：1.监视reactive数据无法获取oldValue
        //      2.强制开启了深度监视，无法关闭
         watch(person,(newV,oldV)=>{
             console.log(newV,oldV);
         })

        // 监视reactive数据中的一个属性
        // 能够获取oldV
        watch(()=>person.name,(newV,oldV)=>{
            console.log(newV,oldV);
        })

        // 监视reactive数据的某些属性
        watch([()=>person.name,()=>person.age],(newV,oldV)=>{
            console.log(newV,oldV);
        })

        // 监视reactive数据中的一个属性也为对象时：
        // 拿不到oldV
        watch(()=>person.job,(newV,oldV)=>{
            console.log(newV,oldV);
        },{deep:true})

**注：**必须获取reactive中的oldValue时，可以将该属性提取出来使用ref定义。

如何监视ref定义的对象类型数据？
两种方法：

       // 方法一：通过value，ref的value值就是reactive代理 
	   watch(person.value,(newV,oldV)=>{
            console.log(newV,oldV);
        })
	   // 方法二：通过开启深度监视
        watch(person,(newV,oldV)=>{
            console.log(newV,oldV);
        },{deep: true})