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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章