vue爬坑：把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化

问题描述：在vue中把data中的两个对象optionA的值赋给optionB，改变optionB的值optionA的值也随之改变

data: {
    optionA: {
        a: 1
    },
    optionB: {
        a: ''
    }
}

将optionA的内容赋值给optionB，改变optionB里对象的值，发现optionA里的值也跟着变化了。为什么会出现这种情况呢？其实，这是一个引用传递而不是值传递，optionA和optionB指向的是同一个内存地址。

this.optionB = this.optionA
this.optionB.a = 5
console.log(this.optionA.a)    // 5
console.log(this.optionB.a)    // 5

如果我们不想让dataA的值跟着联动变化，应该怎么做呢？可以先把dataA转换成字符串，然后在转换成对象，代码如下：

this.optionB = JSON.parse(JSON.stringify(this.optionA));
this.optionB.a = 5;
console.log( this.optionA.a);   // 1
console.log( this.optionB.a);   // 5