Zusammenfassung der Vorteile von Vue3 gegenüber Vue2

1. Warum brauchen wir vue3?

Bei der Verwendung von vue2 machen wir häufig unangenehme Erfahrungen, beispielsweise:

1. Mit dem Wachstum der Funktionen und der Erhöhung der Anforderungen wird der Code komplexer Komponenten immer schwieriger zu warten und die Logik wird verwirrend. Obwohl Vue2 auch einige Wiederverwendungsmethoden hat, haben sie alle bestimmte Nachteile. Beispielsweise ist Mixin, das wir häufig verwenden, besonders anfällig für Namenskonflikte. Die Absicht der freigegebenen Variablen ist nicht sehr offensichtlich und es kann leicht zu Konflikten kommen, wenn sie in anderen Komponenten wiederverwendet werden.
2. Die Unterstützung von Vue2 für TypeScript ist sehr eingeschränkt und eine TS-Integration wird nicht berücksichtigt.

Das Aufkommen von vue3 soll die Mängel von vue2 beheben. Seine Kompositions-API löst das Problem der Logikwiederverwendung sehr gut. Darüber hinaus ist der Quellcode von vue3 in ts geschrieben und unterstützt ts sehr gut. Wir können ts verwenden, um den Code während der Projektentwicklung robuster zu machen.

2. Vorteile von vue3

1. Vue3 unterstützt die meisten Funktionen von Vue2 und ist kompatibel mit Vue2
2. Vue3 weist im Vergleich zu Vue2 eine deutliche Leistungsverbesserung auf
   1. Reduzierte Paketgröße um 41 %
   2. 55 % schnelleres anfängliches Rendering, 133 % schnellere Updates
   3. Speichernutzung um 54 % reduziert
3. Die Kompositions-API von Vue3 ermöglicht die Modularisierung und Wiederverwendung der Logik
4. Neue Funktionen hinzugefügt, wie Teleport-Komponenten, globale API-Änderungen und -Optimierungen usw.
   

3. Unterschiede in den Reaktionsprinzipien

Vue2.x implementiert das Prinzip der bidirektionalen Datenbindung über Object.defineProperty von es5, das Daten basierend auf bestimmten Schlüsseln liest und ändert. Mit der Setter-Methode wird ein Datendiebstahl durchgeführt, mit der Getter-Methode werden die Daten geändert. Sie müssen jedoch zuerst wissen, welchen Schlüssel Sie abfangen und ändern möchten, damit vue2 nichts gegen die neu hinzugefügten Attribute unternehmen kann, z. B. das Hinzufügen und Löschen von Attributen sowie Änderungen der Array-Indizes und -Längen nicht überwachen kann. Die Lösung von vue2 besteht darin, Methoden wie Vue.set(object, propertyName, value) zu verwenden, um verschachtelten Objekten Reaktionsfähigkeit hinzuzufügen.

Vue3.x verwendet den schnelleren nativen Proxy von ES2015, um Object.defineProperty zu ersetzen. Unter Proxy versteht man das Einrichten einer „Abfangschicht“ vor dem Objekt. Jeder externe Zugriff auf das Objekt muss zuerst diese Abfangschicht durchlaufen. Daher bietet es einen Mechanismus zum Filtern und Umschreiben des externen Zugriffs. Proxy kann Objekte statt Eigenschaften direkt überwachen und ein neues Objekt zurückgeben, mit besserer Reaktionsunterstützung

4. Unterschiede im Lebenszyklus

beforeCreate -> Bitte verwenden Sie setup()

erstellt -> setup() verwenden

vorMount -> beiVorMount

montiert -> onMounted

vorUpdate -> beiVorUpdate

aktualisiert -> beiAktualisiert

vor Zerstörung -> bei Vor Unmount

zerstört -> beiUnmount

Fehler erfasst -> bei Fehler erfasst

Wenn Sie die Lebenszyklusfunktion auf der Seite verwenden möchten, besteht der vorherige Vorgang von vue2 darin, den Lebenszyklus direkt auf die Seite zu schreiben, und auf vue3 muss verwiesen werden, weshalb 3 den Code auf eine niedrigere Ebene komprimieren kann.

5. Unterschiede in der Standardprojektverzeichnisstruktur

Vue3 entfernt das Konfigurationsdateiverzeichnis sowie die Ordner „config“ und „build“, entfernt den statischen Ordner, fügt einen öffentlichen Ordner hinzu und verschiebt „index.html“ in den öffentlichen Ordner. Dem Ordner „src“ wird ein Ordner „views“ hinzugefügt, um Ansichtskomponenten und öffentliche Komponenten zu klassifizieren.

6.vue3 optimiert die globale API

In Vue3 wurden sowohl globale als auch interne APIs im Hinblick auf die Tree-Shaking-Unterstützung überarbeitet. Daher ist die globale API jetzt nur noch als benannte Exporte aus ES-Modul-Builds zugänglich.

importiere {nextTick} von 'vue'
nächsterTick(() => {
  // Einige DOM-bezogene Dinge})

Eintragsdatei

// Vue2 schreiben // Eine Änderung der globalen Vue2-Konfiguration ändert die Eigenschaften des Vue-Objekts // Es ist außerdem sehr schwierig, ein Vue-Objekt mit unterschiedlichen Konfigurationen in unterschiedlichen Apps zu teilen. Vue aus „Vue“ importieren
App aus „./App.vue“ importieren
Vue.config.xx=xx
Vue.verwenden(...)
Vue.mixin(...)

neuer Vue({
  rendern:h=>h(App)
}).$mount('#app')

// Vue3 importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
const app = createApp(APP) // Eine App-Instanz erstellen app.config.xx=xx // Konfiguration der Instanz konfliktfrei ändern app.use(...)
app.mixin(...)
app.mount('#app')

7. Verwenden Sie Proxy statt defineProperty

Vorteile von Proxy gegenüber defineProperty

Es gibt drei Hauptprobleme mit Object.defineProperty():

• Array-Änderungen können nicht überwacht werden
• Sie müssen über jede Eigenschaft des Objekts iterieren
• Muss tief verschachtelte Objekte durchlaufen
  

Proxy wurde offiziell in die ES2015-Spezifikation aufgenommen. Es verfügt über die folgenden Funktionen:

• Für Objekte: Für das gesamte Objekt und nicht für ein bestimmtes Attribut des Objekts. Daher ist es nicht erforderlich, die Schlüssel zu durchlaufen. Dies löst das zweite oben erwähnte Problem mit Object.defineProperty()
• Arrays unterstützen: Proxy muss Array-Methoden nicht überladen, wodurch viele Hacks vermieden werden. Die Reduzierung der Codemenge bedeutet geringere Wartungskosten und der Standard ist der Beste.

Zusätzlich zu den beiden oben genannten Punkten bietet Proxy auch die folgenden Vorteile:

• Der zweite Parameter von Proxy kann 13 Abfangmethoden haben, was umfangreicher ist als Object.defineProperty()
• Als neuer Standard hat Proxy viel Aufmerksamkeit und Leistungsoptimierung von Browserherstellern erhalten. Im Gegensatz dazu ist Object.defineProperty() eine alte Methode.

8. Weitere Informationen

Vue3-Quellcode
offizielle vue3-Website

Oben finden Sie eine detaillierte Zusammenfassung der Vorteile von Vue3 gegenüber Vue2. Weitere Informationen zu den Vorteilen von Vue3 gegenüber Vue2 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!