Vue中把對象中的數據給了某個變量,改變一個對象的值,另一個對象也變化的解決方案

在vue中的data數據中建立這兩個對象

var salesOreder = new Vue({
	delimiters: ['${', '}'], [想知道這裏的作用解釋請看這裏](https://blog.csdn.net/qq_46124502/article/details/106326034)
	data(){
        return {
            objData1:{
                 name:"zky"
               },
            objData2:""
              }
         }
    })

此時把objData1的裏的內容賦值給objData2中,發現當改變objData2中的內容時,objData1中的內容也會發生改變

this.objData2 = this.objData1
this.objData2.name = ”朱康宇”
console.log(this.objData2.name)//朱康宇
console.log(this.objData1.name)//朱康宇
//此時你會發現我只是修改了this.objData2.的值,但this.objData1中的值也發生了改變

原因是對象的賦值不像常量賦值那樣,對象的賦值 實際是拷貝的地址,此時objData1和objData2共同指向的是一個地址,所以無論是objData1改變還是objData2改變 ,兩者都會發生改變,因爲它門同時指向一個地址
解決方案:
先讓 objData1變成字符串然後在轉換成對象,這樣做的目的是,兩個對象分別指向了各自的內存也就是地址

this.objData2 = JSON.parse(JSON.stringify(this.objData1))
this.objData2.name = ”朱康宇”
console.log(this.objData2.name)//朱康宇
console.log(this.objData1.name)//zky
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章