vue深拷贝和浅拷贝（js改一个对象的值，另一个对象的值也发生变化）

最新推荐文章于 2025-11-22 08:34:34 发布
原创 最新推荐文章于 2025-11-22 08:34:34 发布 · 1.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js #javascript

本文探讨了在Vue项目中使用v-model时遇到的数据绑定问题，即修改addForm时已push到data1中的数据也随之变化。通过分析深浅拷贝原理，提供了解决方案：利用JSON.stringify和JSON.parse实现深拷贝。

在项目当中遇到这样一个问题，我是用v-model跟这个addForm绑定一些值，添加一行的时候把这个addForm push到data1里面，可是后来发现，当我改了addForm的属性的时候，data1里面已经push进去的数据也全都会随着addForm的改变而改变，看了好久，恍然大悟，发现会不会是深浅拷贝的问题，试了一下，果然是
在这里插入图片描述
在这里插入图片描述

1.原理

  • 浅拷贝：新对象赋值，只是取的旧对象栈中的值，也就是引用对象的值。上述问题也就是连指向都复制了，所以造成数据全都改变
  • 深拷贝：会在堆里边开辟一个空间，存放自己的对象值

2.解决办法

let form = JSON.parse(JSON.stringify(this.addForm));
          this.data1.push(form);

JSON.stringify()对象转为串，JSON.parse()串转为对象，JSON操作是深拷贝操作，这样转化一下就好了

Vue——表单修改数据相互影响深拷贝处理
每天一个前端小知识~
01-07 2476
问题 Vue父子组件传递数据的时候，浅拷贝会出现修改数据相互影响的情况。比如修改失败，前端的页面表单的数据还是改变了 解决方案 使用深拷贝代替浅拷贝 this.addForm = JSON.parse(JSON.stringify(memberInfo)) 因为增加和修改共用一个表单，所以每次打开表单时增加要给表单赋空值 效果图 会员名是不可以修改的，disabled 会员组件页代码 <template> <div> <!-- 面包屑导航区域 -->
Vue深拷贝、浅拷贝
weixin_44590591的博客
09-14 960
原理： 深拷贝：在堆里边开辟一个新的空间，存放自己的属性值 浅拷贝：新对象赋值，只是取的旧对象栈中的值（当一个对象赋给另一个对象时，修改另一个对象的值会影响前一个对象的值） 使用方法 1、浅拷贝 //如果修改b对象中的name，会同时把a对象中的name修改掉 let a = {name:"浅拷贝"}; let b = {name:"深拷贝"}; b = a; 2、深拷贝 //JSON.stringify()对象转为串，JSON.parse()串转为对象，JSON操作是深拷贝操作 // 深拷贝：防止修改原
深拷贝的方法以及VUE中的使用
LMQ_949244171的博客
11-26 817
深拷贝的方法 /** * deep copy * @param source * @return {*} */ export function deepClone(source) { if (!source && typeof source !== 'object') { throw new Error('error arguments', 'deepClone') } const targetObj = source.constructor === Array
vue复制对象
baidu_32784445的博客
04-19 1877
/** 判断值是否存在 */ isNotExists (value) { return value === undefined || value === null || value === '' || value === 'undefined' }, // 对象复制 name为空时obj1复制到obj2 不为空则在obj2中的名字为 name + 原对象名字首字母大写命名 copyObjec...
​​Vue 对象拷贝教程​
最新发布
Rysxt_的博客
11-22 256
以上做法可有效避免“引用共享”导致的数据联动问题。
vue 复制data里面的对象/数组，改复制出来的对象/数组，为什么data里面的对象/数组也被改了?深浅拷贝
weixin_46603501的博客
03-23 1669
将data里面的sensors数组的一部分复制给arr 数组； 发现改动arr数组，data里面的sensors数组也被改动了； 发现简单的复制只是浅拷贝； 改动一个，另外一个也被改动； 这就是问题的原因，因为它们指向都是同一块内存；想要改变一个对象里面的值，另一个对象不受影响，就要在内存开辟多另外一个空间存值，那就要实现深拷贝； 方法： 1. 对象的深拷贝 var a ={1, 2, 3}; var b = a; (简单的赋值不是深拷贝） 深拷贝： b = {a[0], a[1]..
vue实现对象的复制
我是死宅萝莉控的博客
05-18 2915
vue数组对像进行复制
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
11-20
本文实例讲述了JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）。分享给大家供大家参考，具体如下： 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。  浅拷贝 只是拷贝了基本类型的数据，而引用类型...
vue 使用lodash实现对象数组深拷贝操作
10-14
深拷贝与浅拷贝的区别在于，深拷贝会创建一个全新的对象，包含原始对象的所有属性和值，包括嵌套对象和数组的每一个元素。当修改拷贝后对象的任何属性时，都不会影响到原始对象。这在处理复杂数据结构时尤其重要，...
vue js对象拷贝的方法简单易用
web全栈开发的博客
11-27 2429
对象拷贝的方法是一个难点，尤其是深拷贝。建议把代码都运行下，帮助理解拷贝。 一. json方法 适合情况：  JSON对象的深度克隆。方法是先JSON.stringify() 转为json字符串， 再JSON.parse() 转为json数组 缺点：   a. 如果你的对象里有函数, 函数无法被拷贝下来   b. 无法拷贝copyObj对象原型链上的属性和方法 var obj = { x: 1, y: { a: 1, b: 0, c
vue对象复制（深拷贝，多层对象拷贝方式在后面）
SA
07-14 1万+
使用：es6中的“对象扩展运算符 ”，如下 // 对象深拷贝 obejctCopy() { // 源对象小李 const source = { name: '小李', age: 18, gender: '男', school: '清华大学' } // 拷贝小李 const copy1 = { ...source } // 拷贝小李，并修改名字为小张 const copy2 = { ...source, name: '
Vue实现对数组、对象的深拷贝、复制
weixin_30614109的博客
06-24 3547
当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），如下 数组： var a = [1,2,3]; var b = a; b.push(4); // b中添加了一个4 alert(a); // a变成了[1,2,3,4] 对象： var obj = {a:10}; ...
vue~对象的浅拷贝
JackChan
09-12 1172
拷贝数据又分为了浅拷贝和深拷贝，浅拷贝指复制对象或数组的顶层结构，如果对象或数组中有引用类型的属性值，复制的是引用（地址）而非值；而深拷贝则是递归复制完整的对象或数组，包括嵌套的子对象或子数组，生成一个全新的对象，新对象和原对象的引用地址不同。这些方法都可以用来创建对象的浅拷贝，但请注意，如果对象中包含嵌套对象，这些嵌套对象仍然是引用关系，所以修改嵌套对象会影响到原始对象。这是一种浅拷贝，因为它只复制了对象的第一层属性，如果对象中包含了嵌套对象，嵌套对象仍然是引用，修改嵌套对象会影响到原始对象。
vue js 对象浅克隆
周家大小姐
10-17 1550
Object.assign({}, val) editOrder() { let param = Object.assign({}, this.orderForm); let extendInfo = []; for (let key in this.extendData) { let f = this.extendList.find(it...
python中列表赋值后，改变拷贝列表数值，源列表也会发生变化——浅拷贝
qq_43608192的博客
03-18 4614
一、浅拷贝和深拷贝 以下文章讲述得很清楚： 面试题：深拷贝和浅拷贝(超级详细，有内存图)_田江的博客-优快云博客_深拷贝和浅拷贝 python深拷贝和浅拷贝的区别 - 米 立 - 博客园 (cnblogs.com) python修改列表的值时的地址变化，一个蛮有意思的小实验 - 雾恋过往 - 博客园 (cnblogs.com) 在python中，新建对象赋值实际上是对象的引用。当创建一个对象，然后把它赋给另一个变量的时候，python并没有拷贝这个对象，而只是拷贝了这个对象的引用。 二、Pyt
vue对象的深度克隆办法
weixin_43450653的博客
10-12 6774
方法1： 通过js序列化，将js转换成字符串，然后再将字符串转换成js对象 var olbObj = {a:1}; var str = JSON.stringify(obj); //序列化对象 var newobj = JSON.parse(str); //还原 //相当于 var newObj = JSON.parse(JSON.stringify(olbObj )) 方法2: ES6语法对象展开运算符进行对象的展开赋值 var a = {a:0} var b = {...a} 方法3： 进行对象的遍
Vue-实现对象拷贝
热门推荐
qq_42875895的博客
04-04 31万+
问题： 做Vue 项目时因为数据双向绑定的原因，但是我这个需求，如果此对象出现数据双向绑定会出现Bug 所以采用此对象克隆方式来 防止对象中的属性数据双向绑定 说明：采用Object.assign()这个方法就讲source 对象中的 属性克隆到 target 对象中，并且 source 改变不会影响 到 target 对象 let target = {} let source ={id:1,n...
vue js递归克隆 深拷贝对象 复制数组
qq_43813351的博客
03-13 694
项目遇到一个问题，创建对象的时候里面有一个时间Date字段，对Date格式化操作的时候，由于是引用传递，所以会改变原来的对象，我想到了深拷贝对象，这样就会在内存地址中新开辟一个空间，完全是一个新对象。
vue修改值与深度拷贝
懒人w的博客
06-28 373
深度拷贝与浅度拷贝的区别主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的操作不会影响原始对象。关于为什么要用深度拷贝，如果要将可变对象和不可变对象相互转换，或者需要操作新对象的时候不影响原始对象，则用深度拷贝。copy-on-write原则就是利用深度拷贝来实现的。
vue3+ts前端怎么用深拷贝改变对象中的一个数组
06-30
在 Vue 3 与 TypeScript 的开发中，如果需要修改对象内部的数组，并确保原始数据与副本之间互不影响，通常会使用深拷贝技术。由于 JavaScript 中的对象和数组是引用类型，直接赋值会导致新旧变量指向同一内存地址，因此对数组或对象的修改会同时影响到原数据 [^2]。 ### 使用 Lodash 的 `cloneDeep` 实现深拷贝 可以通过第三方库 `lodash` 提供的 `cloneDeep` 方法实现完整的深拷贝操作，从而安全地修改对象中的数组内容而不影响原始数据： ```ts import { cloneDeep } from 'lodash'; const originalData = { list: [1, 2, 3] }; const copiedData = cloneDeep(originalData); copiedData.list.push(4); console.log(originalData.list); // 输出 [1, 2, 3] console.log(copiedData.list); // 输出 [1, 2, 3, 4] ``` 该方式适用于嵌套结构较为复杂的对象，能够确保每一层的数据都被独立复制 [^3]。 ### 手动实现浅层深拷贝（适用于简单结构） 对于仅包含一层数组的对象，也可以通过扩展运算符或 `slice()` 方法进行浅拷贝： ```ts const originalData = { list: [1, 2, 3] }; const copiedData = { list: [...originalData.list] }; copiedData.list.push(4); console.log(originalData.list); // 输出 [1, 2, 3] console.log(copiedData.list); // 输出 [1, 2, 3, 4] ``` 此方法不适用于嵌套数组或对象，否则仍会出现引用共享的问题。 ### 在响应式上下文中使用深拷贝 当使用 `reactive` 或 `ref` 创建响应式对象时，若需修改其内部数组并避免触发不必要的副作用，建议先进行深拷贝再操作副本： ```ts import { reactive } from 'vue'; import { cloneDeep } from 'lodash'; const state = reactive({ items: [10, 20, 30] }); const modifiedItems = cloneDeep(state.items); modifiedItems.push(40); state.items = modifiedItems; // 替换为新的数组以触发响应式更新 ``` 这种方式可以确保每次变更都基于一个全新的数组实例，从而避免因引用相同而引发的潜在问题。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值