Vue.js 3 – Das sind die wichtigsten neuen Features

23. Februar 2020
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

Agentur-News 07.2020: PWA, SW 6 und neue Kollegen
16. Juli 2020

Shopware 6 ist nach wie vor ein brandaktuelles Thema, das uns im Agentur-Alltag begleitet. Einige SW6-Projekte stehen kurz vor dem …

Mehr erfahren
Neue Google-Studie: “Millisekunden machen Millionen”
2. Juli 2020

Bereits eine Verbesserung der Seitenladezeit um 0,1 Sekunden zeigt positive Auswirkungen auf Seitenaufrufe, Konversionsraten und den durchschnittlichen Bestellwert in Onlineshops. …

Mehr erfahren
Ein Game Changer – PWA für E-Commerce
13. Juli 2020

Die mobile Nutzung von Websites steigt kontinuierlich und hat überwiegend die Marke von 50% überschritten. Daraus ergeben sich vielfältige Anforderungen …

Mehr erfahren
Warum wir Sketch als Webdesign-Tool nutzen
1. März 2018

Eigentlich haben wir (wie die meisten Designer) unsere Webdesigns schon immer in Photoshop erstellt. Vor einiger Zeit sind wir durch …

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
Erfolgreicher B2B-Commerce – Teil 1: Das erwarten Firmenkunden heute
11. Mai 2020

Aktuelle Studien belegen, dass B2B-E-Commerce immer mehr an Relevanz gewinnt: Laut einer Expertenbefragung von ibi research rechnen Branchenkenner fest damit, …

Mehr erfahren
Agentur-News 07.2020: PWA, SW 6 und neue Kollegen
16. Juli 2020

Shopware 6 ist nach wie vor ein brandaktuelles Thema, das uns im Agentur-Alltag begleitet. Einige SW6-Projekte stehen kurz vor dem …

Mehr erfahren
Headless Commerce: Das sind die Vorteile für Shopbetreiber
24. Juni 2020

Mit den steigenden Verkaufszahlen werden auch die Anforderungen den den E-Commerce zunehmend komplexer. Ein moderner Onlineshop muss viel leisten können: …

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