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

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
Mobile E-Commerce mit PWA
25. Mai 2020

Fast die Hälfte der Deutschen erledigt ihre Einkäufe “oft” bzw. “fast immer” über ihr Smartphone – so lautet das Ergebnis …

Mehr erfahren
B2B Best Practice: Barstuff.de setzt auf Omni-Channel und Mobile Commerce
3. Juni 2020

Mit der rasant voranschreitenden Digitalisierung hat sich die Customer Journey von B2B-Kunden in den letzten Jahren stark verändert. Geschäftskunden erwarten …

Mehr erfahren
Agentur-News 08.2020: Einblick in den dmf-Alltag
14. August 2020

Trotz der heißen Temperaturen ist in der E-Commerce-Welt vom „Sommerloch“ kaum eine Spur. Sowohl Magento als auch Shopware haben neue …

Mehr erfahren
Umstieg von Shopware 5 auf 6 – vorausschauend planen und Geld sparen
9. März 2020

Im folgenden Beispiel werden wir Ihnen aufzeigen, wie wir die in etwa zwei Jahren geplante Migration eines unserer Kunden auf …

Mehr erfahren
Migration von Magento 1 auf Shopware 6 – Der ultimative Guide
22. Januar 2020

Ihr Shop läuft noch auf Magento 1 und Sie haben sich bereits intensiv mit der technischen Zukunft Ihres Onlineshops auseinandergesetzt? …

Mehr erfahren
FLSK wechselt mit der digital.manufaktur auf Shopware 6
6. Januar 2020

Das erfolgreiche Münchener Start-up FLSK hat die digital.manufaktur mit dem Wechsel von Magento 1 auf Shopware 6 beauftragt. Das Ziel: …

Mehr erfahren
Relaunch unserer Webseite
6. Dezember 2017

Ist Ihnen vielleicht schon etwas aufgefallen? Ja genau, richtig gesehen! Seit heute erstrahlt unsere Webseite in einem schicken neuen Glanz!

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