Ist Vue 3 „production ready“?

21. September 2020
3 Minuten

Es ist soweit: Vue 3 wurde offiziell am 18. September veröffentlicht. “One Piece”, wie das Major Release auch genannt wird, kommt mit verbesserter Leistung, kleineren Bundle-Größen, einer optimierten TypeScript-Integration, neuen APIs für die Behandlung umfangreicher Anwendungsfälle und spannenden weiteren Neuerungen.

Im Anschluss an die Vue.js Conference Amsterdam im Februar diesen Jahres haben wir einige neue Funktionen des Frameworks bereits vorgestellt: Vue.js 3 – Das sind die wichtigsten neuen Features. Heute gehen wir auf einzelne Funktionen noch detaillierter ein und stellen die Frage: Ist Vue 3 “production ready”?

Modularisierung der Kern-Funktionen

Eine der  größten Neuheiten von Vue.js 3 ist definitiv die Modularisierung der Codebasis: Die Kern-Funktionen, die vorher in einem einzelnen Core enthalten waren, sind in der neuen Version entkoppelt. Das bedeutet konkret: Einzelne Teile können eigenständig verwendet werden. So gibt es beispielsweise bereits Custom Renderer für WebGL und auch die Reaktivität in Vue kann eigenständig ohne den Rest genutzt werden. Dies bietet nicht nur Möglichkeiten für Library-Autoren, sondern auch eine Verkleinerung des zu ladenden Javascript-Bundles: Nicht benötigte Teile können via Tree Shaking ausgelassen werden vom finalen Bundle, das beim Client ankommt. Das verbessert die Performance von Websites und wirkt sich gleichzeitig positiv auf deren CO2-Bilanz aus

Weitere Performance-Verbesserungen

Vue 3 zeigt signifikante Performance-Verbesserungen gegenüber Vue 2. So können beispielsweise durch das Tree Shaking in Vue 3 bis zu 41 % kleinere Bundles erreicht werden. Auch das initiale Rendering ist nun bis zu 55 % schneller und die Speichernutzung wurde um 54 % reduziert. 

Ein Ansatz, der bei Vue 3 gewählt wurde, um Updates performanter zu gestalten, ist der des “compiler-informed Virtual DOM” (siehe Release Notes). Wie bereits in Vue 2 werden auch in Vue 3 aus dem Template sogenannte “render functions” generiert. Um die Effizienz der Verwendung der Virtual DOM in Vue 3 zu steigern, unterscheiden diese nun zwischen statisch anzuzeigenden Inhalten und dynamischen Elementen. Auf diese Weise können statische Teile im Vergleichsprozess übersprungen werden. Kurz gesagt: Es muss nun nicht mehr alles Zeile für Zeile verglichen werden. Updates können dadurch in Vue.js 3 bis zu 133 % schneller durchgeführt werden!

Composition API

Die neue Composition API erleichtert die Arbeit mit großen, komplexen Anwendungen, indem sie das logische Strukturieren von Features innerhalb einer großen Komponente ermöglicht. Diese logischen Strukturen können ausgelagert und dann mehrfach über verschiedene Komponenten wiederverwendet werden. Somit gibt es nun, neben der Options API, eine weitere Möglichkeit, Komponenten zu erstellen. Die bisherige Options API bleibt aber erhalten, sodass Apps, die auf Vue 2 basieren, nicht komplett umgeschrieben werden müssen.

Neues Build-Tool: Vite

Auf der Vue.js Global Online Conference am 18. September wurde zum ersten Mal das mit Vue 3 kompatible experimentelle Build-Tool Vite vorgestellt. Vite basiert auf nativen ES-Modulen für die Entwicklung und auf Rollup.js zum Erstellen von Production Bundles. Ein mögliches Einsatzgebiet von Vite ist das entkapselte Programmieren von Single File Components, ohne ganze Bundles laden zu müssen. Da in der Entwicklungsphase also kein Bundling benötigt wird und Änderungen zeitnah im Browser sichtbar sind, glänzt Vite durch eine besonders hohe Entwicklungsgeschwindigkeit. Um Vite verwenden zu können, muss der Browser native ES-Module unterstützen

Migration von Vue 2 nach Vue 3

Vue 3 hat einen überarbeiteten App-Setup-Prozess. Jedoch funktionieren die meisten Funktionen wie vorher. Eine detaillierte Anleitung zur Migration von Vue 2 nach Vue 3 ist hier zu finden.

Ist Vue 3 “production ready”?

Entwickler, die jetzt auf Vue 3 upgraden, können alle neuen Funktionen nach Belieben ausprobieren. Eine Einschränkung gibt es hierbei allerdings: Wer das Framework im Zusammenhang mit anderen Vue-basierten Modulen wie Nuxt.js, Vuex oder Vue-Router verwendet, muss sich noch etwas gedulden. Denn obwohl Vue.js 3 nun offiziell veröffentlicht wurde und sich nicht mehr in der Beta-Version befindet, sind noch nicht alle unterstützenden Libraries im Vue-Ökosystem einsatzbereit („not production ready“). Ende 2020 sollen aber auch diese offiziell released werden. 

Mehr aus unserem Blog

Branchennews Februar 2020
28. Februar 2020

Magento

Wie bereits in der Magento 2020 Roadmap angekündigt, tut sich bei Magento einiges: Der Support für Magento 1 läuft …

Mehr erfahren
Vue.js 3 – Das sind die wichtigsten neuen Features
23. Februar 2020

Vom 20. – 21.02. hat unser Entwickler und PWA-Spezialist Lukas die Vue.js Conference in Amsterdam besucht. Mit über 2000 Teilnehmern …

Mehr erfahren
Produktkonfigurator Plugin für Shopware 6
29. Dezember 2019

Die Funktion der sogenannten „Individualisierbaren Produkte“ wurde in Shopware 6 (Professional Edition) erheblich weiterentwickelt. Weitere funktionale Ergänzungen stehen auf der …

Mehr erfahren
dmf on Tour
11. Februar 2020

Sie möchten sich unverbindlich über unsere E-Commerce-Lösungen informieren, mehr über unsere PWA hubble commerce erfahren oder einfach mal die Menschen …

Mehr erfahren
Launch RAWBITE
3. Juli 2018

Voll Durchstarten mit RAWBITE

In den letzten Wochen haben wir gemeinsam mit unserem Kunden an der Umsetzung des Onlineshops von …

Mehr erfahren
Shopware 6: Erster Überblick und Installation
6. Januar 2020

Seit Januar 2020 ist Shopware 6.1 als Stable Version verfügbar. Die neue Version bringt dabei nicht nur neue Features mit, …

Mehr erfahren
Shopware Warenkorb plötzlich leer nach Wechsel der Kategorie
15. Februar 2018

Der Kunde eröffnet ein Ticket und beschreibt einen sporadischen Fehler seines Onlineshops. Vereinzelt soll es vorkommen, dass der Warenkorb bei …

Mehr erfahren

Hallo, mein Name ist Anika Le.

Wenn Sie Fragen haben, melden Sie sich gerne bei uns.

+49 511 76 38 44 90 hallo@digitalmanufaktur.com

1