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. 

Ann-Kathrin Hofmann

Unternehmenskommunikation

Lukas Heinze

Frontend Development

Mehr aus unserem Blog

So gelingt die Datenmigration für Onlineshops
7. September 2020

Beim Wechsel auf ein neues Shopsystem oder bei der Anbindung von CRM- oder ERP-Systemen wird ein Thema von Projektverantwortlichen häufig …

Mehr erfahren
Wie Shopware und Akeneo Ihren E-Commerce-Erfolg steigern können
24. August 2020

Mit Shopware und Akeneo stellen wir Ihnen heute eine attraktive Kombination einer Geschäftsplattform mit einem Produktmanagementsystem vor, das nahezu alle …

Mehr erfahren
Agilität und Kosteneffizienz steigern mit Headless
9. Juli 2020

Ein Product Owner im E-Commerce steht heute vor komplexen Herausforderungen. Denn wie kaum eine andere Branche unterliegt der Online-Handel einem …

Mehr erfahren
Google-Update: Ranking verbessern mit Core Web Vitals
30. Juni 2020

Das Suchranking von Websites spielt eine Schlüsselrolle bei der Kundenakquise im E-Commerce. Für langfristigen Erfolg im Onlinehandel sollten Unternehmen ihr …

Mehr erfahren
New Work – Strategien für eine effektive Zusammenarbeit
1. Februar 2021

Seit einiger Zeit begleitet der Begriff “New Work” unsere Arbeitswelt. Doch was genau versteht man darunter und warum ist das …

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