当前位置: 首页 > Web前端 > vue.js

Vue实现对数据对象的深拷贝赋值

时间:2023-03-31 15:03:13 vue.js

在日常的Vue开发工作中,我们经常会对请求的数据进行变量赋值操作,然后使用变量来渲染数据。但是,我们知道,我们经常使用的赋值方式“=”其实是数据的浅拷贝,即当你改变赋值变量时,原来的数据也会随之改变。vara=['1','2','3','4','5'];varb=a;b[0]='2';控制台日志(一);//['2','2','3','4','5']console.log(b);//['2','2','3','4','5']//因为b做了a的浅拷贝,ab指向同一个内存地址(堆内存中存放的值).当我们需要改变变量的值但不改变原始数据时,可以使用JSON的方式实现数据的深拷贝赋值:JSON.parse(JSON.stringify(this.responseData));例如:letdata1=this.selectform.keyListletdata2=JSON.parse(JSON.stringify(this.selectform.keyList))data1.a='test'console.log(data1.a)//testconsole.log(this.selectform.keyList.a)//testdata2.a='test222'console.log(keydata2.a)//test222console.log(this.selectform.keyList.a)//test*withdeepandshallowcopy图:shallow复制:深复制: