Angenommen, ich habe ein Eingabefeld in Vue.JS, das v-model an eine String-Dateneigenschaft bindet, und eine lange Liste von Zufallszahlen, die mit dieser ersten Zeichenfolge völlig nicht verwandt sind.
Wenn ich beide auf den gleichen Vue setze, sehe ich eine große Verlangsamung beim Eintippen des Eingabefeldes, da Vue das DOM für jeden Listeneintrag nach jedem Eingabeereignis neu bewertet, obwohl sie wirklich nichts damit zu tun haben andere.
Wenn ich jedoch v-for in eine untergeordnete Komponente verschiebe, in der ich randoms an eine Requisite anbinde, erlebe ich keine solche Verlangsamung
Gibt es eine Möglichkeit, die Leistung der zweiten Geige ohne eine Kind-Komponente zu erreichen?
Gibt es eine Möglichkeit, die Leistung der zweiten Geige ohne eine Kind-Komponente zu erreichen?
Nein.
Immer wenn sich any von der Vorlage ändert, muss Vue die Renderfunktion für die gesamte Komponente erneut ausführen und das neue virtualDOM mit dem neuen vergleichen. Sie können dies nicht für this oder that -Teil der Vorlage tun und überspringen den Rest. Daher wird jedes Mal, wenn sich der Inpot-Wert ändert, das gesamte virutalDOM neu gerendert.
Da dein v-for viele Elemente erzeugt, kann das ein paar 100ms dauern, genug um bei der Eingabe bemerkbar zu sein.
Das Extrahieren des schweren Teils der Vorlage in eine eigene Komponente ist in der Tat die "offizielle" Methode, um diese zu optimieren.
Wie Alex erklärte, könnte v-model.lazy die Situation etwas verbessern, aber den Kern des Problems nicht beheben.
Kürzeste, einfachste Antwort: Ändern Sie v-model in v-model.lazy .
Wenn ich beide auf den gleichen Vue setze, sehe ich eine enorme Verlangsamung beim Eintippen des Eingabefeldes, da Vue das DOM für jeden Listeneintrag nach jedem Eingabeereignis neu bewertet, obwohl sie wirklich nichts damit zu tun haben andere.
Beachten Sie, dass das OnceFor-Beispiel immer noch tuckert, obwohl es nicht mehr reaktiv ist. Ich verstehe Vue nicht gut genug, um zu sagen, ob das Absicht ist oder nicht.
Tags und Links javascript vue.js