Warum kann Vue keine Array-Änderungen erkennen? Die Gründe sind wie folgt

Problembeschreibung: Vue erkennt Datenänderungen über Object.defineProperty. Daher ist es verständlich, dass die Additionsoperation des Arrays nicht überwacht werden kann, da diese Erkennungs- und Bindungsoperation für alle Eigenschaften im Konstruktor durchgeführt wurde.

Aber der offizielle Text: Aufgrund von JavaScript-Einschränkungen kann Vue die folgenden geänderten Arrays nicht erkennen:

Wenn Sie den Index verwenden, um ein Element direkt festzulegen, zum Beispiel: vm.items[indexOfItem] = newValue
Wenn Sie die Länge eines Arrays ändern, zum Beispiel: vm.items.length = newLength

Was bedeutet dieser Satz? Ich habe getestet, dass Object.defineProperty die Accessor-Eigenschaft der Eigenschaft über die Index-Eigenschaft festlegen kann. Warum kann sie also nicht überwacht werden?

Einige Leute im Forum sagten, dass die Länge des Arrays variabel ist, selbst wenn die Länge 5 ist, es möglicherweise keinen Index 4 hat. Ich würde gerne fragen, woher diese Antwort kommt, wenn Sie sie ändern Die Länge des neuen Elements wird am Ende hinzugefügt, sein Wert ist undefiniert und seine Werte können über den Index abgerufen werden. Warum heißt es „kann keinen Index 4 haben“?

Da wir die Länge des Arrays kennen, warum können wir nicht alle Elemente durchlaufen und einen Satz hinzufügen und durch das Indexattribut gelangen? Können wir gleichzeitig die Ansicht aktualisieren?

Wenn ich unter Berücksichtigung des Leistungsproblems sagen muss, dass der Elementinhalt nur 4 aussagekräftige Werte hat, die Länge jedoch tatsächlich 1000 beträgt, ist es für uns unmöglich, Erkennungsvorgänge für 1000 Elemente durchzuführen. Aber der Beamte sagte, es liege an JS-Einschränkungen. Ich möchte wissen, was diese Einschränkung ist. Vielen Dank, dass Sie mir geholfen haben, dieses Problem zu lösen.

---

---

Angesichts dieses Problems möchte ich zunächst sagen, dass es sich um ein Array mit einer Länge von 1000, aber nur 4 Elementen handelt ist nicht unbedingt Dies wirkt sich auf die Leistung aus, da das Durchlaufen von Daten in js zusätzlich zur for-Schleife auch forEach, Map, Filter usw. umfasst, mit Ausnahme der for-Schleife (for, for...) .of), bei anderen Durchläufen dreht sich alles um Schlüsselwerte. Durchlauf von Es ist das Ergebnis des Durchlaufs eines Arrays mit einer Länge von 10000, aber nur zwei Elementen unter Verwendung von for und forEach:

var arr = [1]; arr[10000] = 1
function a(){
    console.time()
    for(var i = 0;i<arr.length;i++)console.log(1)
    console.timeEnd()
}
a(); //default: 567.1669921875ms
a(); //default: 566.2451171875ms

function b(){
    console.time()
    arr.forEach(item=>{console.log(2)})
    console.timeEnd()
}
b(); //default: 0.81982421875ms
b(); //default: 0.434814453125ms

Sie können das Ergebnis sehen ist sehr offensichtlich, aber wenn in der for-Schleife keine Operation ausgeführt wird, ist die Geschwindigkeit der beiden ungefähr gleich

Zweitens möchte ich sagen, dass ich nicht weiß, was diese Grenze ist    (⇀ ‸↼‶)   ( •́ω•̀ )╭

Die Methode Object.defineProperty() definiert direkt eine neue Eigenschaft für ein Objekt oder ändert eine vorhandene Eigenschaft eines Objekts und gibt das Objekt zurück. Der Index des Arrays ist ebenfalls ein Attribut, sodass wir Änderungen in den Array-Elementen überwachen können

var arr = [1,2,3,4]
arr.forEach((item,index)=>{
    Object.defineProperty(arr,index,{
        set:function(val){
            console.log('set')
            item = val
        },
        get:function(val){
            console.log('get')
            return item
        }
    })
})
arr[1]; // get  2
arr[1] = 1; // set  1

Aber wenn wir ein neues Element hinzufügen, wird das Listening-Ereignis nicht ausgelöst, da wir dieses neue Attribut nicht überwachen . Auch ein Attribut löschen.

Zurück zur Hauptfrage: Da Arrays überwacht werden können, warum kann Vue die durch

verursachten Änderungen in Array-Elementen nicht erkennen, selbst wenn das dem Index entsprechende Element vorhanden ist und überwacht wird? vm.items[indexOfItem] = newValue

Um dieses Problem zu klären, habe ich es mit dem Quellcode von Vue getestet. Das Folgende ist der Quellcode von Vue für die Datenüberwachung:

Sie können sehen Wenn die Daten ein Array sind, wird die Überwachung der Datenattribute gestoppt:

, sodass die Daten ein Array sind Attribute werden weiterhin überwacht und dann etwas in get und set in der Funktion defineReactive ausgegeben, damit wir wissen, dass get und set aufgerufen werden. Hier wird eine einfache Beurteilung hinzugefügt, bei der nur das Abrufen von Array-Elementen, das Festlegen

und das anschließende Schreiben eines einfachen Falls betrachtet wird, wobei hauptsächlich getestet wird, ob die Verwendung von

zum Ändern des Array-Elements möglich ist überwacht und Responsive Rendering-Seite vm.items[indexOfItem] = newValue

Seite ausführen

Sie können sehen, dass nach sechsmaligem Ausführen von get die Länge unseres Arrays 3 beträgt zu sagen: Das Array wird zweimal durchlaufen. Wenn die Seite einmal gerendert wird, kann ein Datenüberwachungsereignis mehrmals ausgelöst werden, auch wenn die Daten nur einmal verwendet werden. Die spezifischen Details müssen durch die Art und Weise bestimmt werden, wie Sie den Code schreiben. Wenn es sich bei den überwachten Daten beispielsweise um ein Array handelt, wird die Funktion dependArray ausgeführt (der Code befindet sich in der Implementierung von get im Bild oben). In dieser Funktion wird das Array durchlaufen und der Wert wird dort abgerufen wird noch dreimal get sein, hier löst hauptsächlich die Überwachung des arr-Arrays in Daten durch Vue die dependArray-Funktion aus.

Wenn wir zum Beispiel auf eines der Elemente klicken, klicke ich auf 3

Sie können sehen, dass Set einmal ausgeführt wird, dann die Daten aktualisiert werden, die Seite neu gerendert wird und das Array zweimal durchlaufen wird.

Aber! ! ! Das Array ist tatsächlich reaktionsfähig geworden, was bedeutet, dass die js-Syntaxfunktion die Überwachung des Arrays nicht einschränkt.

Hier testen wir mit einem Array der Länge 3. Wenn ich die Array-Länge auf 9 erhöhe

Sie können sehen, dass get 18 Mal ausgeführt wird und die array Es wird immer noch zweimal durchlaufen. Dasselbe gilt für das Klicken auf ein Element. Es wird auch zweimal durchlaufen, wenn es gerendert wird.

Nach dem obigen Experiment bin ich zu dem Schluss gekommen, dass Arrays in Vue responsiv aktualisiert werden können, aber ich hoffe, dass ich nicht verstehe, warum Youda diese Funktion aufgrund seiner Überlegungen nicht hinzugefügt hat Es gibt Experten, die genug wissen, um mir einen Rat zu geben

Verwandte Artikel:

Problem bei der Erkennung von Array-Änderungen in Vue

Warum ist das so? json zurückgegeben? Kann nicht in ein Array konvertiert werden

Ähnliche Videos:

Array-Änderungserkennung – Wheat Academy Vue.js Video-Tutorial

Das obige ist der detaillierte Inhalt vonWarum kann Vue keine Array-Änderungen erkennen? Die Gründe sind wie folgt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!