Vue 组件代码解析：数据深拷贝与响应式引用

这段代码定义了一个 Vue 组件，包括 data、props 和 watch 属性。

使用了 Vue 提供的 toRefs 函数，将 data 中的 info 属性转换为一个包含原始对象属性的响应式引用对象，以便在模板中使用。
data 函数返回一个对象，其中包含了一个 info 属性，该属性的值为通过 JSON 序列化和反序列化复制了 modalInfo 属性的值。
props 属性中定义了一个名为 modalInfo 的对象类型属性，其默认值为空对象。
watch 属性中定义了一个监听 modalInfo 属性变化的函数，当 modalInfo 属性发生变化时，将通过 JSON 序列化和反序列化复制 modalInfo 属性的值到 info 属性中。

代码示例：

import { toRefs } from 'vue';

export default {
  components: {},
  data() {
    // 这里存放数据
    return {
      info: JSON.parse(JSON.stringify(this.modalInfo)),
    };
  },
  props: {
    modalInfo: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    modalInfo() {
      this.info = JSON.parse(JSON.stringify(this.modalInfo))
    }
  },
};

解释：

toRefs 函数
- toRefs 函数用于将一个普通对象转换为一个包含响应式引用的对象。这使得我们在模板中可以直接访问对象属性，而无需使用 this 或 $data。
- 在本例中，将 info 属性转换为响应式引用对象，可以方便地在模板中使用 info 对象的属性。
数据深拷贝
- 通过 JSON 序列化和反序列化复制 modalInfo 属性的值，可以实现数据深拷贝。这确保了 info 属性的值与 modalInfo 属性的值是独立的，不会因为 modalInfo 的变化而改变。
watch 属性
- watch 属性用于监听某个属性的变化，并在属性变化时执行指定的函数。
- 在本例中，监听 modalInfo 属性的变化，并在 modalInfo 属性发生变化时，将 modalInfo 的值复制到 info 属性中。

总结：

这段代码使用 toRefs 函数创建了响应式引用对象，并通过 JSON 序列化和反序列化实现了数据深拷贝，最后使用 watch 监听 prop 变化，将 prop 的值复制到 data 中，以确保数据的一致性。