Vue3组合式API中如何移除响应式对象的Proxy代理？

toRefs 不具备剥离响应式代理的作用，它的核心功能是将 reactive 对象的每一个属性转换为独立的 ref 类型，保证解构赋值后依然能保留和原对象的响应式关联，所以你现在的用法自然达不到预期。

以下是可行的实现方案：

方案1：使用 Vue3 内置 toRaw 方法（最优选择） #

toRaw 是 Vue3 官方提供的 API，专门用于返回响应式对象对应的原始普通对象，无额外性能开销，能完整保留对象的所有属性和值。
修改后的代码如下：

<script setup>
import { reactive, defineEmits, toRaw } from "vue"; // 引入toRaw，移除不需要的toRefs
import addRow from "../helperFunctions/addRow.js";

// Variables
let form = reactive({
  Equipment: "",
  Make: "",
  ModelNum: "",
  Barcode: "",
  SerialNum: "",
  Location: "",
  Condition: "",
});

const formArray = [];

const submitForm = function () {
  // 直接通过toRaw获取原始普通对象
  const plainForm = toRaw(form);
  formArray.push(plainForm);
  console.log(formArray);

  addRow(formArray);
};
</script>

方案2：JSON 序列化+反序列化（适合仅含基础类型的表单） #

如果你的表单对象内只有字符串、数字、布尔值这类基础数据类型，没有 Date、undefined、函数、Symbol 等特殊类型，也可以用该方法彻底剥离代理：

const plainForm = JSON.parse(JSON.stringify(form))

方案3：对象展开浅拷贝（仅适合单层结构的表单） #

你当前的表单是单层对象结构，也可以直接通过展开运算符做浅拷贝得到普通对象：

const plainForm = {...form}

以上三种方案得到的都是无 Proxy 代理的普通对象，推入数组后就可以满足 Stein 的格式要求正常请求。

内容的提问来源于stack exchange，提问作者Alan