Vue.js 3: Das sind die wichtigsten neuen Features

Vom 20. – 21.02. hat unser Entwickler und PWA-Spezialist Lukas die Vue.js Conference in Amsterdam besucht. Mit über 2000 Teilnehmern aus über 50 Ländern ist die Veranstaltung das größte Vue Community Event der Welt.

Beim großen Opening der Konferenz in einem eindrucksvollen Kinosaal mit riesiger Leinwand und unglaublich gutem Sound trat Vue-Gründer Evan You höchstpersönlich auf die Bühne und verkündete die “Breaking News”: Vue.js 3 wird im zweiten Quartal 2020 released. Welche Neuerungen die neueste Version des Frameworks mit sich bringt, haben wir für Sie zusammengefasst:

Composition API

Das wichtigste neue Feature von Vue 3 ist die Composition API. Bei Vue 2 ist es so, dass beim Erstellen einer neuen Komponente der Code und die Komponente nach Optionen (reaktive Daten, berechnete Eigenschaften, Methoden) getrennt werden müssen. Kleinere Komponenten sind dadurch zwar gut lesbar, für komplexere Komponenten mit mehreren Funktionen ist diese sog. Option API jedoch unpraktisch.

Die Composition API ermöglicht in Vue 3 nun das logische Strukturieren von Features innerhalb einer großen Komponente. Diese logischen Strukturen können ausgelagert und dann mehrfach über verschiedene Komponenten wiederverwendet werden. Dieses Extrahieren einer gemeinsamen Logik für verschiedene Komponenten war in den früheren Vue-Versionen nur mit Mixins und Scoped-Slots möglich, die jedoch einige Nachteile mit sich brachten.

Die Composition API ist eine optionale Zusatzfunktion. Wenn Sie also auf Vue 3 upgraden, können Sie auch weiterhin alle Vue-2-Funktionen nutzen.

Verbesserte Slot-Generierung

Eine weitere Performance-Optimierung: In der aktuellen Version müssen verschachtelte Komponenten neu gerendert werden, wenn sich die Elternkomponente verändert. Mit Vue 3 können die Komponenten getrennt voneinander neu gerendert werden.

Proxies statt Object.defineProperty

In Vue 3 wird noch weiterer Speicher gespart und dadurch wiederum die Performance verbessert: Unter der Haube verwendet Vue.js die klassische Object.defineProperty-Methode für die Reaktivität. In der neuen Version werden Proxies dafür zuständig sein. Das verbraucht weniger Speicher und ist doppelt so schnell.

Static Tree Hoisting

Static Tree Hoisting bedeutet, dass Vue.js beim Kompilieren statische Inhalte auslässt, da sie irrelevant für die Reaktivität (dynamische Inhalte, die zur Laufzeit aktualisiert werden) sind. Dies gilt sowohl für statisches HTML als auch für statische Properties (feste Eigenschaften einer Komponente). Das wiederum beschleunigt den Rendering-Prozess. Insbesondere Nuxt.js-Benutzer dürften sich darauf freuen, da diese Optimierung sich auch auf SSR (Serverside Rendering) auswirkt (bis zu 3 Mal schneller).

Es geht noch kleiner

Obwohl Vue.js schon einer der kleineren JS Frameworks ist, werden mit Vue 3 zur Laufzeit nur die Funktionalitäten bereitgestellt, die auch benutzt werden (Tree shaking). Werden in der App zum Beispiel keine Übergänge (Transitions) benutzt, werden diese auch nicht geladen.

Lukas’ Fazit der Vue.js Conference 2020

“Das Event war sehr beeindruckend, insbesondere im Hinblick auf die interessanten neuen Features von Vue 3. Das Vue.js Framework bildet die Grundlage für unsere Progressive Web App hubble commerce. Wir entwickeln die PWA kontinuierlich weiter und die neuen Impulse, die ich auf der Konferenz gewonnen habe, werden in diese Optimierungen definitiv mit einfließen.”