解讀vue項(xiàng)目中遇到的深拷貝淺拷貝問題

更新時(shí)間：2023年10月18日 09:45:59 作者：oilpastell

這篇文章主要介紹了vue項(xiàng)目中遇到的深拷貝淺拷貝問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue項(xiàng)目的深拷貝淺拷貝問題

遇到的問題

使用element-ui修改表單文本框的數(shù)據(jù)時(shí)，無(wú)論確定還是取消，頁(yè)面數(shù)據(jù)都在同步修改

原因：

復(fù)雜類型的賦值是淺拷貝，直接賦值會(huì)導(dǎo)致雙向修改

解決的方法：

將淺拷貝轉(zhuǎn)換成深拷貝

解決思路：

先把該對(duì)象轉(zhuǎn)成字符串(普通數(shù)據(jù)類型), 就沒有引用類型的影響了。再轉(zhuǎn)回對(duì)象使用。

轉(zhuǎn)換方式：

JSON.parse(JSON.stringify(對(duì)象))

這里簡(jiǎn)述下深拷貝淺拷貝的概念

淺拷貝： 將A對(duì)象賦值給B對(duì)象，修改B對(duì)象的屬性和方法會(huì)影響到A對(duì)象的屬性和方法。

深拷貝：將A對(duì)象賦值給B對(duì)象，修改B對(duì)象的屬性和方法不會(huì)影響到A對(duì)象的屬性和方法。

vue深拷貝、淺拷貝的區(qū)別

1、淺拷貝

this.ProductionLineForm = {
    "produeLineName": "產(chǎn)線1",
	"departmentId": 1,
	"produceLineStatus": 0,
	"director": 5,
	"description": "測(cè)試產(chǎn)線",
	"keyCraftNodeId":1
}
let productionLineForm = this.ProductionLineForm;
productionLineForm.produeLineName = '修改名稱'
console.info('this.ProductionLineForm', this.ProductionLineForm)

查看原form的值：

2、深拷貝

使用JSON.parse(JSON.stringify(要拷貝的對(duì)象))。

JSON.stringify()對(duì)象轉(zhuǎn)為串，JSON.parse()串轉(zhuǎn)為對(duì)象，JSON操作是深拷貝操作。

 this.ProductionLineForm = {
   "produeLineName": "產(chǎn)線1",
   "departmentId": 1,
   "produceLineStatus": 0,
   "director": 5,
   "description": "測(cè)試產(chǎn)線",
   "keyCraftNodeId": 1
}
let productionLineForm = JSON.parse(JSON.stringify(this.ProductionLineForm));
productionLineForm.produeLineName = '修改名稱'
console.info('this.ProductionLineForm', this.ProductionLineForm)

查看原form的值：