vue3 watch 监听表单绑定的对象 newVal 和oldVal 相同问题解决

问题描述：

        vue3 中使用Element plus 表单组件绑定对象时，使用watch 监听绑定的变量，需要根据表单中某一个单选的值变化处理相应的代码逻辑。但是 watch 监听返回的 newVal 和 oldVal 相同。

 解决方法：

import { reactive, computed} from 'vue';

// 表单绑定的数据

const formData = reactive({
        name:'',

        value:'',
})

若要使用watch 监听formData 中某个属性的变化时，需要先将依据formData 使用computed 创建一个变量。

const tempData = computed(() => ({ ...formData}));

之后再用watch 监听tempData  则就能在表单的操作中监听到formData 的变化。

watch(() => tempData.value, (newVal, oldVal)=>{
        // 此时在表单的操作过程中，newVal, oldVal 就会不一样了，
})