vue3监听props多个对象

在Vue 3中，如果你需要监听来自父组件的多个对象属性（即props），你可以使用`watch`选项或者`setup`函数结合`ref`对象来实现。以下是两种常见的方式：

**使用 watch 函数：**

export default {
  setup(props) {
    const obj1 = ref(props.obj1);
    const obj2 = ref(props.obj2);

    watch(
      () => [obj1.value, obj2.value], // 监听这两个对象的变化
      (newValues) => { // 当值变化时执行此回调
        console.log('obj1 or obj2 has changed:', newValues);
        // 这里可以对新值做进一步的操作
      },
      { deep: true } // 如果对象内部结构也可能会改变，设置deep为true
    );

    return { obj1, obj2 }; // 返回你需要的对象供模板中使用
  }
}

**使用 `reactive` 和 `toRef`：**

import { reactive, toRef } from 'vue';

export default {
  setup(props) {
    const obj1Ref = toRef(props, 'obj1');
    const obj2Ref = toRef(props, 'obj2');

    const combinedObj = reactive({ ...obj1Ref.value, ...obj2Ref.value });

    Object.keys(combinedObj).forEach(key => {
      const watcher = computed(() => combinedObj[key]);
      watcher.subscribe(value => {
        console.log(`Property ${key} in both objects has changed to`, value);
        // 执行其他操作...
      });
    });

    return { combinedObj };
  }
}

在这个例子中，我们组合了两个对象并创建了一个新的响应式对象，这样当任意一个对象的属性发生变化时，都会触发相应的监听。