Wenn Vue Push verwendet, um Daten hinzuzufügen, führt die Änderung eines der Daten dazu, dass sich andere Daten entsprechend ändern.
1. Wenn Sie ein Vue-Hintergrundprojekt schreiben, verwenden Sie Push, um mehrere Teile derselben Daten zum Array hinzuzufügen, einen der Daten zu ändern und andere Die Daten ändern sich entsprechend.
Der Grund für dieses Problem liegt darin, dass es sich beim Push nicht um einen Wert, sondern um eine Adresse handelt und die Arrays alle auf dieselbe Adresse verweisen, genau wie data.itemList[0] und data.itemList[1] beide auf item verweisen. Jeder Push entspricht einer Änderung der Adresse des Arrays, sodass jedes Element zum Inhalt des letzten Pushs wird.
Wenn Sie Push zum Hinzufügen mehrerer Daten verwenden, verweisen die mehreren Daten auf dieselbe Speicheradresse. Das Ändern eines Datenelements entspricht dem Ändern des Werts des Speichers, auf den verwiesen wird, sodass jedes Datenelement geändert wird.
Beim Hinzufügen von
Daten setzt das Frontend ein addArr-Klickereignis. Wenn dann ein bestimmtes Element im Datenarray
geändert wird, ändert sich dieses Attribut aller Unterelemente im Array, was sich auf die Gesamtdaten auswirkt (
wenn eines davon geändert wird). Wenn sich ein Datenelement ändert, ändern sich auch andere Daten entsprechend.)
addArr() {
//data中的obj的数据
// obj = {
// name:'aaa',
// sex:'未知',
// age:'18'
// }
//data中默认是空数组
// this.list = []
this.list.push(JSON.parse(JSON.stringify(this.obj)))
},
Lösung
Methode eins:
Die jeweils zu übertragenden Daten werden in einem anderen, separat geöffneten Bereich gespeichert. Dies führt nicht dazu, dass das gesamte Array auf eine Speicheradresse verweist.
addArr() {
let obj = {
name:'aaa',
sex:'未知',
age:'18'
}
this.list.push(obj)
},
Methode Zwei:
JS Deep Copy, machen Sie hier den Unterschied zwischen JS Deep Copy und Shallow Copy bekannt. In
JavaScript kopiert Shallow Copy nur die Speicheradresse der Originaldaten, was zwei Datenzeigern entspricht, die auf dieselbe Adresse zeigen, und alle Datenelementänderungen. wirkt sich auf das andere aus; während die beiden Daten der tiefen Kopie auf unterschiedliche Adressen verweisen, wirkt sich jede Änderung in einem Element nicht auf das andere aus. Daher kann die sinnvolle Verwendung von JS Deep Copy das Problem der Datenverschmutzung lösen, das dadurch verursacht wird, dass mehrere Daten auf dieselbe Speicheradresse verweisen. Das Ändern eines Datenelements entspricht dem Ändern des Werts des Speichers, auf den verwiesen wird, was zu einer Änderung jedes einzelnen Datenelements führt Stück Daten.
addArr() {
this.list.push(JSON.parse(JSON.stringify(this.obj)))
}