Zuweisungsprobleme zwischen Vue-Arrays und Objekten

Dieses Mal bringe ich Ihnen die Zuweisungsprobleme von VueArray und Objekt. Was sind die Vorsichtsmaßnahmen für die Zuweisung von Werten? Vue-Arrays und -Objekte wie folgt Dies ist ein praktischer Fall, schauen wir uns ihn an.

Vue kann die folgenden geänderten Arrays nicht erkennen:

Wenn Sie ein Element direkt mithilfe eines Index festlegen, zum Beispiel: vm.items[indexOfItem] = newValue

Wenn Sie die Länge des Arrays ändern, zum Beispiel: vm.items.length = newLength

Bei Bedarf können Sie in der ersten Situation this.$set(this.arr,index,newVal)

verwenden Vue kann das Hinzufügen oder Löschen des Objekt--Attributs nicht erkennen:

 Sie können this.$set(this.person,'age',12)

verwenden Wenn mehrere Objekte hinzugefügt werden müssen, <code><a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a>.assign({},this.person,{age:12,name:'wee'})Object

.assign({},this.person,{age:12,name:'wee'})

PS: Vue implementiert Deep Copy und Replikation von Arrays und Objekten

Wenn Objekte zwischen Komponenten übergeben werden, verweist die Zuweisung zwischen Objekten nur auf die gleiche Adresse, da der -Referenztyp

dieses Objekts alle auf eine Adresse verweist (mit Ausnahme des Basistyps und Null). Kopie im wahren Sinne), wie folgt

Array:

var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]

Objekt:

var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了，
alert(obj.a); // 20，obj的a跟着改变

Dies liegt daran, dass der Objekttyp direkt zugewiesen wird und die Referenz nur auf dieselbe Adresse verweist. Das Ändern von obj führt auch dazu, dass obj2 geändert wird

Wenn also in Vue mehrere Komponenten als Daten auf dasselbe Objekt verweisen, werden die Daten anderer Objekte gleichzeitig geändert, wenn eine der Komponenten die Objektdaten ändert. Wenn eine solche bidirektionale Bindung erforderlich ist, ist dies natürlich die beste. Wenn Sie diese Bindung jedoch nicht benötigen und möchten, dass die Objektdaten jeder Komponente unabhängig voneinander sind, dh Kopien der vorhandenen Objekte nicht miteinander zusammenhängen, können Sie die folgenden Methoden zur Lösung verwenden

computed: { 
   data: function () { 
     var obj={}; 
     obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象 
     return obj 
  } 
 }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie Yuansheng JS den asynchronen Datei-Upload implementiert

JS führt einen Zeitgrößenvergleich durch

Das obige ist der detaillierte Inhalt vonZuweisungsprobleme zwischen Vue-Arrays und Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!