简述vue表格数据赋值给新变量后，原表格数据也随新变量数据的变化而发生改变

原创 已于 2022-09-01 14:03:23 修改 · 784 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言

于 2022-09-01 11:25:35 首次发布
本文探讨了Vue中表格行数据数组赋值时的浅拷贝问题，如何通过深拷贝避免arrList与list删除操作相互影响，并提供了JSON.parse(JSON.stringify())的解决方法。

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

将elementui表格行数据的某一个数组arrList赋值给一个新的数组list 当我list进行删除操作之后 原表格里的arrList也被修改了

一般出现这种问题是因为vue在利用等号赋值时，是一种浅拷贝的方式，它是将等号右边的数据的引用给了等号左边的变量，这也导致了改变等号左边的数据时右边数据也发生了变化，从而影响页面数据。所以可以用简单的深拷贝方式来解决

// 解决方法
this.subList = JSON.parse(JSON.stringify(this.tagList));
简述Vue 如何检测数组变化
youhebuke225的博客
05-25 628
由于 Vue 需要追踪数组的变化，并可能触发视图更新，所以直接修改数组元素（不使用 Vue 的重写方法）可能会导致性能问题，特别是在处理大型数组时。因此，最好总是使用 Vue 提供的数组方法来修改数组。对于直接通过索引修改数组元素或修改数组长度的情况，Vue 无法检测到这些变更。不能直接用于数组元素），它采用了特殊的策略来跟踪数组的变更。当这些方法被调用时，Vue 会检测到数组的变更，并触发视图更新。时，实际上调用的是 Vue 重写后的方法，而不是原生的数组方法。对象上的数组转换为原型链上的方法实现的。
vue中父子组件的数据传递
weixin_42372852的博客
09-05 685
vue中父子组件的数据传递 本文章需要用到的俩个重要属性：prop类型和$emit事件 文章目录vue中父子组件的数据传递前言一、父组件给子组件传递数据1、关于Prop的理解2、使用Prop传递标题3、通过 Prop 向子组件传递数据1.代码如下（示例）：二、子组件给父组件传递数据1、$emit自定义事件2、父子组件的相互传递1.代码如下（示例）：总结 前言 一、父组件给子组件传递数据 1、关于Prop的理解 Prop可以使你在组件上注册一些自定义的属性，当一个值传给prop属性的时候，它就变成了那个组件
vue data变量相互赋值后被实时同步的解决步骤
11-19
数据结构是这样子的 data() { return { title: 'web前端 this data变量相互赋值后被实时同步问题', val_1: 'vue', val_2: '' } } 问题源： 我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题) onload() { this.val_2 = this.val_1; } 解决方法： 我们在通过JavaScript把 “val_1” 转换成字符串类型，再JSON.parse，最后再赋给 “val_2” 就解决了 onload() { this
vue引用传递——赋值后，新变量数据改变，原变量的数据也随之改变了
weixin_39709920的博客
03-21 1607
JSON.stringify 将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串。JSON.parse 用来解析 JSON 字符串，将数据转换为 JavaScript（对象或者数组）本来需要的是this.updateForm的值始终不变，只有updateQuery的值在变化。updateQuery的值发生变化时，this.updateForm的值也随之改变了。在vue中，数组和对象传递都是引用传递。赋值时传递的并不是值，而是指向了同一个空间。
Vue中变量赋值后，修改变量，赋值数据与被赋值数据同步改变
weixin_42427230的博客
11-22 3670
在vue中，变量赋值，修改变量会导致原始数据也同步发生改变 let a = this.file, 修改a时，this.file也改变了 原因：这是一个引用传递而不是值传递 解决：把this.file转换为字符串再转换为对象后赋值 let a = JSON.parse(JSON.stringify(this.file)); ...
解决vue改变一个数组另一个数组也会改变的问题(数组或者对象的引用问题)
qq_59130674的博客
10-07 2665
js复杂数据类型直接赋值产生的内存地址一致的解决方案
vue组件中,修改表单中上次输入的值
爬楼梯的前端小白的博客
02-18 1249
vue组件中,修改表单中上次输入的值
Vue双向数据绑定原理解析及代码实现
热门推荐
wuxy720
04-30 2万+
题记 今天，看了一篇关于Vue双向绑定的博客，自己也照着博客进行了深入学习，并自己手动撸了一遍，发现对于vue的双向绑定——数据劫持+（订阅者/发布者）模式有了自己的一些理解！ 这篇文章可能会很长，但是相信我，你看完后一定会对双向绑定有很透彻的理解！ 正文 不多说了，我们直接来看看Vue的双向绑定机制从最简单的到最终实现版本。 一、访问器属性 大家可能都知道，关于Vue的双向绑定，很多...
2021-12-13 面试(一) v-if/for优先级,toFixed,keep-alive,语义化,vuex,vue双向数据绑定原理,插槽种类和作用
GAARA
12-13 466
文章目录 1.v-if和v-for的优先级 回答 补充 2.`0.1+0.2=0.3000000004` 回答 验证 3.keep-alive 回答 复习 4.语义化的理解 回答 5.vuex是什么?有什么用?使用场景是? 回答 补充 复习 6.`===`和`==`的区别 回答 7.vue 双向数据绑定的原理 回答 补充 8.vue插槽种类和作用 回答 复习 9.es6新增特性(10个以上) 回答: 10.简述封装vue组件的过程 回答 补充 11.vue3都有什么 12.说一下原型链 回答 复习 13.输
Vue.js 3.0的Composition API中的三个创建响应式数据的函数reactive、toRefs、ref
前端高薪进击手记
07-29 1471
本文将介绍Vue.js 3.0中三个创建响应式数据的函数reactive、toRefs、ref reactive：把对象转换成一个响应式对象，也就是一个Proxy对象。 toRefs：它可以把一个代理对象中的所有属性也都转换成响应式的对象，toRefs()在处理这个对象的属性的时候，类似于ref。 ref： 把基本类型的数据转换成响应式对象。...
vue中关于修改数据表格数据也随之变化
baozaoderenlei的博客
03-28 2002
一般出现这种问题是因为vue在利用=赋值时，是一种浅拷贝的方式，它是将赋值的数据的引用给了一个新的变量，这也导致了你改变数据页面数据也发生变化的原因。 最简单有效的方式就是进行深拷贝，它会在堆中新开辟一块内存将数据放进去然后把引用给了被赋值的元素. 简单粗暴的深拷贝 this.vehicleChangeData = JSON.parse(JSON.stringify(this.vehicleChange)); ...
elementUI的form表单赋值之后无法修改值
yuanfanlove的博客
07-16 3874
赋值的时候如果是用映射的关系，那么form值和赋值者用的是同一个地址，这个时候对赋值后的form数据进行深拷贝即可
VUE脱坑/1-- 如何解决vue 赋值后原数据随赋值后的数据的变化而变化
晴天有点孤单
10-19 1万+
错误示例 this.leftColumn = {...this.Columns}; this.rightColumn = {...this.Columns}; 正确示例 this.leftColumn = JSON.parse(JSON.stringify(this.Columns)); this.rightColumn = JSON.parse(JSON....
vue 数据赋值给新变量后，原数据也随新变量对数据的变化而变化
weixin_41968524的博客
01-18 1417
错误示例： let nodes=this.approval.allNodes 本意是想将allNodes的值赋值给nodes，做一个备份，由nodes进行操作，但这样赋值依旧会改变allNodes的值 正确示例： let nodes= JSON.parse(JSON.stringify(this.templateForm)) ...
vue 将数组赋值给新数组, 改变新数组原数组发生变化
weixin_38673922的博客
10-12 1398
数组
vue element在对表格内容修改时，表格数据实时跟随表单数据变化，关掉编辑表单后也不会恢复
weixin_45311473的博客
08-15 1026
在对编辑表单赋值时要注意浅拷贝和深拷贝的问题，不然就会导致如标题所述问题。使用如下代码的形式即可解决问题。
在Vue项目中，在表单中修改数据，表格数据也会被修改
qq_46614863的博客
08-06 709
在开始解决这个问题时，我的最初想法是在“取消”按钮的事件中添加一个加载数据的函数，每次取消并关闭窗口时重新发送请求来重新加载数据。在尝试修改表格中的数据时，即使用户在点击“取消”按钮后选择放弃修改并关闭窗口，表格中的数据仍然会显示为已修改状态。）来拷贝对象，这确实可以复制对象的属性，但这种方式还只是进行浅拷贝。它只复制对象的第一层属性，如果对象中包含多层嵌套的对象，仍然是引用地址的赋值，因此这些嵌套对象会被同步修改。这是代码中存在的问题所在。使用深拷贝后，修改的就是独立的对象，不会影响原有对象。
VUE 中数据赋给了一个变量，修改这个变量,原数据也会被修改
小心——博客
07-10 596
此时两个变量的引用地址是一个, 而地址是存在栈内存中，变量是存在堆内存中的，如果修改其中的一个,另一个也会跟着变,解决方案就是将其引用地址进行修改。这是js的一个堆和栈的问题。
vue中数组赋值给一个变量，修改变量值数组的值也会改变的问题。
weixin_50917325的博客
12-04 869
此时发现，打印的arr全都包括了test:"测试用例"的一个字段，也就是说，我在改变赋值的变量的时候，也同时改变了arr这个数组。去找了资料发现：这好像是vue的深拷贝和浅拷贝的知识点（我比较少做前端，并且是个编程小白，所以不太了解）使用：JSON.parse(JSON.stringify(item))
vue3自动刷新表单数据
最新发布
06-12
参考引用：-引用[1]：如果数据更新未触发，可能使用Vue的强制更新方法，如this.$forceUpdate()（在OptionsAPI）或使用ref的.value赋值触发更新。但在CompositionAPI，更推荐使用响应式系统。-引用[2]：对于持久化，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值