Eine kurze Analyse des Reaktionsprinzips und der Unterschiede von Vue2.0/3.0

Vorwort

Seit der offiziellen Einführung von vue3.0 sind viele Freunde auf vue3.0 umgestiegen. Hier werde ich die Prinzipien von 3.0 und 2.0 sowie die Unterschiede zwischen ihnen aufschreiben, die ich für Ihr eigenes Lernen zusammengefasst habe.

Schritt 1: Das responsive Prinzip von vue2.0

Schauen Sie sich zunächst die Erklärung auf der offiziellen Website an:

Wenn Sie ein einfaches JavaScript-Objekt an die Datenoption einer Vue-Instanz übergeben, durchläuft Vue alle Eigenschaften des Objekts und konvertiert sie alle mit Object.defineProperty in Getter/Setter. Object.defineProperty ist eine nicht shimmbare Funktion in ES5, weshalb Vue IE8 und niedrigere Browserversionen nicht unterstützt.

Diese Getter/Setter sind für den Benutzer unsichtbar, aber intern ermöglichen sie es Vue, Abhängigkeiten zu verfolgen und Änderungen zu melden, wenn auf Eigenschaften zugegriffen oder diese geändert werden. Das hier zu beachtende Problem besteht darin, dass die Browserkonsole Getter/Setter beim Drucken von Datenobjekten anders formatiert. Daher müssen Sie möglicherweise vue-devtools installieren, um eine benutzerfreundlichere Überprüfungsoberfläche zu erhalten.

Jede Komponenteninstanz verfügt über ein entsprechendes Watcher-Instanzobjekt, das die Eigenschaften während der Komponentendarstellung als Abhängigkeiten aufzeichnet. Wenn später der Setter der Abhängigkeit aufgerufen wird, wird der Watcher benachrichtigt, dass er eine Neuberechnung durchführen muss, wodurch die zugehörigen Komponenten aktualisiert werden.

Hier ist mein Verständnis

Tatsächlich ist es für Personen, die die API und den Quellcode gelesen haben, nicht schwer zu erkennen, dass das V-Modell und die Responsive-Prinzipien in zwei Ebenen unterteilt sind.

• Die erste Ebene, die unterste Ebene, ist eine Funktion von es5, Object.defineProperty, die Daten über Getter und Setter aktualisiert.
• Die zweite Schicht ist die Präsentationsschicht. Jeder, der das Prinzip des V-Modells gelesen hat, weiß, dass es im V-Modell einen Wächter gibt. Der V-On-Wächter überwacht die Datenänderungen und V-On aktualisiert die Ansicht.

Schritt 2: Das responsive Prinzip von vue3.0

Schauen Sie sich zunächst die Erklärung auf der offiziellen Website an:

Aus diesem Grund kann vue3.0 Objekteigenschaften direkt löschen und ändern.

Schritt 3: Fassen Sie die Unterschiede zwischen den beiden zusammen

----------- 3.0

(Die ersten beiden müssen nicht mehr wie in 2.0 auf „ändern“ eingestellt werden. Sie können direkt geändert werden.)

1. 3.0 Proxy kann die Daten des Array-Typs direkt ändern

2. Sie können Objektattribute direkt hinzufügen und löschen

3.3.0 ist kompatibel mit IE12 und höher

4. Die v-model-Syntax der Komponente wird in v-bind.sync geändert.

5. Die Priorität der Verwendung von v-for und v-if für dasselbe Element hat sich geändert

6. Die Tastenbelegung bei v-for wurde geändert

7. Der Verweis von v-for wird nicht mehr als Array registriert

8, destroy, beforeDestroy-Lebenszyklen werden in unmount und beforeUnmount umbenannt

9. <template> wird als normales Element behandelt, nicht als Inhalt innerhalb des Renderers

Hier sind die wichtigsten Änderungen, die auf der offiziellen Website veröffentlicht wurden

Zusammenfassen

Dies ist das Ende dieses Artikels über die responsiven Prinzipien und Unterschiede von vue2.0/3.0. Weitere relevante Inhalte zu den responsiven Prinzipien von vue2.0/3.0 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!