Was sind die neuen Funktionen von vue3.0?

Evan You (You Yuxi) gab am Morgen des 16. November 2018 in seiner Keynote-Rede im Vue Toronto eine Vorschau auf Vue 3. Durch die Nutzung neuer Funktionen, die von modernen Browsern unterstützt werden, wird Vue 3 eine leistungsstarke und verbesserte Version von Vue.js sein, die wir bereits kennen und lieben.

Zusammenfassend lässt sich sagen, dass Vue 3 in folgenden Aspekten eine Vorfreude wert ist:

Schneller

Kleiner

Einfacher zu warten

Mehr native Unterstützung

Einfacher zu entwickeln und zu verwenden

Schneller:

Virtuelles DOM neu schreiben (Virtual DOM Rewrite)

Mit Virtual DOM Rewrite können wir können mehr Hinweise zur Kompilierungszeit erwarten, um den Laufzeitaufwand zu reduzieren. Das Neuschreiben wird effizienteren Code zum Erstellen virtueller Knoten enthalten.

Optimierte Slot-Generierung

In der aktuellen Vue-Version müssen beim erneuten Rendern der übergeordneten Komponente auch deren untergeordnete Komponenten neu gerendert werden (Update vom 20. November: Dies Der Satz ist nicht streng und kann leicht irreführend sein: Das erneute Rendern von 2.0-Komponenten erfolgt auf der Komponentengranularität, es sei denn, die geänderten Daten sind die Requisiten der Unterkomponente ausgelöst werden. Zitat von: https://juejin.im/pin/5bf28ddd6fb9a056783705fc). Mit Vue 3 können übergeordnete und untergeordnete Komponenten unabhängig voneinander neu gerendert werden.

Static Tree Hoisting

Verwenden Sie statisches Tree Hoisting, was bedeutet, dass der Compiler von Vue 3 erkennen kann, was eine statische Komponente ist, und diese dann hochheben kann, wodurch die Rendering-Kosten gesenkt werden. Der Prozess des Patchens der gesamten Baumstruktur kann übersprungen werden.

Statisches Requisiten-Heben

Darüber hinaus können wir mit dem Heben statischer Requisiten rechnen, bei dem Vue 3 den Patching-Prozess überspringt, der die Knoten nicht ändert.

Proxy-basierter Beobachtermechanismus

Derzeit verwendet das reaktive System von Vue die Getter und Setter von Object.defineProperty. Vue 3 wird jedoch ES2015 Proxy als Beobachtermechanismus verwenden. Dadurch werden bisherige Warnungen eliminiert, die Geschwindigkeit verdoppelt und die Hälfte des Speicheraufwands eingespart.

Um IE11 weiterhin zu unterstützen, wird Vue 3 einen Build veröffentlichen, der den alten Beobachtermechanismus und die neue Proxy-Version unterstützt.

Kleiner:

Vue ist bereits sehr klein, etwa 20 KB zur Laufzeit komprimiert. Aber wir können davon ausgehen, dass es noch kleiner ausfallen wird, denn die neue Kernlaufzeit misst im gzip-Format etwa 10 KB. Dies wird zum großen Teil durch die Eliminierung ungenutzter Bibliotheken (auch bekannt als Tree Shaking) erreicht. Wenn Sie beispielsweise kein Übergangselement verwenden, wird dieses nicht einbezogen.

Wartbarer:

Während die meisten Vue-Entwickler nicht an der Bibliothek selbst arbeiten, ist es gut zu wissen, dass Vue 3 einen besser wartbaren Quellcode bietet. Es wird nicht nur TypeScript verwenden, sondern viele Pakete werden entkoppelt, wodurch alles modularer wird.

Mehr native Unterstützung

Der Laufzeitkernel wird auch plattformunabhängig sein, was es für Vue einfacher macht, mit jeder Plattform wie dem Web, iOS oder Android zu arbeiten.

Einfacher für die Entwicklung zu verwenden

Das Observer-Modul wurde in ein eigenes Paket entpackt, sodass Sie es auf neue Arten verwenden können

Tracking-Re Auch die Renderposition wird einfacher. In Evans Vortrag führte er Live-Programmierung durch und zeigte, wie man eine Vue-Anwendung verfolgt (mithilfe des Codes unten), um herauszufinden, was das erneute Rendern einer Komponente auslöst. Dies ist bei größeren Anwendungen und zur Feinabstimmung der Leistung nützlich.

Vue 3.0 wird außerdem die Unterstützung für TypeScript verbessern und eine erweiterte Typprüfung sowie hilfreiche Fehler und Warnungen im Editor ermöglichen.

Experimental Hooks API

Wenn wir das Verhalten zwischen zwei Komponenten in Vue teilen müssen, verwenden wir normalerweise Mixins. Evan versucht jedoch, die Hooks-API zu verwenden, um einige der Probleme von Mixins zu vermeiden und die Verwendung von idiomatischem Vue-Code komfortabler zu gestalten.

Experimentelle Time-Slicing-Unterstützung

Wenn viele Komponenten gleichzeitig versuchen, neu zu rendern, kann jeder Browser langsamer werden, was zu einer beeinträchtigten Benutzererfahrung führt.

Evan zeigte, wie er versuchte, Time Slicing zu nutzen, um die Ausführung von JS in Teile zu zerlegen, die dem Browser zugeführt würden, wenn eine Benutzerinteraktion zu bewältigen wäre.

Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen von vue3.0?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!