浅谈vue对象深拷贝与浅拷贝

场景复现:我们在对一个表单进行编辑时候,编辑完内容,并没有保存的时候,点击关闭,这个时候我们的表单的该字段也随着我们的编辑而改变了,但是这个值并没有被真正被保存到数据库。

然而会出现下面这种情况:

 随着我们刷新页面这条数据会正常显示。但是这也算是一个bug。

bug发生的原因:

 我们在编辑表单的时候,直接将row对象复制给了弹窗需要的对象,这个时候这俩个对象任意一个的属性内容发生改变的话,另一个也会伴随着变化。这是因为两个对象引用了同一个对象。

这就是所谓的浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存 

深拷贝:创造一个一模一样的对象,修改对象不会影响到原对象.

用lodash实现深拷贝

引入lodash.js文件。

import _ from '@/utils/lodash'; //引入
this.ruleForm = _.cloneDeep(row);  //深拷贝

posted @   JamieChyi  阅读(230)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示