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

*附深浅拷贝示意图：

浅拷贝：

深拷贝：