VUE 对象的拷贝:解决vue A对象赋值给B对象,修改B属性会影响到A的问题
1、直接拷贝let origin = {name: '张三',age: 12}let target = origin;target.name = '李四';上面将target对象的属性修改之后,origin也会相应的改变,因为这里的target与origin这两个引用实际上是指向同一个对象。2、深拷贝let target=JSON.parse(JSON.stringify(this.origin)
·
例:this.A = this.B 或 const A = this.B 等形式的 对象赋值,修改新对象A导致原对象B同步变化
【问题原因】:
赋值时没有创建一个新的对象内存地址;
只是把 B 的内存地址指向了 A 的内存地址,一旦 B 值发生改变,但内存地址不会发生改变,所以A 的值也会相对应改变
没有进行深度拷贝,只是把this.A的地址指向了与this.B相同的地址,两者共用同一内存,所以修改this.A导致this.B同步变化。
【解决方法】
1、直接拷贝
let origin = {
name: '张三',
age: 12
}
let target = origin;
target.name = '李四';
将target对象的属性修改之后,origin也会相应的改变,因为这里的target与origin这两个引用实际上是指向同一个对象。
2、深拷贝
let target=JSON.parse(JSON.stringify(this.origin));
将对象转成字符串剔除对象属性后,再转换成对象赋值,这样能解决指向相同地址修改会相互影响的问题。
3、将对象转成字符串
this.A= Object.assign({},this.B);
将对象转成字符串剔除对象属性后,再转换成对象赋值,这样能解决指向相同地址修改会相互影响的问题。
3、转换后拷贝
使用 扩展运算符 转换后再赋值
let target=[...this.origin];
上面这种方式不仅仅是增加一个引用,而是将属性也拷贝过来了。
更多推荐
已为社区贡献13条内容
所有评论(0)