vue踩坑记：把对象中的数据同时赋给了两个变量，改变一个对象的值，另一个对象也变化了

最新推荐文章于 2024-05-07 13:44:17 发布
最新推荐文章于 2024-05-07 13:44:17 发布
阅读量1.8k 收藏 5
点赞数 4
文章标签： vue vue.js js对象赋值 js
如转载，请注明来源链接，否则追责！
本文链接：https://blog.csdn.net/l602108654/article/details/119736467
版权

场景： 请求到数据后，将数据data.a同时赋给了c和b，这时改变c的时候b的值也会跟着变。

为什么会出现这种情况呢？其实，这是一个引用传递而不是值传递，c和b指向的是同一个内存地址

如果想实现改变了c而不改变b的话，我们要怎么操作呢？

可以给b赋值的时候，将a转换成字符串，然后在转换成对象，代码如下:

b = JSON.parse(JSON.stringify(data.a))
sky-coder
关注
踩坑系列//vue中d3的click事件怎么获取对应数据？？vue中第三方插件的click事件，传回来第一个参数是vue的事件、第二个参数才是自定义参数
weixin_37877794的博客
09-25 1742
vue中d3的click事件怎么获取对应数据？？ vue @click 绑定的函数，如何同时传入事件对象和自定义参数？？vue中第三方插件的click事件，传回来第一个参数是vue的事件、第二个参数才是插件本身的内容。.on(‘click’, function ($event, e) {}) https://blog.csdn.net/little_kid_pea/article/details/89736282 html 文件中 d3 的 click 事件返回的 .on('click', functi
iframe如何发送请求_Vue 中使用 Iframe 踩坑记
weixin_39667509的博客
11-20 1214
背景创业项目使用的 Vue 开发前端，最近在开发的一个需求涉及到了 Iframe 的使用，为了让父子页面能够正常通信，头都搞大了。不过最终是解决了问题，写篇文章记录下，利人利己。难点之前没有在 Vue 中使用过 Iframe，网上的相关内容也比较少，这次的主要难点有以下两个：如何优雅地嵌入 Iframe如何优雅地实现父子页面间的通信第一点倒是不难，嵌入 Iframe 时使用 ref 属性，可以在父...
浅谈vue 多个变量同时赋相同值互相影响
10-15
主要介绍了浅谈vue 多个变量同时赋相同值互相影响，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue爬坑：把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决办法！
热门推荐
jiangwei1994的博客
10-16 2万+
在vue中，在data里建立两个对象。 data() { return { dataA:{ a:1 }, dataB:'' } }; 将dataA的内容赋值给dataB，改变dataB里对象的值，发现dataA里的值也跟着变化了。为什么会出现这种情况呢？其实，这是一个引用传递而不是值传递，dataA和dataB指向的是同一...
vue关于初始化把请求的数据存入2个变量中，改变一个的值，另一个也会随着改变的问题
weixin_44588893的博客
01-19 1201
vue关于初始化把请求的数据存入2个变量中，改变一个的值，另一个也会随着改变的问题需求思路分析问题解决方法代码 需求 请求的数据放入表格中，然后直接在表格中编辑之后，在下面有一个保存按钮，点击保存 思路分析 表格中放入input可以解决修改值的问题 因为我要修改的是数据库中的表名和注释，所以需要存储最开始得到的数据 在页面初始化时把数据存在2个变量中，一个用来渲染页面，双向绑定就可以得到修改后的值，另一个主要是在请求api是发回后端用来判断和执行sql需要 问题 后面我发现绑定的那个数组变量中的值修改后
vue 接口获取的数据赋给了两个变量，修改其中一个变量,另一个也会被修改
月来better
04-08 1043
假如从接口获取的数据是 [{name:“a”}],分别赋值给两个变量，在操作修改一个变量，会影响另外一个变量的修改 let arr = [{name:"a"}] this.a = arr this.b = arr 解决方法： this.a = JSON.parse(JSON.stringify(arr)) this.b = JSON.parse(JSON.stringify(arr)) ...
vue3变量赋值后，修改一个，原来的变量也被修改
前端小白到专家的博客
04-14 4587
问题描述 提示：这里描述具体问题：在vue3开发时遇到有一个大坑，在一个变量给另一个变量赋值后，修改一个变量。另一个变量同时被修改。 例如： const a = ref('123') const b = ref('234') a.value = b.value a.value.length = 0 //当前a是空，b也是空 原因分析： 提示：这里填写问题的分析：值传递还是引用传递，当前的赋值为引用传递。 解决方案： 提示：这里填写该问题的具体解决方案：用JSON.stringify和JSON.
记一次成功把Vue2后台项目改造成Vite2的踩坑经历
yilingsj的博客
06-02 7732
公司后台项目基于@花裤衩大神的vue-element-admin，随着项目功能的不断完善和需求不断增加，项目启动也变的越来越慢。慢到什么程度呢？我i7-10代16G内存的本本跑项目最快也需要近3分钟，实在难以忍受。几经折腾，终于成功改造成了vite。现在跑项目，5秒内即可跑起来，简直不要太爽！此次改造的过程遇到很多问题，现将遇到的问题做下记录，以防后续改造类似项目时继续踩坑。本次要改造的是一个基于vue-element-admin的后台项目。由于项目比较老，所以没有使用到typescript
Vue.js使用踩坑指南：路由刷新与异步问题解决方案
"Vue.js使用常见问题与解决策略" ...Vue.js是一个强大且灵活的前端框架，但在实际使用中需要注意这些问题，以确保代码的健壮性和性能。通过不断学习和实践，开发者可以避免或解决这些常见的“坑”，提升开发体验。
Vue+TS 踩坑记录与方案总结
HTML网页设计
08-08 1292
vue 和 TypeScript 结合的情况下，很多写法和我们平时的写法都不太一样，这里总结我项目开发过程中遇到的问题和问题的解决方案。
Vue爬坑之旅(二十)：把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化
帆酱的博客
05-16 3393
一个vue变量赋值给一个新的变量，对这个新的变量里的值做更改，vue的变量也变了。 data () { return { data: { a: 1, b: 2, c: 3 } } }, mounted () { let str = this.data str.a = 4 co...
Vue爬坑：把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决办法
lannieZ的博客
06-19 1064
在vue中，在data里建立两个对象。 data() { return { dataA:{ a:1 }, dataB:'' } }; 将dataA的内容赋值给dataB，改变dataB里对象的值，发现dataA里的值也跟着变化了。为什么会出现这种情况呢？其实，这是一个引用传递而不是值传递，dataA和dataB指向的是同一个内存地址。 this.dataB = this.dataA; this.dataB.a = 5; console.
vue爬坑：把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化...
weixin_30470857的博客
11-14 289
问题描述：在vue中把data中的两个对象optionA的值赋给optionB，改变optionB的值optionA的值也随之改变 data: { optionA: { a: 1 }, optionB: { a: '' } } 将optionA的内容赋值给optionB，改变optionB里对象...
解决vue中v-model绑定的变量赋值给了另一个变量后，两个变量同时改变
moon_tang的博客
09-01 1万+
先来看一下问题背景 我们要做一个 搜索+分页 的功能，使用vue 我们将分页控件绑定了点击事件，点击后提交v-model绑定的formData表单，但是我们忽略了一个问题，就是当输入的信息改变的情况下，不点击搜索，直接点击分页控件，提交的将会是新现在搜索框中的搜索条件。这样就不和逻辑了。 于是我们在data中新加了一个表单的对象 submitForm，只有在点击 查询 的时候，v-model绑定的...
vue：引用传递参数值，更改其中一个变量值,另一个变量值同步改变
欢迎来到我的CSDN技术博客！这里是一个专注于编程技术深度交流与分享的乐园。作为一名热衷于探索和实践的技术爱好者，我致力于将自己在前端开发、后端架构、移动端应用（包括微信小程序、抖音小程序、UNI-APP开发）、以及APP开发领域的宝贵经验与心得，无私地分
02-19 2168
vue 引用传递而不是值传递，两个变量指向的是同一个内存地址。 let data = ['测试1','测试2']; this.typeList = data; data.unshift('全部'); console.log(this.typeList); //typeList 值为 ['全部','测试1','测试2'] 可以使用以下2种办法避免该问题 解决办法1： let data = res.data; this.typeList = data.map((o)=>{return o;
Vue解决赋值后修改新数组、对象会影响原数组、对象
qq_44100778的博客
08-25 4318
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。所以为了实现修改新对象而不影响原对象，我们需要进行深拷贝。 深拷贝 JSON.parse(JSON.stringify()) computed: { data: function () { var obj={}; obj=JSON.parse(JS
Vue中把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方案
ZKY的博客
05-25 3323
在vue中的data数据中建立这两个对象 var salesOreder = new Vue({ delimiters: ['${', '}'], [想知道这里的作用解释请看这里](https://blog.csdn.net/qq_46124502/article/details/106326034) data(){ return { objData1:{ name:"zky" }，
vue3中用 let a= b赋值会改变b的值
最新发布
susu1083018911的博客
05-07 548
vue3中用 let a= b赋值会改变b的值
vue项目给两个变量赋同一个值问题
qq_33911541的博客
12-07 343
vue项目给两个变量赋同一个值问题
Vue解决数组对象属性改变不刷新视图的方法
在Vue.js框架中，数据的双向绑定是其核心特性之一，这意味着当你修改数据时，视图会自动更新以反映这些变化。然而，Vue无法检测到对象属性的动态添加或删除。这是因为Vue在实例化时会遍历`data`对象并创建对应的响应...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sky-coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值