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