JavaScript: Vue.js 3.0 geht mit neuer Internals-Architektur an den Start
Mit neuen APIs und einem modulareren Aufbau soll das Framework Entwicklern mehr Flexibilität und Skalierbarkeit bieten.
- Matthias Parbel
Nach Abschluss der Betaphase zur Jahresmitte hat das Entwicklerteam hinter dem JavaScript-Framework nun die finale Version von Vue.js 3.0 vorgelegt. Während der rund zweijährigen Arbeiten am neuen Major Release seien über 30 Requests for Changes (RFC), mehr als 2,600 Commits und 628 Pull Requests in die Fertigstellung von Vue.js 3.0 eingeflossen, dessen Codebasis nun komplett in TypeScript geschrieben ist. Entwickler profitieren dadurch von stets aktuellen, automatisch generierten und getesteten Typdefinitionen.
Im Kern modular und flexibel
Grundlegend überarbeitet wurde auch die Architektur des Kerns von Vue.js, der sich nun aus entkoppelten Modulen zusammensetzt. Während der Aufruf nach wie vor über den Tag ‹script› erfolgt, soll der modulare Aufbau sich besser warten lassen und Entwicklern mehr Optionen bei der Runtime-Gestaltung bieten. Wie bereits für die Betaversion im Frühjahr angekündigt, soll sich die Größe einer Runtime nun via Tree-Shaking um bis zu 50 Prozent reduzieren lassen. Darüber hinaus lassen sich über die API der Core-Runtime individuelle Renderer für unterschiedliche Render-Ziele erstellen und der Compiler unterstützt jetzt benutzerdefinierte AST-Transformationen für Anpassungen zur Build-Zeit.
Neben den geringeren Bundle-Größen tragen eine Reihe weiterer Maßnahmen dazu bei, die Performance von Vue.js 3.0 gegenüber der Vorgängerreihe 2.x spürbar zu verbessern. Dem Entwicklerteam zufolge fällt der Speicherbedarf des Frameworks bis um die Hälfte geringer aus, das initiale Rendering erfolge um bis zu 55 Prozent schneller und auch Updates ließen sich gut doppelt so schnell durchführen. Der Template-Compiler optimiere zudem rigoroser. Er erzeugt unter anderem Rendering-Funktionscode, der die dynamischen Knoten innerhalb einer Vorlage verflacht, um den Aufwand für das Traversieren zur Laufzeit zu reduzieren.
Composition API für Vue.js 3.0 – und auch 2.x
Während die 2.x-Objekt-basierte API in Vue.js 3.0 weitgehend intakt sei, steht Entwicklern mit der Composition API eine neue Programmierschnittstelle zur Verfügung, die den Umgang mit umfangreicheren Anwendungen erleichtern soll. Sie setzt auf der Reactivity-API auf und erlaubt Logik-Aufbau sowie Wiederverwendung vergleichbar zu React Hooks. Die neue Composition API lässt sich mit dem Plug-in @vue/composition-api auch in Vue.js 2.x verwenden. Darüber hinaus stehen mit vueuse und vue-composable auch schon zwei Librarys parat, die sich ebenfalls mit der neuen API in beiden Major-Versionen des Frameworks nutzen lassen.
Zwei ebenfalls neue und auf Singe-File Components (SFC bzw. .vue-Dateien) zugeschnittene Funktionen sind in Vue.js 3.0 zwar implementiert und stehen Entwicklern zur Verfügung, gelten allerdings noch als experimentell: ‹script setup› verspricht syntaktischen Zucker für den Einsatz der Composition API innerhalb von SFCs und mit ‹style vars› halten zustandsgetriebene CSS-Variablen Einzug in SFCs.
Devtools sind noch in Arbeit
Das Entwicklerteam hinter dem JavaScript-Framework empfiehlt einen zügigen Umstieg auf das neue Major Release 3.0, auch wenn die Arbeiten an wichtigen Unterprojekten wie beispielsweise die Router- und Vuex-Integration in die neuen Devtools noch nicht abgeschlossen sind. Der Befehl npm install vue installiert daher weiterhin Vue 2.x – wer explizit Version 3.0 wünscht, verwendet npm install vue@next. Bis zum Jahresende will das Team alles standardmäßig auf Vue.js 3.0 umgestellt haben.
Weitere Informationen zum neuen Release des JavaScript-Frameworks finden sich in der Ankündigung auf GitHub. Umsteigewillige sollten einen Blick in den Migration Guide werfen.
(map)
