Evan You (Mitte) ist der Kopf hinter Vue.js. Hier beim Dreh zur Vue.js-Doku. (Foto: Honeypot)
Vue.js ist neben React, Svelte und Angular eines der beliebtesten JS-Frameworks. Ursprünglich entwickelt wurde es von Evan You, der sich damit seine eigene, weniger komplexe Alternative zu Googles Angular schaffen wollte. 2014 beschloss der Entwickler, sein Projekt zu veröffentlichen, um auch andere Entwickler daran teilhaben zu lassen. Mittlerweile erfreut sich der Framework-Underdog mit 1,3 Millionen Nutzern großer Beliebtheit in der Webentwickler-Community und kommt sowohl beim Entwickeln sogenannter Single-Page-Apps als auch beim Bauen traditionell serverseitig gerenderter Websites zum Einsatz. Jetzt, knapp zweieinhalb Jahre nach Release von Version 2 und über 30 RFC und 628 PR später, ist mit „One Piece“ das dritte Major Release verfügbar.
Neues Composition-API – React-Hooks anyone?
Eine der wichtigsten Änderungen ist das neue Composition-API – damit sollen Pain-Points bei der Arbeit an großen Vue-Applikationen eliminiert werden. Das Composition-API setzt auf dem Reactivity-API auf. Angelehnt an die Hooks aus Facebooks React ermöglicht das Composition-API es, Logiken in sogenannten Composition-Functions zu speichern. Diese können dann über Komponenten hinweg wiederverwendet werden. Das Composition-API bietet zudem flexiblere Code-Organisation und robustere Typeninferenzen als die objektbasierte API aus Version 2.x.
Wer will, kann das API über das @vue/composition-api-Plugin auch mit Vue 2.x verwenden. Zugehörige Utility-Bibliotheken wie vueuse und vue-composable funktionieren sowohl für Vue 2 als auch für Vue 3. Alle Details dazu könnt ihr in der API-Reference nachlesen.
Neues Virtual DOM
Das Virtual DOM wurde von Grund auf neu geschrieben. Das Resultat: Performanzverbesserungen und verbesserte Unterstützung für TypeScript.
Native Portale
Ein Portal ist ein aus React entlehntes Konzept, das ihr bereits in Vue 2 nutzen konntet – bisher allerdings nur über Third-Party-Plugins wie zum Beispiel portal-vue. In V3 ist diese Funktionalität auch nativ verfügbar. Ein solches Portal ermöglicht das Rendern einer Komponente an anderer Stelle im DOM-Tree, auch außerhalb des App-Scopes. Für Portale findet sich zum Beispiel im Zusammenhang mit Notifications und Pop-ups Verwendung.
Suspense
Ebenfalls an React angelehnt ist Vue-Suspense, ein experimentelles Feature, das zwar bereits in Vue 3 enthalten ist, voraussichtlich aber erst in Version 3.1 dokumentiert und offiziell verfügbar ist. Laut Release-Notes befindet sich das Vue-Coreteam im regen Austausch mit dem Nuxt.js-Team. Die <Suspense>-Komponente erlaubt es, analog zu Reacts Suspense, auf sogenannte nested-async-Dependencies zu warten. Ein typischer Use-Case wäre, dass eure App einen Lade-Indikator anzeigt, bis das Fetchen von Nutzerdaten beendet ist.
<Suspense>
<template #default>
<UserProfile />
</template>
<template #fallback>
<div>Loading... </div>
</template>
</Suspense>
Verändertes Global-Mounting-Verhalten
Bisher nutzte Vue das globale Vue-Objekt, um zum Beispiel Plugins zu spezifizieren. In Vue 3 können Vue-Instanzen mit unterschiedlichen Plugins separat verfügbar gemacht werden.
Alle weiteren Neuerungen, Informationen zur Migration von Vue 2 auf 3 und Pläne für kommende Releases könnt ihr in den Release-Notes nachlesen. Wer sich für den Entstehungsprozess der neuen Version im Detail interessiert, sei an Evan You’s Blogpost zur Entstehungsgeschichte von V3 verwiesen.
- Vue.js: Die besten Ressourcen für den Einstieg
- Virtual-Reality-Projekte erstellen: So geht’s mit Vue.js und A-Frame
- Javascript-Frameworks: Neue Gestaltungsfreiräume mit Vue
