vue3watch监听props的数据发现oldProps和newProps一样？

Question

SelectDevice.vue是一个通用的弹窗组件，根据父组件的传来的curKey来判是否是不同的调用者来调用的，如果是相同的调用者则之前选择的数据不删除，如果是不同的调用者调用则删除上次选择的数据，但是几次测试发现oldProps和newProps的一样，就好像没有保存上传的数据一样？是什么原因

//子组件 SelectDevice.vue

// 父组件
 <el-form-item label="所需配件">
    <el-input
        v-model="itemText2"
        readonly
        class="device-input"
        suffix-icon="el-icon-suitcase"
        @click.prevent="switchSelectRepair(true, 'repairFormData-pattenId')"
        >
    </el-input>
</el-form-item>
<el-form-item label="机型">
    <el-input
        v-model="itemText3"
        readonly
        class="device-input"
        suffix-icon="el-icon-suitcase"
        @click.prevent="switchSelectRepair(true, 'repairFormData-spareId')"
        >
    </el-input>
</el-form-item>
<SelectDevice @checked="updateData" :curKey="curkey" :isSelectRepair="isSelectRepair" @switch="switchSelectRepair" />

const switchSelectRepair = (flag:boolean, key?) => {
    isSelectRepair.value = flag
    if (flag && key) {
        curkey.value = key
    }
}

Answer 1

监听一个对象的话，在Vue中，目前的设计就是如此。Vue 官网有说明了，旧值和新值引用同一个对象/数组，所以相同。

可以看下这两个 issue:

https://github.com/vuejs/vue-...

https://github.com/vuejs/vue-...

可以用 Vue3 侦听多个源的方式，对需要监听的值进行监听

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

又或者可以通过一些手段，如

const obj = reactive({ a: 1, b: 2 });
const newObj = computed(() => {
  return JSON.parse(JSON.stringify(obj));
});
watch(newObj, (val, oldVal) => {
  console.log('oldVal :>> ', oldVal);
  console.log('val :>> ', val);
});
obj.a = 666;