Heim > Artikel > Web-Frontend > 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
PS: Vue implementiert Deep Copy und Replikation von Arrays und Objekten
dieses Objekts alle auf eine Adresse verweist (mit Ausnahme des Basistyps und Null). Kopie im wahren Sinne), wie folgtArray:
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!