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})
Logo

前往低代码交流专区

更多推荐