首先定义两个对象
data: {
// 对象一
obj1:{
name:'pingchangxin',
},
// 对象二
obj2:{
name:'',
}
},
一、浅拷贝：
浅拷贝就是只拷贝表面的数据，其内存所指的地址还是一样的，所以修改其中一个另外一个也会被修改，比如下面：
methods:{
edit1(){
this.obj2 = this.obj1; //把obj1复制给obj2
this.obj1.name = 'pingchangxinzuishuai' //修改obj1的name属性
console.log(this.obj1.name) //打印结果为pingchangxinzuishuai
console.log(this.obj2.name) //打印结果为pingchangxinzuishuai
}
}
二、深拷贝
深拷贝就是不仅复制另一个对象的数据，而且还会生成一个指向不同内存地址的对象，当修改原对象的数据时，这个新生成的对象不会发生改变,可以利用Object.assign()来实现，比如下面:
edit2(){
this.obj2 = Object.assign({},this.obj1); //把obj1复制给obj2
this.obj1.name = 'pingchangxinzuishuai' //修改obj1的name属性
console.log(this.obj1.name) //打印结果为pingchangxinzuishuai
console.log(this.obj2.name) //打印结果为pingchangxin
},
三、Object.assign是不是万能的呢？
我都这么问了，那明显不是万能的，因为在用Object.assign的时候它只对对象里面的第一层数据有效，比如下面这个例子：
data: {
// 对象一
obj1:{
name:'pingchangxin',
params:[0,1,2,3],
},
// 对象二
obj2:{
name:'',
params:[],
}
},
methods:{
edit2(){
this.obj2 = Object.assign({},this.obj1);
this.obj1.params[0] = 9; //修改obj1的params属性
console.log(this.obj1.params) //打印结果为[9,1,2,3]
console.log(this.obj2.params) //打印结果为[9,1,2,3]
},
}
大家会发现，当我用了Object.assign之后修改了obj1，obj2也随之改变了，所以这里给大家提个醒，那这种情况怎么办呢？
最简单的方法就是把第二层的数据拿出来单独Object.assign一份，再放回原对象里面，比如下面这样:
data: {
// 对象一
obj1:{
name:'pingchangxin',
params:[0,1,2,3],
},
// 对象二
obj2:{
name:'',
params:[],
},
// 暂时存放数据的数组
helpparams:[],
},
methods:{
edit2(){
// 先把obj1.params单独复制给helpparams
this.helpparams = Object.assign([],this.obj1.params)
// 然后再分别复制obj1.name属性给obj2.name和helpparams给obj2.params
this.obj2.name = Object.assign({},this.obj1.name)
this.obj2.params = Object.assign([],this.helpparams)
this.obj1.params[0] = 9; //修改obj1的params属性
console.log(this.obj1.params) //打印结果为[9,1,2,3]
console.log(this.obj2.params) //打印结果为[0,1,2,3]
},
}
这里就是运用了Object.assign只对最外层数据有效的原理,如果说obj1有两层甚至三层,我们一层一层复制给obj2就没问题了。
