问题描述:在vue中把data中的两个对象optionA的值赋给optionB,改变optionB的值optionA的值也随之改变
data: { optionA: { a: 1 }, optionB: { a: '' } }
将optionA的内容赋值给optionB,改变optionB里对象的值,发现optionA里的值也跟着变化了。为什么会出现这种情况呢?其实,这是一个引用传递而不是值传递,optionA和optionB指向的是同一个内存地址。
1 this.optionB = this.optionA 2 this.optionB.a = 5 3 console.log(this.optionA.a) // 5 4 console.log(this.optionB.a) // 5
如果我们不想让dataA的值跟着联动变化,应该怎么做呢?可以先把dataA转换成字符串,然后在转换成对象,代码如下:
1 this.optionB = JSON.parse(JSON.stringify(this.optionA)); 2 this.optionB.a = 5; 3 console.log( this.optionA.a); // 1 4 console.log( this.optionB.a); // 5