Gründe und Lösungen für die Unfähigkeit, Array-Änderungen in Vue2 zu erkennen

Aufgrund von Einschränkungen von JavaScript kann Vue keine Änderungen an den folgenden Arrays erkennen:

• Beim Festlegen eines Array-Elements direkt über einen Index, zum Beispiel: vm.items[indexOfItem] = newValue
• Beim Ändern der Länge eines Arrays, zum Beispiel: vm.items.length = newLength

var vm = neuer Vue({
  Daten: {
    Elemente: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // reagiert nicht vm.items.length = 2 // reagiert nicht

Problemumgehung

Überwachung manuell hinzufügen // Vue.set
Vue.set(vm.items, indexOfItem, neuerWert)
vm.$set(vm.items, indexOfItem, neuerWert)
Verwenden Sie die Array-Mutationsmethode, da Vue Reaktionsfähigkeit für Array-Mutationsmethoden implementiert // Array.prototype.splice
vm.items.splice(indexOfItem, 1, neuerWert)

Warum kann ich Änderungen in den beiden Arrays in Vue2.0 nicht überwachen?

Die offizielle Dokumentation fasst diese beiden Punkte kurz zusammen: „Aufgrund von JavaScript-Einschränkungen“ sind sie nicht umsetzbar, und Object.defineProperty ist eine Lösung zum Erkennen von Datenänderungen. Bezieht sich diese Einschränkung auf Object.defineProperty?

Tatsächlich liegt der Grund nicht in der Sicherheitslücke in Object.defineProperty(), sondern in Leistungsüberlegungen. Die Leistung von Object.defineProperty in einem Array ist dieselbe wie in einem Objekt. Der Index des Arrays kann als Schlüssel im Objekt betrachtet werden.

• Beim Zugriff auf oder Festlegen des Wertes des entsprechenden Elements über den Index können die Getter- und Setter-Methoden ausgelöst werden
• Durch Pushen oder Rückgängigmachen wird der Index erhöht. Neu hinzugefügte Attribute müssen manuell initialisiert werden, bevor sie beobachtet werden können.
• Das Löschen eines Elements per Pop oder Shift löscht und aktualisiert den Index und löst außerdem die Setter- und Getter-Methoden aus.
  

Daher kann Object.defineProperty Änderungen am Array-Index überwachen, vue2.x hat diese Funktion jedoch aufgegeben.

Quellcodeanalyse

Object.property kann Operationen erkennen, die Arrays über Indizes ändern, aber Vue implementiert dies nicht. Schauen wir uns dann den Quellcode an:

Vue 3.0

In Vue 3.0 wird Proxy anstelle von Object.defineProperty() verwendet, um die bestehenden Probleme zu lösen.

Oben finden Sie ausführliche Informationen zu den Gründen, warum Array-Änderungen in Vue2 nicht erkannt werden können, sowie zu deren Lösung. Weitere Informationen zu Vue2-Array-Änderungen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!