So implementieren Sie das gesamte Neu-Rendering, wenn Sie Daten in einer einzelnen Komponente in Vue dynamisch ändern

Im Folgenden werde ich eine kurze Diskussion über das gesamte Neu-Rendering bei der dynamischen Änderung von Daten in einer einzelnen Vue-Komponente geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Als ich heute Vue lernte, entdeckte ich ein interessantes Phänomen.

Wenn bestimmte Daten unter einer bestimmten Komponente durch ein Klickereignis dynamisch geändert werden, werden die entsprechenden Daten in der Ansicht synchron geändert. Ja, ist das nicht Unsinn? Ein Hauptmerkmal von Vue sind Daten Bindung. Interessant ist, dass sich auch der Wert und die Ansicht geändert haben, die einem anderen Datenwert entsprechen, den ich mit Math.random() unter dieser Komponente geschrieben habe.

Das macht mich als Neuling etwas seltsam, ich habe einen geändert. Wie kommt es, dass sich zwei geändert haben? ? ? ? Denken wir einen Moment darüber nach und fragen uns, ob etwas passieren könnte, wenn die Daten beispielsweise in beide Richtungen synchronisiert werden. Stimmt es, dass der Knoten neu geladen wird, solange sich ein Knoten ändert? ? ?

Ich dachte, der Grund dafür müsse mit dem Prinzip der bidirektionalen Bindung von Vue-Daten zusammenhängen, also habe ich danach gesucht und etwas gefunden, nämlich DocumentFragment. Ich schien es schon einmal gesehen zu haben, aber ich habe nicht viel darauf geachtet. Wofür wird es verwendet:

DocumentFragment (Dokumentfragment) kann als Knotencontainer betrachtet werden. Es kann mehrere untergeordnete Knoten enthalten. Wenn wir es in das DOM einfügen, werden nur seine untergeordneten Knoten in den Zielknoten eingefügt Stellen Sie es sich also als einen Container für eine Reihe von Knoten vor. Die Verwendung von DocumentFragment zur Verarbeitung von Knoten ist viel schneller und besser als die direkte Manipulation des DOM.

Manuelle Hervorhebung: Wenn Vue kompiliert wird, entführt es alle untergeordneten Knoten des Montageziels (wird wirklich über die Append-Methode im DOM entführt. Der Knoten wird automatisch gelöscht werden) in das DocumentFragment. Nach einiger Verarbeitung wird das DocumentFragment als Ganzes zurückgegeben und in das Mount-Ziel eingefügt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

JQuery-Methode für ausgewählte Werte der ausgewählten Komponente

$set und Array in vue.js Method_vue aktualisieren .js

Methode zur Codeaufteilung in React-Router4 (basierend auf Webpack)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das gesamte Neu-Rendering, wenn Sie Daten in einer einzelnen Komponente in Vue dynamisch ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!