vuejs2 beforeUpdate lifecycle hook triggert zweimal

Question

Wenn ich ein Array mit neuen Elementen umschalte, wird die beforeUpdate-Methode zweimal ausgelöst. Dies ist nicht der Fall, wenn ich die neuen Gegenstände schiebe. Hat jemand eine Idee, warum es das macht? Es bringt meine App durcheinander ...

Answer 1

Nach etwas mehr Versuch und Irrtum fand ich die Lösung. Ich glaube, ich kann auch erklären, warum die VorAktualisierung Methode zweimal ausgelöst:

• Erster Auslöser war für das Hinzufügen der neuen Elemente in das Array
• zweiter Auslöser für reshifting den Array-Schlüssel war, weil die Elemente am Anfang hinzugefügt werden das Array

Das gleiche Problem trat bei Verschiebung auf. Da Sie das erste Element im Array entfernen, geschieht auch hier die Umlagerung.

Dies könnte auch erklären, warum es dies nicht auf einem Push tut, weil neue Schlüssel hinzugefügt werden, nicht verschoben.

Und jetzt die Lösung: Wenn Sie eine v-for tun, binden das ‚Schlüssel‘ Attribut mit einem eindeutigen Wert wie folgt:

<div v-for="item in items" :key="item.id"></div> 

Was die Dokumentation sagt dazu: Vue einen Hinweis so zu geben, dass es die Identität jedes Knotens verfolgen und somit vorhandene Elemente wiederverwenden und neu anordnen kann.

Was ich daraus schließe, ist, dass das v-for nicht mehr nach den Array-Schlüsseln sucht, sondern nach dem eindeutigen Schlüssel, den Sie pro Element angegeben haben.