vue中修改数据相互影响(浅拷贝)

最新推荐文章于 2024-09-12 11:23:43 发布
最新推荐文章于 2024-09-12 11:23:43 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 浅拷贝与深拷贝
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42535013/article/details/109246230
版权

浅拷贝 深拷贝 引用数据类型 JSON.parse JSON.stringify
关键词由CSDN通过智能技术生成

浅拷贝与深拷贝

  • 基本数据类型
    不存在浅拷贝
  • 引用数据类型
    当你将引用数据类型赋值给另一个变量的时候，修改其中一个的值，两个变量的值
都会改变，这就是浅拷贝，因为它们同指向一个堆地址

问题(修改的数据会相互影响)

修改的数据会相互影响
解决办法：

将引用的数据使用JSON.parse(JSON.stringify(Object))括起来，就可以将浅拷贝转成
深拷贝

使用后：
在这里插入图片描述

下键_如有神
关注
专栏目录
js中的深拷贝浅拷贝
Senora的博客
07-20 603
深拷贝(值拷贝)：会创建一个一模一样的对象，新旧对象不共享内存，修改新对象不会影响原对象。 浅拷贝(引用拷贝)：只复制指向某个对象的指针，不复制对象本身，新旧对象还是共享同一块内存。修改新对象会影响原对象。...
深拷贝和浅拷贝
langmanboy的博客
04-07 1617
深拷贝和浅拷贝 1. 内存地址 Array， Function，Object 等等可以认为是除了基本数据类型 String，Number，Boolean，null，undefined，Symbol 以外，所有类型都是引用数据类型 引用数据类型存储在堆内存中，在栈中存储了指针，该指针指向堆中该实体的起始地址 当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体 let str = 'jsx'; // string let num = 100; // number let bool = tr
浅谈vue 多个变量同时赋相同值互相影响
10-15
主要介绍了浅谈vue 多个变量同时赋相同值互相影响，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE2两个数组赋值相同时，修改一个数组另一个数组也会改变的问题
编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”
04-28 521
VUE2中两个数组来源于同一个对象的指针引用，数组间传递的是引用地址，因此两个数组引用的是同一个对象，只要其中一个数组改变，另一个数组就会改变。定义了两个属性A、B，都是数组类型，两个属性同时赋予了同样的值。目的：a操作后，A数组会更改，b操作后，A数组的值会变回B数组。结果：A数组更改后，B数组同时被修改。
vue:深/浅拷贝
最新发布
qq_50949240的博客
09-12 283
针对嵌套对象，也就是引用类型。修改源对象的引用类型，浅拷贝得到的结果也会发生变化，反之亦然。1. = 操作符 ，不算拷贝，因为没有创建生成新的对象，只是引用（两个变量指向同一个对象）；2. 拷贝是生成了新对象的。3.引用：对象更新应用。
vue 一个数组元素删除后影响了另一个数组
qdluo的博客
07-27 974
data(){ return{ arr:[[1,2,3]] } }, created() { let newArr=this.arr; newArr.shift(); console.log(newArr); console.log(this.arr); }, 当数组newArr删除第一个元素后，arr也发生了变化，原因就是两个数组来源于同一个对象的指针引用。 我们可以通过以下两种方式消除同源影响: 1. newArr=JSON.parse(JSO.
JS 复制新数组的方法
duota_ni的博客
08-25 1150
JS 复制新数组的方法 需求：将旧数组复制新数组，不是引用 方法1： arr = [1,2,3]; let newArr = new Array(); arr.forEach((item) => newArr.push(item)); 方法2： arr = [1,2,3]; let newArr = arr.slice();
vue笔记
m0_55546349的博客
05-17 884
如何让flex:1 html:给他以及它的所有父元素设置高度100%； vue: 给app设置高度100% public里index.html也添加body,html{hright:100%} 父元素flex:1;overflow:aoto; 各自overflow:auto; 浏览器自动开启/热更新-端口修改 在项目的根路径下根路径下根路径下根路径下创建一个文件名为vue.config.js module.exports = { devServer: { open: true,
手把手教你怎样在vue3中使用redux
weixin_39168678的博客
08-26 1470
前言 现在的web应用基本上都走上了数据驱动的道路，而数据状态的管理则理所当然成为了项目开发的核心，所以理论上只要统一状态层，view渲染可以随意更换框架和模式。 而我们在做项目的时候大部分都是vue用vuex。react用redux。以至于很多同学都以为所有的状态管理容器是和页面渲染框架一一绑定的，所以突然想实验一下用edux做状态管理，而页面渲染交给vue是什么效果。 思路 我们知道redux的state 只是一个普通的js对象，是无法感知视图的。redux的整套流程和vue的渲染驱动机制其实是相互独
vue事件对象冲突问题
qq_54786510的博客
02-23 259
如果一个事件的对象是数组，而另一个事件的同样的对象需要转为字符串的话，就冲突了，因此我们可以使用深拷贝来解决，使用扩展lodash里的一个 cloneDeep()就可以解决了
Vue解决赋值后修改新数组、对象会影响原数组、对象
qq_44100778的博客
08-25 4312
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。所以为了实现修改新对象而不影响原对象，我们需要进行深拷贝。 深拷贝 JSON.parse(JSON.stringify()) computed: { data: function () { var obj={}; obj=JSON.parse(JS
vue一个对象给另一个对象赋值之后 修改后者会影响前者的值
Fishman113的博客
08-18 3883
遇到一个问题： 从列表中取出一行数据将它付给一个查看修改详情的页面做出修改之后，并未点击保存到数据库中，点击取消按钮，回到刚才的列表页会发现方才列表的哪一行数据会被修改。重新加载数据就会变为原值。 原来vue同java语言类似对象赋值之后 只是将地址指向同一块内存空间，A=B AB指向同一块内存地址修改B后A所指向的地址的值也会发生改变。在java中可以重新new 一个对象，或者深度拷贝一个对象。 vue中也是如此。 解决方法：this.A=JSON.parse(JSON.stringify(this.B
vue解决修改一个集合数据会同时修改另一个集合数据问题
xc9711的博客
05-19 1917
前言 在通过点击一个列表进行数据的删除的时候，会发现一个问题，就是删除一个集合的数据会同时删除另一个集合的数据，起初发现的时候，以为我逻辑写的有问题，然后没发现出问题。然后进行查找，发现 出现此问题的原因就是两个数组来源于同一个对象的指针引用， 所以在对其中一个数组进行操作的时候，才会影响到另一个同源的数组 集合数据 <script> export default { name: "app", data() { return { listA: ["A数据","B数据",
vue数据改变影响其他数据的问题
星辰的笔记
03-11 1316
1，改变一个下拉框，其他几个下拉框的数据会跟着改变（这些下拉框都是使用的同一个数组不同对象的数据，非相同数据） 后面发现只有push添加的数据才会出现此问题 写死的数据下拉操作是正常的，不会影响其他对象的数据 解决： 生成一个新的对象或数组，就可以解决此问题 JSON.parse(JSON.stringify(“对象 || 数组”)) 猜测是vue底层数据绑定的问题 ...
vue 爬坑 之js 对象/数组 赋值/拷贝 解决VUE中赋值引用后数据双向改变的问题
晴天有点孤单
10-23 4872
浅拷贝这里就不讲了，我们直接讲深拷贝 正常的数组/对象拷贝可以直接用 const cloneObj = JSON.parse(JSON.stringify(Obj)); 这种方式可以解决相当多一部分的赋值问题，但是一些特殊属性除外（undefined/function） 在vue 或者js 中有时需要对一些特殊数据处理，比如VUE中的table等… 这个时候就需要用到第二种方法处理数据 附代码：...
vue中关于修改数据表格数据也随之变化
baozaoderenlei的博客
03-28 1926
一般出现这种问题是因为vue在利用=赋值时，是一种浅拷贝的方式，它是将赋值的数据的引用给了一个新的变量，这也导致了你改变数据页面数据也发生变化的原因。 最简单有效的方式就是进行深拷贝，它会在堆中新开辟一块内存将数据放进去然后把引用给了被赋值的元素. 简单粗暴的深拷贝 this.vehicleChangeData = JSON.parse(JSON.stringify(this.vehicleChange)); ...
Vue 组件互相调用产生冲突问题的解决
weixin_44617133的博客
10-26 2281
vue组件互相调用
Vue数据操作：如何在对象拷贝中正确选择深拷贝或浅拷贝？
七一
01-08 885
场景复现：我们在对一个表单进行编辑时候，编辑完内容，并没有保存的时候，点击关闭，这个时候我们的表单的该字段也随着我们的编辑而改变了，但是这个值并没有被真正被保存到数据库。我们在编辑表单的时候，直接将row对象复制给了弹窗需要的对象，这个时候这俩个对象任意一个的属性内容发生改变的话，另一个也会伴随着变化。这是因为两个对象引用了同一个对象。这就是所谓的浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。深拷贝：创造一个一模一样的对象，修改对象不会影响到原对象。
vue的深拷贝与浅拷贝
09-14
在Vue中，深拷贝和浅拷贝是针对Vue实例中的响应式数据的。 1. 浅拷贝：Vue的浅拷贝是通过`Object.assign()`或展开运算符`...`来实现的。浅拷贝只会复制响应式数据的第一层属性，如果被复制的属性是引用类型，那么新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值