vue3 如何将一个ref 定义的响应式对象 变成普通对象

Vue 3 中，`ref` 是一个响应式的数据容器，它会自动跟踪其值的变化并更新视图。如果你想要将 `ref` 定义的响应式对象转换为普通的 JavaScript 对象，可以这样做：

1. 首先获取 `ref` 的实际值，通常是一个 `Object` 或者 `Array` 类型，因为 Vue 的响应式系统只对基础类型的引用进行管理，所以直接访问 `ref.value` 就能得到非响应式的原始对象。

const myRef = ref({ key: 'value' }); // 假设这是一个响应式对象
const normalObj = myRef.value; // 此时normalObj就是非响应式的对象

2. 使用 `JSON.parse(JSON.stringify(myRef.value))` 这种方式深拷贝一次，也可以得到一个普通的对象。但这并不推荐，因为它可能会失去一些 Vue 环境下的特殊处理，比如 computed、watch 和事件绑定等。

const plainObject = JSON.parse(JSON.stringify(myRef.value)); // 深拷贝后的普通对象

注意：这种方法仅适用于纯数据对象，对于包含函数或者循环引用的对象，深拷贝可能会有问题。