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

最新推荐文章于 2024-05-16 14:48:42 发布
最新推荐文章于 2024-05-16 14:48:42 发布
阅读量1.2k 收藏 3
点赞数 3
分类专栏： web前端 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bittingCat/article/details/108712847
版权

在项目当中遇到这样一个问题，我是用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操作是深拷贝操作，这样转化一下就好了

bittingCat
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试相关-深拷贝和浅拷贝的实现方法和区别
01-12
前端面试相关-深拷贝和浅拷贝的实现方法和区别
05.Vue组件化开发(初识)、表单 &对象引用、深拷贝和浅拷贝(Tip)
HGJyujian的博客
10-10 357
引出Vue3组件化开发的前置学习
js vue 深度拷贝 解决一个改动另一个也跟着改动的问题
qq_38946996的博客
09-22 340
【代码】js vue 深度拷贝 解决一个改动另一个也跟着改动的问题。
Vue进阶（幺叁幺）：父子组件传值实现数据深拷贝_vue3拷贝父组件传来的值
最新发布
2401_84618790的博客
05-16 344
在实际开发过程中，例如后台返回了一堆数据，你需要对这堆数据做操作，但多人开发情况下，你是没办法明确这堆数据是否被其它功能使用，直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据，根据实际情况来使用深拷贝。由结果可知，数组拷贝不彻底，b对象的一级属性确实不受影响了，但是二级属性还是没能拷贝成功，仍然脱离不了a的控制，说明。所以当你此时修改a=2，对b并不会造成影响，因为此时的b已自食其力，翅膀硬了，不受a的影响了。进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。
Vue浅拷贝导致修改表单时列表数据变化问题
qq_48651377的博客
07-20 298
项目场景：更新某一条列表数据时，直接获取到列表某一行数据进行修改（不需要去查询数据详情）
Vue进阶（幺叁幺）：父子组件传值实现数据深拷贝
IT全栈 华强工作室
06-16 3789
前言 在使用vue进行前端开发的时候，遇到了在java中开发过程中遇到的问题：对象引用， 当把A数组赋值给B数组后，B数组push了一个new value， 导致A数组中也多了一个value，一下子我就想到了对象的引用了，因为java遇到过，也解决过呀！ 问题分析 当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），如下 数组： var a = [1,2,3]; var b = a; b.push(4);
深拷贝的方法以及VUE中的使用
LMQ_949244171的博客
11-26 588
深拷贝的方法 /** * 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 1784
/** 判断值是否存在 */ isNotExists (value) { return value === undefined || value === null || value === '' || value === 'undefined' }, // 对象复制 name为空时obj1复制到obj2 不为空则在obj2中的名字为 name + 原对象名字首字母大写命名 copyObjec...
vue 复制data里面的对象/数组，改复制出来的对象/数组，为什么data里面的对象/数组也被改了?深浅拷贝
weixin_46603501的博客
03-23 1500
将data里面的sensors数组的一部分复制给arr 数组； 发现改动arr数组，data里面的sensors数组也被改动了； 发现简单的复制只是浅拷贝； 改动一个，另外一个也被改动； 这就是问题的原因，因为它们指向都是同一块内存；想要改变一个对象里面的值，另一个对象不受影响，就要在内存开辟多另外一个空间存值，那就要实现深拷贝； 方法： 1. 对象的深拷贝 var a ={1, 2, 3}; var b = a; (简单的赋值不是深拷贝） 深拷贝： b = {a[0], a[1]..
vue实现对象的复制
我是死宅萝莉控的博客
05-18 2759
vue数组对像进行复制
vue对象复制（深拷贝，多层对象拷贝方式在后面）
SA
07-14 1万+
使用：es6中的“对象扩展运算符 ”，如下 // 对象深拷贝 obejctCopy() { // 源对象小李 const source = { name: '小李', age: 18, gender: '男', school: '清华大学' } // 拷贝小李 const copy1 = { ...source } // 拷贝小李，并修改名字为小张 const copy2 = { ...source, name: '
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
11-20
本文实例讲述了JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）。分享给大家供大家参考，具体如下： 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。  浅拷贝 只是拷贝了基本类型的数据，而引用类型...
vue 使用lodash实现对象数组深拷贝操作
10-14
深拷贝与浅拷贝的区别在于，深拷贝会创建一个全新的对象，包含原始对象的所有属性和值，包括嵌套对象和数组的每一个元素。当修改拷贝后对象的任何属性时，都不会影响到原始对象。这在处理复杂数据结构时尤其重要，...
vue~对象的浅拷贝
JackChan
09-12 954
拷贝数据又分为了浅拷贝和深拷贝，浅拷贝指复制对象或数组的顶层结构，如果对象或数组中有引用类型的属性值，复制的是引用（地址）而非值；而深拷贝则是递归复制完整的对象或数组，包括嵌套的子对象或子数组，生成一个全新的对象，新对象和原对象的引用地址不同。这些方法都可以用来创建对象的浅拷贝，但请注意，如果对象中包含嵌套对象，这些嵌套对象仍然是引用关系，所以修改嵌套对象会影响到原始对象。这是一种浅拷贝，因为它只复制了对象的第一层属性，如果对象中包含了嵌套对象，嵌套对象仍然是引用，修改嵌套对象会影响到原始对象。
vue js对象拷贝的方法简单易用
web全栈开发的博客
11-27 2144
对象拷贝的方法是一个难点，尤其是深拷贝。建议把代码都运行下，帮助理解拷贝。 一. json方法 适合情况：  JSON对象的深度克隆。方法是先JSON.stringify() 转为json字符串， 再JSON.parse() 转为json数组 缺点：   a. 如果你的对象里有函数, 函数无法被拷贝下来   b. 无法拷贝copyObj对象原型链上的属性和方法 var obj = { x: 1, y: { a: 1, b: 0, c
vue js 对象浅克隆
周家大小姐
10-17 1393
Object.assign({}, val) editOrder() { let param = Object.assign({}, this.orderForm); let extendInfo = []; for (let key in this.extendData) { let f = this.extendList.find(it...
Vue——表单修改数据相互影响深拷贝处理
每天一个前端小知识~
01-07 2108
问题 Vue父子组件传递数据的时候，浅拷贝会出现修改数据相互影响的情况。比如修改失败，前端的页面表单的数据还是改变了 解决方案 使用深拷贝代替浅拷贝 this.addForm = JSON.parse(JSON.stringify(memberInfo)) 因为增加和修改共用一个表单，所以每次打开表单时增加要给表单赋空值 效果图 会员名是不可以修改的，disabled 会员组件页代码 <template> <div> <!-- 面包屑导航区域 -->
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 584
项目遇到一个问题，创建对象的时候里面有一个时间Date字段，对Date格式化操作的时候，由于是引用传递，所以会改变原来的对象，我想到了深拷贝对象，这样就会在内存地址中新开辟一个空间，完全是一个新对象。
vue深拷贝和浅拷贝
09-14
Vue 中的深拷贝和浅拷贝是在处理对象和数组时常用的两种复制方式。下面是它们的简要介绍： 1. 浅拷贝：浅拷贝是创建一个新对象或数组，将原始对象或数组的引用复制给新对象或数组，新旧对象或数组共享同一块内存空间。当修改其中一个对象或数组时，另一个也会受到影响。在 Vue 中，可以使用`Object.assign()`或解构赋值来实现浅拷贝。 示例代码： ```javascript // 对象浅拷贝 let obj = { a: 1, b: 2 }; let newObj = Object.assign({}, obj); console.log(newObj); // { a: 1, b: 2 } // 数组浅拷贝 let arr = [1, 2, 3]; let newArr = [...arr]; console.log(newArr); // [1, 2, 3] ``` 2. 深拷贝：深拷贝是创建一个新对象或数组，并将原始对象或数组的所有属性值递归地复制给新对象或数组，新旧对象或数组不共享内存空间。当修改其中一个对象或数组时，另一个不会受到影响。在 Vue 中，可以使用`JSON.parse(JSON.stringify())`或第三方库（如 lodash 的`cloneDeep()`方法）来实现深拷贝。 示例代码： ```javascript // 对象深拷贝 let obj = { a: 1, b: { c: 2 } }; let newObj = JSON.parse(JSON.stringify(obj)); console.log(newObj); // { a: 1, b: { c: 2 } } // 数组深拷贝 let arr = [1, [2, 3], { a: 4 }]; let newArr = JSON.parse(JSON.stringify(arr)); console.log(newArr); // [1, [2, 3], { a: 4 }] ``` 需要注意的是，使用 `JSON.parse(JSON.stringify())` 进行深拷贝时，会忽略 undefined、symbol、函数等特殊值，并且无法处理引用循环的情况。在处理复杂对象或数组时，建议使用专门的深拷贝库来确保拷贝的完整性和准确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值