如何在 Vue 3 中停止变量的响应式行为_网络技术

如何在 Vue 3 中停止变量的响应式行为

发布时间 - 2026-01-01 00:00:00 点击率：次

在 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 完全可控的修改能力，是构建健壮表单逻辑的关键实践。

# vue # react # javascript # java # js # json # 浏览器 # ai # 数据清洗 # 表单提交 # red

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：HTML5怎么设置视频播放倍速_调整视频播放速度的实现方式【

下一篇：拼多多商家版怎么登陆多个账号_拼多多商家版多账号登录及子账号

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：HTML5怎么设置视频播放倍速_调整视频播放速度的实现方式【

下一篇：拼多多商家版怎么登陆多个账号_拼多多商家版多账号登录及子账号