欢迎访问 生活随笔!

ag凯发k8国际

当前位置: ag凯发k8国际 > 前端技术 > vue >内容正文

vue

vue对象深拷贝-ag凯发k8国际

发布时间:2024/10/8 vue 0 豆豆
ag凯发k8国际 收集整理的这篇文章主要介绍了 vue对象深拷贝_vue 对数据对象实现深拷贝赋值 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

在日常的vue开发工作中,我们经常对请求来的数据进行变量赋值操作,再用变量去进行数据渲染。 然而我们知道,我们经常用的赋值方式 “=” 实际上属于数据的浅拷贝,也就是当你改变赋值变量时,原数据也会发生相应变化。var a = ['1', '2', '3', '4', '5'];

var b = a;

b[0] = '2';

console.log(a); // ['2', '2', '3', '4', '5']

console.log(b); // ['2', '2', '3', '4', '5']

//因为b浅拷贝a, ab指向同一个内存地址(堆内存中存的值)

那当我们需要改变变量的值但是不改变原来数据的时候,我们可以借助json方法来实现数据的深拷贝赋值:json.parse(json.stringify(this.responsedata));

e.g:let data1 = this.selectform.keylist

let data2 = json.parse(json.stringify(this.selectform.keylist))

data1.a = 'test'

console.log(data1.a) // test

console.log(this.selectform.keylist.a) // test

data2.a = 'test222'

console.log(keydata2.a) // test222

console.log(this.selectform.keylist.a) // test

*附深浅拷贝示意图:

浅拷贝:

深拷贝:

总结

以上是ag凯发k8国际为你收集整理的vue对象深拷贝_vue 对数据对象实现深拷贝赋值的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错,欢迎将ag凯发k8国际推荐给好友。

  • 上一篇:
  • 下一篇:
网站地图