如何在Vue 3/Nuxt 3中取消reactive变量的响应式？

你遇到的核心问题是引用传递：submitData = formData只是把reactive生成的代理对象的引用赋值给了新变量，两者指向同一个内存地址，所以修改submitData的属性会直接同步到原formData。要解决这个问题，你需要创建一个完全独立的新对象，切断和原reactive对象的引用关联，下面是几种可行的方案：

方案1：用toRaw获取原始对象后浅/深拷贝 #

reactive包装的对象是Vue的代理对象，先用toRaw拿到底层的普通JS对象，再通过扩展运算符或JSON序列化进行拷贝：

import { toRaw } from 'vue'

// 假设你的reactive对象定义如下
const formData = reactive({
  username: 'kishan',
  tempKey: '需要删除的临时字段',
  email: 'test@example.com'
})

const handleSubmit = () => {
  // 获取原始普通对象
  const rawForm = toRaw(formData)
  
  // 浅拷贝：适合对象层级不深的场景
  const submitData = { ...rawForm }
  
  // 如果对象有嵌套属性，用JSON序列化做深拷贝（注意：无法拷贝函数、Symbol等特殊类型）
  // const submitData = JSON.parse(JSON.stringify(rawForm))
  
  // 删除目标字段
  delete submitData.tempKey
  
  // 此时原formData完全不受影响
  console.log(formData.tempKey) // 仍存在
  console.log(submitData.tempKey) // undefined
}

方案2：使用structuredClone进行结构化克隆 #

现代浏览器和Node.js都支持structuredCloneAPI，它能安全地深拷贝大多数JS类型（包括嵌套对象、数组、Date等），结合toRaw使用更省心：

import { toRaw } from 'vue'

const handleSubmit = () => {
  const submitData = structuredClone(toRaw(formData))
  delete submitData.tempKey
  // 原formData无任何变化
}

方案3：手动筛选属性（精准控制） #

如果只需要保留特定字段，直接遍历原对象构建新对象，避免拷贝不需要的内容：

import { toRaw } from 'vue'

const handleSubmit = () => {
  const rawForm = toRaw(formData)
  const submitData = {}
  
  // 只保留需要提交的字段，自动排除要删除的键
  const allowedKeys = ['username', 'email']
  allowedKeys.forEach(key => {
    submitData[key] = rawForm[key]
  })
  
  // 或者反向排除不需要的字段
  // const excludedKeys = ['tempKey']
  // Object.keys(rawForm).forEach(key => {
  //   if (!excludedKeys.includes(key)) {
  //     submitData[key] = rawForm[key]
  //   }
  // })
}

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