Vue.js 3 – Das sind die wichtigsten neuen Features

Von Ann-Kathrin Hofmann
23. Februar 2020
Lesezeit: 2 Minuten

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.”

Mehr aus unserem Blog

Zukunftstag bei dmf
28. April 2022 · Lesezeit: 1 Minuten

Am 28. April war viel los im dmf-Büro in der Königstraße in Hannover: Anlässlich des Zukunftstages haben uns sechs Schülerinnen …

Weiterlesen
Was macht eigentlich eine HR-Managerin bei dmf?
6. Oktober 2021 · Lesezeit: 3 Minuten

Manuela Nickel kümmert sich seit Mai diesen Jahres ums Personal bei dmf. Wozu eine Agentur mit 30 Mitarbeiter:innen eine HR-Managerin …

Weiterlesen
SCD 2022: Die wichtigsten Shopware-News auf einen Blick
31. Mai 2022 · Lesezeit: 2 Minuten

Nach drei Jahren Pause hat der Shopware Community Day (SCD) endlich wieder live vor Ort stattgefunden. Klar, dass wir uns …

Weiterlesen
Wie Sie Ihre Conversion mit Usability-Tests optimieren
11. Februar 2022 · Lesezeit: 4 Minuten

Eine optimale Usability ist der Schlüssel für einen erfolgreichen Onlineshop. Usability-Tests helfen, die Benutzerfreundlichkeit immer wieder auf die Probe zu …

Weiterlesen
Registrierte Kund:innen: So geht’s
14. Oktober 2021 · Lesezeit: 2 Minuten

Onlineshops sollen vor allem eines: verkaufen. Gehen Kund:innen erfolgreich durch den Check-Out, so ist schon mal viel gewonnen. Noch besser …

Weiterlesen