Vue.js 3 - Das sind die wichtigsten neuen Features

23. Februar 2020
2 Minuten, 21 Sekunden
Vue.js 3 - Das sind die wichtigsten neuen Features

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

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 im Juni endgültig…

Mehr erfahren
Agenturnews 01.2020
29. Dezember 2019

Neues Jahr, neues Shopsystem - Shopware 6, die neue Lösung aus dem Hause Shopware, ist in der E-Commerce-Welt in aller Munde. Auch bei uns s…

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, sondern stellt ei…

Mehr erfahren
Branchennews Januar 2020
1. Januar 2020

Release Candidate Shopware 6.1 veröffentlicht Am 10. Dezember 2019 hat Shopware den Shopware 6 Release Candidate (RC) veröffentlicht, um le…

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: der A…

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