vue a对象=b对象，修改a对象，b对象也会跟着修改

最新推荐文章于 2024-05-07 13:44:17 发布

原创最新推荐文章于 2024-05-07 13:44:17 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细解析了Vue中this.A=this.B导致的引用传递问题，以及如何使用JSON.parse(JSON.stringify(this.B))实现对象的深拷贝，避免A和B之间的相互影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中 this.A = this.B,只是把A指向了和B相同的地址，类似于引用传递，所有修改A的值会影响到B。

解决方式: this.A=JSON.parse(JSON.stringify(this.B));

将对象转成字符串再转换成对象赋值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_35811626

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue3.0云里雾里

weixin_55493330的博客

03-27

1785

/基本类型的响应式数据let name = ref('张三')//对象类型的响应式数据hobbyname: '章子怡',age: 45,sex: '男'})ref可以定义基本类型的响应式数据，也可以定义对象类型的响应式数据ref的底层还是reactive区别：1.ref创建的变量必须使用.value可以使用volar自动添加.value2.reactive重新定义一个对象hobby的时候，这个对象就失去了响应式属性。

vue3 分析总结响应式丢失问题原因（二）

xiaozaq的博客

02-16

1389

上一篇文件理解了响应式对象应用原理了。公式：响应式对象 = 代理 + 触发器。但是实际使用结果和预期还是不一致。具体现象是数据修改了，但是并没有实现响应式更新界面。即出现了响应式丢失现象。

参与评论您还未登录，请先登录后发表或查看评论

解决vue A对象赋值给B对象,修改B属性会影响到A的问题

12-09

实际在vue中 this.A = this.B,没有进行深层赋值，只是把this.A的地址指向了与this.B相同的地址，所有对于A的修改会影响到B。解决相互影响的思路是在this.A必须是新建的一个对象，这样才能保证不被指向同一地址，属性修改不会相互影响。解决方式： this.A=JSON.parse(JSON.stringify(this.B)); 将对象转成字符串剔除对象属性后,再转换成对象赋值，这样能解决指向相同地址修改会相互影响的问题。以上这篇解决vue A对象赋值给B对象,修改B属性会影响到A的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件

Vue =赋值 A =B A改变 B也被改变 Object.assign 的用法

LawsonJin's Blog

06-18

663

今天在写前端的时候遇到一个奇怪的问题我这里

vue3中用 let a= b赋值会改变b的值

susu1083018911的博客

05-07

721

vue3中用 let a= b赋值会改变b的值

解决let a =b;a之改变了之后b也变了

Decline1的博客

03-12

1451

vue中 let a =b;,只是把a指向了和b相同的地址，类似于引用传递，所有修改a的值会影响到b。 const obj = { a: 1 }; const copy = Object.assign({}, obj); 在网上找了很多方法，最终这个方法让我眼前一亮。深度复制（直通车） ...

使用vue3时，有一个复杂对象，对象中不仅有字符串，数字，还有多个数组，数组中是对象，现在对象中的数组以表格的形式显示，并且可以新增跟修改，要怎样绑定对象中的数组，等列表中的数据改变时，复杂对象数组中的数据也能跟着改变

最新发布

07-16

这样，当输入框内容变化时，原数组中的对象属性也会更新。但需要注意，如果数组本身被替换或者重新赋值，比如用filter或者splice等方法，可能会导致响应式丢失。这时候应该使用Vue.set或直接使用数组的变异方法来...

JS-Vue-指令 JSON Ajax

m0_51318597的博客

08-23

500

v-(text html pre cloak show if for) 发送Ajax请求 JSON对象 Vue生命周期过滤器

Vue进阶（幺叁幺）：父子组件传值实现数据深拷贝_vue3拷贝父组件传来的值

2401_84411323的博客

04-29

704

在使用vue进行前端开发的时候，遇到了在java中开发过程中遇到的问题：对象引用，当把A数组赋值给B数组后，B数组push了一个new value，导致A数组中也多了一个value，一下子我就想到了对象的引用了，因为java遇到过，也解决过呀！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。

vue中，将a变量赋值给b变量，修改a变量，会影响到b变量。vue缓存重置问题

weixin_30845171的博客

05-07

1321

查询接口获取到的接口数据渲染进页面以后，想要存储一份，以防用户点击重置按钮，不要再次调用接口获取数据。在vue中，a变量赋值b变量以后，修改a变量的内容，会影响到b变量也同时修改，这样就不符合需求。解决方法：赋值的时候使用JSON.parse()和JSON.stringify()进行转换即可赋值以后，b变量不受影响 this.b = JSON.parse(JSON.string...

vue A对象赋值给B对象，修改B属性会影响到A问题

Yahets_Lee的专栏

06-21

3622

由于写惯了后台代码，对于前端中A对象赋值给B对象，修改B属性会影响到A问题开始以为会像后台代码一样重新创建一个引用对象。实际在vue中 this.A = this.B,没有进行深层赋值，只是把this.A的地址指向了与this.B相同的地址，所有对于A的修改会影响到B。解决相互影响的思路是在this.A必须是新建的一个对象，这样才能保证不被指向同一地址，属性修改不会相互影响。解决方式: ...

VUE2两个数组赋值相同时，修改一个数组另一个数组也会改变的问题

编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”

04-28

882

VUE2中两个数组来源于同一个对象的指针引用，数组间传递的是引用地址，因此两个数组引用的是同一个对象，只要其中一个数组改变，另一个数组就会改变。定义了两个属性A、B，都是数组类型，两个属性同时赋予了同样的值。目的：a操作后，A数组会更改，b操作后，A数组的值会变回B数组。结果：A数组更改后，B数组同时被修改。

vue两对象赋值后一直相等，或改变一个对象另一个对象跟着改变问题

机智如我

01-07

4028

在vue中，假如定义一个对象 var obj1 = { index:1, name:first } var x = obj1; obj1.index = 2; console.log(x.index) 这个得出的结果也是2，原因好像是vue将obj1的地址给了x，这样x实际是指向的obj1相当于指针。今天在实际应用中也发现一个更隐藏的bug。 load(){ this.old = [...

Vue 中修改了计算属性（computed) 或者它的依赖变量，计算属性的值没有变化的几种情况

全栈攻略

11-22

9247

计算属性的值是由它们的函数逻辑计算得出的，而不是通过直接赋值来设置的。解决方案就是当你发现无论如何怎么修改计算属性的值都没有变化的时候，看一看data中与props中是否有根计算属性同名的变量，这时候就要考虑是要删除该变量，还是改变计算属性的命名了。如果你希望修改一个计算属性的值并使其生效，你需要通过修改计算属性所依赖的数据来触发重新计算。通过第一种情况我们知道了，要修改计算属性的值，必须要修改计算属性的依赖变量，但有一种情况及时修改了依赖变量的值，计算属性的值任然不会变化。

vue爬坑：把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化...

weixin_30470857的博客

11-14

308

问题描述：在vue中把data中的两个对象optionA的值赋给optionB，改变optionB的值optionA的值也随之改变 data: { optionA: { a: 1 }, optionB: { a: '' } } 将optionA的内容赋值给optionB，改变optionB里对象...

为什么修改A组件时B组件也会受到相应影响

weixin_45960266的博客

11-30

315

其实不是一个东西多么难学，怎么学这个东西，从哪里入手来学，才是重要的。选择好这些，就没那么难。原因2：两个组件使用同一份build.xml，使用ant等工具构建为不同的制品。原因1：直接依赖或者间接依赖。

VUE 对象的拷贝：解决vue A对象赋值给B对象,修改B属性会影响到A的问题

走在搬砖的路上！

07-20

8308

1、直接拷贝 let origin = { name: '张三', age: 12 } let target = origin; target.name = '李四'; 上面将target对象的属性修改之后，origin也会相应的改变，因为这里的target与origin这两个引用实际上是指向同一个对象。 2、深拷贝 let target=JSON.parse(JSON.stringify(this.origin)); 上面这种方式不仅仅是增加一个引用，而是将属性也拷贝...

解决在js中，var b = a，改变a，也会导致b的值改变的情况

a1085578081的博客

08-20

1856

在写js时，有遇到在写b = a的时候，改变a的值，会导致b的值也跟着变化。因为这时候a和b是指向同一个地址。 Object.assign(target,source)函数可以解决 target是目标对象，source是源对象，此处相当于source = target；但是当target的值变化时，source的值不会跟着变化。解析直达：链接 ...