在 vue 3 中，直接赋值无法脱离响应式系统；若需对数据副本进行非侵入式操作（如删除字段而不影响原始 reactive 对象），应使用 `toraw()` 获取原始对象，再通过展开运算符创建独立副本。
在 Vue 3（包括 Nuxt 3）中，reactive() 创建的对象是深度响应式的——这意味着任何对其属性的修改（包括 delete 操作）都会触发依赖更新，且浅层赋值（如 submitData = formData）仅复制引用，而非数据本身。因此，delete submitData.key 实际上等同于 delete formData.key，导致原始表单数据被意外篡改。
✅ 正确做法是：先用 toRaw() 剥离响应式代理，再构造全新响应式副本。toRaw() 是 Vue 提供的安全 API，用于获取 reactive 对象底层的原始 JavaScript 对象，它不改变原对象，也不产生副作用。
以下是推荐实现方式：
import { reactive, toRaw } from 'vue'
const formData = reactive({
name: 'Alice',
email: 'alice@example.com',
tempToken: 'xyz123', // 提交时需移除的敏感字段
agree: true
})
// 创建独立、可自由修改的提交副本
const submitData = reactive({ ...toRaw(formData) })
// ✅ 安全删除，不影响 formData
delete submitData.tempToken
console.log(formData.tempToken) // 'xyz123' —— 依然存在
console.log(submitData.tempToken) // undefined —— 已删除⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- ❌ 不要使用 JSON.parse(JSON.stringify(obj)) 深拷贝：会丢失函数、undefined、Date、RegExp 等类型，且性能较差；
- ❌ 避免 Object.assign({}, toRaw(obj))：仅浅拷贝，嵌套对象仍共享引用；
- ✅ 若 formData 含深层嵌套结构且需完全隔离，建议结合 structuredClone()（现代浏览器支持）或 lodash.cloneDeep()，但注意 structuredClone 返回的是普通对象，需再次 reactive() 包裹；
- ? toRaw() 仅适用于由 Vue 创建的响应式对象，对 ref 或普通对象调用无意义。
总结：toRaw() + 展开语法 是 Vue 3 中最轻量、标准且语义清晰的“响应式脱钩”方案，适用于表单提交前的数据清洗、API 请求体构建等典型场景。保持原始 formData 的纯净性，同时赋予 submitData 完全可控的修改能力，是构建健壮表单逻辑的关键实践。
