Webframework Vue.js 3: Der nächste Meilenstein

Vue.js hat in den vergangenen Jahren eine bemerkenswerte Evolution durchlebt. Dabei hat es sich deutlich verändert und ist vom kleinen Webframework, das als Alternative zu klassischen Frameworks angetreten war, zu einer bekannten und beachteten Größe im Webzirkus geworden. Seit dem ersten Release 2014 sind zahlreiche weitere Versionen erschienen. Obwohl im Dezember 2020 Wikipedia Version 2.6.11 vom 13. Dezember 2019 als aktuelle Version aufführt, ist mittlerweile Version 3 als nächster umfassender Meilenstein erschienen. Das gilt zumindest bezüglich der Core-Bibliothek und zahlreicher offizieller Libraries und Tools, denn Vue.js 3 unterliegt einem mehrschrittigen Release-Prozess. Die neue Version mit dem an das japanische Manga angelehnten Namen "One Piece" war über zwei Jahre in der Entwicklung. Mehr als 2600 Commits und über 620 Pull Requests später ist die Version verfügbar.

Vue.js gilt seit jeher als progressives Framework, das einen gestaffelten Einsatz erlaubt: Vue kann zum einen als Bibliothek an einigen Stellen im Projekt zum Einsatz kommen und zum anderen als umfangreiches Webframework ähnlich wie Angular oder React. Diesem schrittweisen Einsatz trägt das häufig neben "progressiv" gegebene Attribut "inkrementell", Rechnung. Zum Verwenden von Vue.js genügt Wissen in JavaScript und HTML. Die einfach gehaltene API gilt vielfach als leichter zu erlernen als Angular oder React, worüber es allerdings ausgedehnte Diskussionen gibt.

Umso spannender ist daher die Frage, in welchen Aspekten sich Vue.js von Version 2 zur Version 3 verändert hat. Über die Entwicklungszeit hinweg standen zahlreiche Funktionen zur Diskussion, von denen es einige in die finale Version geschafft haben. Bei vielen anderen hat die Community unterschiedliche Implementierungen getestet und einige Ideen komplett verworfen. Die neue Version von Vue.js ist immerhin mit dem Versprechen erschienen, noch progressiver zu sein. Gleichzeitig hat sich laut den Release Notes auf GitHub die Performance deutlich verbessert, während sich die Größe der Bibliothek und der Speicherverbrauch verringert haben Das entspricht den Versprechungen, die im Vorfeld die Messlatte für die Version hoch gelegt haben. Seit der ersten Ankündigung zu den Plänen von Vue.js im September 2018 sind zwei Jahre vergangen.

Schrittweise zum Release

Zunächst gilt es, ein paar grundlegende Unterscheidungen zu erläutern: Im Rahmen des Frameworks gibt es den Vue.js Core, die offiziellen Bibliotheken sowie weitere Bibliotheken und Tools im zugehörigen Ökosystem.

Mit Berichten über die Veröffentlichung von Vue.js am 18. September 2020 ist Vue.js Core gemeint. Diesen Kern stuft das Entwicklerteam nun als stabil ein. Trotzdem bleibt das sogenannte @next-Distribution-Tag noch eine Weile bestehen, das anzeigt, dass der Code für den Core in einem eigenen vue-next genannten Repository auf GitHub verfügbar ist, unter der GitHub-Organisation vuejs, die alle weiteren offiziellen Projekte listet.

Der gesamte Veröffentlichungsprozess zu Vue.js 3 ist mehrschrittig. Nach der Veröffentlichung des Kerns folgen offizielle Bibliotheken wie Vue Router und Vuex. Die Umstellung externer Bibliotheken und Tools externer Entwickler erfolgt in einem parallelen Prozess, auf den das Vue.js-Core-Team keinen großen Einfluss hat.

Die offiziellen Komponenten stehen in ausreichend fortgeschrittenen Versionen zu Verfügung, um stabil zu sein und mit Vue.js 3 zusammenzuarbeiten. Somit lässt sich Vue.js 3 nicht nur ausprobieren, sondern in den meisten Fällen bereits produktiv einsetzen. Ein Vorabcheck der im Projekt eingesetzten Bibliotheken und Tools ist dennoch Pflicht, damit nicht erst bei der Migration ein Showstopper auffällt.

Etwas Drama im Vorfeld

Die Ankündigungen, erste RFC-Dokumente (Request for Comments) und Beispiele zu den geplanten Änderungen für Vue.js 3 haben in der Community mitunter heftige Diskussionen ausgelöst. Nicht alle Akteure sind dabei sachlich geblieben. Kurz: Es sind die Fetzen geflogen.

Das betrifft insbesondere die Spezifikation zur Composition API, die zum ersten Mal im Juni 2019 veröffentlicht wurde. Viele Diskussionen entstanden aus einem Missverständnis heraus. Unter anderem war nicht allen von Anfang an klar, dass die neue API optional ist und nicht die Option-API ersetzen sollte. Beispiele für die Debatte sind auf auf Hacker News, Reddit, Dev.to und Vue School zu finden.

Letztlich zeigen die Reaktionen, dass Änderungen an Frameworks stressig sind und sich eine Community missverstanden oder angegriffen fühlen kann, wenn sich das Verhalten, die Handhabung oder die Zukunftsaussichten eines Frameworks erheblich zu ändern scheinen.

Die wichtigsten Neuerungen

Bei den zahlreichen Änderungen gibt es zwei grundlegende Richtungen zu unterscheiden: interne und externe. Letztere sind die Anpassungen, die beim täglichen Einsatz am meisten auffallen, weil sich beispielsweise eine Schnittstelle geändert hat oder Funktionen weggefallen beziehungsweise hinzugekommen sind. Interne Neuerungen, die weitgehend unter der Haube bleiben, hat Vue.js 3 reichlich zu bieten. Nennenswert ist unter anderem die Modularisierung des Frameworks, die offizielle Dokumente häufig mit "Layered Internal Modules" beschreiben.

Die Kernfunktionen befinden sich jetzt nicht in einem umfangreichen Core, sondern in einzelnen Paketen. Da alle Module eigenständig verwendbar sind, entsteht eine Entkopplung. Die Release Notes geben an, dass sich durch Treeshaking, also dem Entfernen nicht genutzter Elemente, die Größe von Vue.js halbieren lasse. Jeweilige Module wie @vue/reactivity lassen sich zudem einfacher nutzen, da sie zugänglicher sind. Da die Community Vue.js 3 mit TypeScript entwickelt hat, sind keine zusätzlichen Tools für das Zusammenspiel von Vue mit Microsofts Programmiersprache erforderlich. Allerdings bleibt TypeScript beim Verwenden des Frameworks optional.

Zahlreiche Änderungen im aktuellen Release haben einen Einfluss auf die Nutzung des Webframeworks. Die folgende Liste fasst einige wichtige Änderungen und Neuerungen zusammen:

• Änderungen beim Mounten (Global Mounting),
• Composition API,
• Bessere Reaktivität sowie
• Fragmente und native Portale durch Teleports.

Die Liste zeigt die Anpassungen, die neue Ansätze für die Entwicklung bieten, Probleme tilgen oder zu Inkompatibilitäten führen. Ein Deep-Dive zu grundlegenden Funktionen und Verhaltensänderungen von Vue.js 3 folgt im zweiten Teil dieser Artikelserie.

Global eingebunden

Wer über das Kommandozeilenprogramm Vue CLI ein neues Projekt anlegt, kann in neueren Versionen des Tools Vue 3 Preview auswählen. Damit ist ein Vue.js-3-Projekt inklusive Babel und ESLint gemeint. Noch ist die Anbindung der Vue CLI für die dritte Hauptversion des Frameworks nicht final und die Option deshalb noch als Preview markiert. Beim Anlegen des neuen Projekts fällt eine Neuerung auf Anhieb ins Auge: Das Erstellen der Anwendung und das Mounting haben sich geändert. In Vue.js 2 sind der Vue-Konstruktor mit einer Render-Funktion und eine $mount-Funktion notwendig, die folgendem Code-Schnipsel ähnelt:

import Vue from 'vue';
import App from './app.vue';
const app = new Vue({
  render: (h) => h(App),
}).$mount('#app') ;

In Vue.js 3 ändert sich das folgendermaßen:

import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");

Diese Implementierung nutzt ein Fluent-Interface, um die Initialisierung weiterer Komponenten hintereinander schalten zu können, beispielsweise mit dem Store von Vue.js:

const store = createStore(…);
createApp(App)
  .use(store)
  .mount('#app');

Das bedeutet grundsätzlich, dass globale Vue.js-Instanzen unverändert bleiben. In Vue.js 2 konnten die Änderungen der globalen Instanzen durch Plug-ins und anderen externen Komponenten Problemen verursachen. Im aktuellen Release ist die Konfiguration lokal auf eine Vue.js-Instanz begrenzt.

Composition API

Die neue Composition API gehört zu den umfassendsten Änderungen in Vue.js 3. Die Neuerung führte in der Entwicklungsphase der neuen Version zu kontroversen Diskussionen. Die ursprüngliche Vorstellung als "Function-based Component API" ist im Kern treffend formuliert. Dass die Unterschiede zur Options-API groß sind, hat bei vielen Entwickler aus der Community die Frage ausgelöst, welche Vorteile die Änderung hat, und ob sie Vue.js-Apps nur noch auf die neue Art und Weise implementieren müssen.

Die in dem Zusammenhang beruhigende Nachricht ist, dass die neue API vollständig optional ist und Entwickler weiterhin Anwendungen mit der Options-API entwickeln können. Die Composition API ist entstanden, um die logische Organisation, Kapselung und Wiederverwendbarkeit von Code zu steigern. Statt wie bei der Options-API unterschiedliche Bereiche für Daten, Methoden und dergleichen zu haben, nutzt die neue API eine setup-Funktion, um das von der Komponente Benötigte vollständig vorzubereiten und zurückzugeben:

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    });

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

Der Code erzeugt ein Objekt, das am Ende über return alles zurückliefert, was für die Komponenten notwendig ist. Anders formuliert ist dadurch eine Schnittstelle für die Komponente definiert. Das hat Vorteile beim Implementieren und Organisieren komplexer Komponenten, bei der Wiederverwendbarkeit von Code und bei der Aufteilung von Komponenten in mehrere Dateien. Grundsätzlich ließ sich das bisher mit Mixins bewerkstelligen, was aber in Kombination mit der Options-API nicht unproblematisch war. Auch das Tooling verbessert sich durch die neue API, weil die Implementierung in der setup-Funktion reines JavaScript oder TypeScript ist.

Ein Nachteil der Neuerungen ist die zusätzliche Zeit für die Einarbeitung. Die Anpassungen fügen sich nicht ebenso gewohnt nahtlos in die Lernkurve von Vue.js ein wie bisherige Ergänzungen. Bei umfangreichen Komponenten und Projekten werden die Vorteile allerdings schnell sichtbar.

Den umfangreichen Änderungen im Zuge der Umstellung auf die Composition API wird die Fortsetzung der zweiteiligen Artikelserie widmen und zeigen, wie Entwickler Vue.js-3-Projekte mit der Composition API konzipieren und implementieren können.

Bessere Reaktivität

Die Version 2 von Vue.js hielt die Implementierung und die Funktionsweise des Reactivity-Systems weitgehend unter Verschluss. Obwohl Entwickler keinen direkten Zugriff darauf hatten, konnten sie die Funktionen im Code nutzen. Dass das Framework die Details versteckte, führte in der Community zu mehr Verwirrung als Hilfe. Vue.js 3 bietet explizite Wege, um etwas als reaktiv zu kennzeichnen. Eine reaktive Referenz erfordert das Einbinden der Funktion ref:

import { ref, computed } from 'vue';
const name = ref("Fabian Deitelhoff");

Sie kapselt skalare Typen, die dadurch veränderbar (mutable) sind. Daten lassen sich über die Eigenschaft .value direkt lesen und schreiben. In Vue-Templates ist der Zugriff über .value nicht erforderlich, da die Werte automatisch ausgepackt (unwrapped) werden:

<template>  
    <div>
        <label>Name: </label>
        <input v-model="name">
    </div>
</template>

Für Objekte existiert die Funktion reactive. Mit dem Wrapper erstellt das Framework einen tiefen Proxy (deep proxy/wrapper), wodurch das vollständige Objekt reaktiv ist:

const address = reactive({
  city: "Dortmund",
  postalCode: "12345"
});

Dieses Vorgehen funktioniert ebenso für Arrays und hat zahlreiche Vorteile, weil Änderungen an einem Array in einigen Fällen nicht mehr über spezielle set-Methode (Vue.set oder this.$set) von Vue.js vorgenommen werden müssen, damit das Reactivity System davon erfährt. Das war früher auch bei Objekten in einigen Situationen erforderlich.

Fragmente und native Portale

Bei den Vue.js-Templates hat sich ebenfalls einiges getan. Nennenswert sind die sogenannten Fragmente, die aus anderen Webframeworks wie React bekannt sind: In Vue.js 3 muss ein Template nicht mehr wie bisher genau ein root-Element besitzen:

<template>
  <div>Hallo</div>
  <div>Welt</div>
</template>

In Vue.js 2 lässt sich das Vorgehen über eine Bibliothek wie vue-fragment realisieren, was in Vue.js 3 nicht mehr notwendig ist.

Eine weitere Neuerung sind die nativen Portale, die bei Vue.js 3 Teleports heißen. Damit trägt das Framework der Empfehlung Rechnung, dass ein User Interface eine Orchestrierung unterschiedlicher Komponenten ist, und dabei kommt es häufig vor, dass eine Kindkomponente etwas im globalen Kontext rendern möchte. Logisch gesehen mag ein Teil vom Template wie ein modaler Dialog zur Komponente gehören, aus der technischen Perspektive gehört dieser Teil jedoch zum DOM außerhalb der Komponente. Zwar existieren Tricks wie ein angepasster z-Index für das Auslagern, die aber nicht sauber sind. Mit den Teleports lässt sich neuerdings ein Teil eines Template an einem anderen Ort rendern. Das folgende Snippet schickt den Inhalt des Teleports zum body-Tag:

<teleport to="body">
  <div>… </div>
</teleport>

Das Ziel des Attributs to kann nicht nur ein HTML-Tag, sondern unter anderem eine ID sein:

<teleport to="#modals">
  <div>…</div>
</teleport>
<div id="modals">
</div>

Ebenso lassen sich mehrere Teleports für ein Ziel nutzen. Das Ergebnis ist eine Kombination der HTML-Fragmente am Ziel, in dem die Inhalte aneinandergefügt sind. Das Attribut to muss ein valider Query Selector sein. Das erlaubt eine Vielzahl von Anwendungsfällen. Die API-Dokumentation verdeutlicht das Vorgehen weiter. Zum Umsetzen einer ähnlichen Funktionsweise existieren zahlreiche Bibliotheken wie portal-vue für Vue.js 2.

Zur Diskussion gestellt

Im aktuellen Release von Vue.js 3 befinden sich zudem Features, die nicht final, sondern zu Testzwecken im Release verblieben sind. Dass sich die teilweise undokumentierten Funktionen dennoch nutzen lassen, ist beabsichtigt: Dadurch entsteht ein Bild, wie die Community die Neuerungen annimmt und ob noch Änderungen bis zur Version 3.1 erforderlich sind, wenn die Funktionen final sein sollen.

Eine experimentelle Neuerung ist das Tag script setup: syntaktischer Zucker, um die Composition API in Single File Components (SFC) zu nutzen. Das Framework erstellt für Code, der die Composition API nutzt, immer eine setup-Funktion, die häufig allein steht und den gesamten Code enthält. Dadurch entsteht unnötiger Boilerplate-Code. Das RFC-Dokument zur Funktion script setup führt ein Beispiel als Anschauungsmodell dafür auf, wie das neue Tag die setup-Methode spart:

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
  import { ref } from 'vue'
  export const count = ref(0)
  export const inc = () => count.value++
</script>

Die angenehme Änderung könnte bei kleineren Komponenten häufig zum Einsatz kommen. Das RFC-Dokument beschreibt zudem die Edge Cases und Abwandlungen, die es bei der Implementierung ebenfalls zu berücksichtigen gilt.

Zudem gibt es in der aktuellen Vue.js-Version eine undokumentierte <Suspense>-Komponente. Sie wartet auf das initiale Rendern verschachtelter asynchroner Abhängigkeiten wie Komponenten mit einer asynchronen setup-Funktion. Davor zeigen sie ein Fallback-Template beispielsweise in Form einer Meldung wie "Die Daten werden geladen". Sind die asynchronen Funktionen bereit, rendert das System das default-Template. Auf die Weise können Entwickler Feedback in der UI anzuzeigen, wenn eine asynchrone Operation im Hintergrund läuft und noch nicht abgeschlossen ist:

<Suspense>
  <template #default>
    <div>…</div>
  </template>
  <template #fallback>
    <div>Die Daten werden geladen...</div>
  </template>
</Suspense>

Die Release-Informationen zu Vue.js 3 erklären weitere noch nicht endgültige Änderungen ausführlich. Planmäßig sollen alle in Vue.js 3.1 enthalten sein.

Blick aufs Ökosystem

Zeitgemäße Softwareentwicklung basiert auf einer Vielzahl von Einzelteilen in einem komplexen Ökosystem. Auch umfassende Web-Frameworks wie Vue.js, Angular oder React setzen auf eine Vielzahl zusätzlicher Bibliotheken und Tools. In der Webwelt spielen sie womöglich eine besonders große Rolle, da der typische Web-Stack immer komplexer wird. Bei umfassenden Änderungen einer Hauptversion muss das Ökosystem nachziehen, und bei Vue.js ist die Umstellung in vollem Gange. Zum Zeitpunkt der Veröffentlichung dieses Artikels bieten viele Tools und Librarys bereits Support für die neue Version, wenn auch noch nicht immer in der finalen Fassung.

Vue CLI arbeitet bereits seit der Mitte Juli veröffentlichten Version 4.5.0 mit Vue.js zusammen. Die Kennzeichnung als "Vue 3 Preview" dürfte sich in Kürze ändern, und wer das Plug-in vue-cli-plugin-vue-next installiert hatte, kann es jetzt gefahrlos ersetzen. Änderungen an der API des Kommandozeilentools gibt es nicht.

Bei der offiziellen Router-Komponente Vue Router besteht der Support für Vue.js 3 seit der Version 4.0. Mitte November ist der Release Candidate 3 erschienen. Die Breaking Changes in Vue Router, die sich durch die API-Änderungen von Vue.js 3 ergeben, beschreibt die Dokumentation umfassend. Wer auf die Composition API von Vue.js 3 setzt, kann neue Funktionen in Vue Router 4 nutzen können. Unter anderem bietet er Navigation Guards als Composition API-Funktionen an, die sich in einer Vue-Komponente verwenden lassen.

Die Bibliothek Vuex zum Umsetzen des State Management Pattern bringt nahezu keine gravierenden Änderungen mit. Unterstützung für Vue.js 3 ist seit Vuex 4.0 vorhanden. Die aktuelle Version steht seit Anfang November als Release Candidate zur Verfügung. Durch die Anpassungen beim Mounting von Vue.js 3 ändert sich der Installationsvorgang für das Plug-in. Daneben gibt es keine nennenswerten Änderungen, aber neue Funktionen, die ebenfalls auf die Composition API zurückgehen. Beispielsweise existiert jetzt die Composition API-Funktion useStore, um in einer Komponente auf den Store zuzugreifen.

Die überarbeitete Browser-Erweiterung Devtools für Chrome und Firefox ist aktuell in der Beta-Phase. Sie soll künftig mehrere Vue.js-Versionen unterstützen, lässt sich derzeit aber ausschließlich mit Vue.js 3 verwenden. Die Integration von Vuex und Vue Router ist noch in Arbeit. Als Entwicklungsumgebung empfiehlt sich die Kombination aus Visual Studio Code und der offiziellen Extension Vetur. Zahlreiche andere Bibliotheken wie vue-class-component, Nuxt.js, Vuetify oder Quasar sind aktuell in Beta-Phasen, um die Unterstützung für Vue.js 3 zu bieten. Einige Teams, darunter das von Vuetify, haben angekündigt, dass die nächste Hauptversion komplett auf die Composition API setzt.

Pfade der Migration

Die Migration auf eine neue Hauptversion eines Webframeworks bringt bei allen neuen Funktionen stets Herausforderung mit. Insbesondere bei laufenden Projekten kann eine Umstellung mitunter viel Arbeit verursachen, und das ist bei Vue.js 3 nicht anders. Die Dokumentation zum Webframework bietet einen Migrationsleitfaden, der alle relevanten Änderungen auflistet.

Anpassungen zu einigen Punkten auf der langen Liste der Änderungen lassen sich schnell umsetzen, während andere aufwendiger sind. Entwickler sollten den Aufwand für die Migration nicht unterschätzen. Generell sind viele Neuerungen von Vue.js 3 schon deshalb abwärtskompatibel, weil sie optional sind. Trotzdem gibt es einige verpflichtende Änderungen aufgrund grundlegend geänderter Vorgehensweisen.

Wer eine Migration anstrebt, kann die notwendigen Änderungen grob in drei Kategorien einteilen: erwähnenswerte neue Funktionen, Breaking Changes und alles rund um unterstützende Bibliotheken. Zur ersten Kategorie zählen die neuen Funktionen, die alle optional sind. Daher besteht kein zwingender Handlungsbedarf. Zu den schwerwiegenderen Breaking Changes gehören unter anderem die Änderungen an der globalen API, da sie nur die neue Art des Mounting lokaler Vue.js-Instanzen nutzen. Daneben existieren Änderungen an v-model, key, v-if, v-for, funktionalen und asynchronen Komponenten sowie der Render-Funktion.

Schließlich gibt es kleinere Änderungen, und einige APIs wurden entfernt. Nennenswert sind unter anderem die entfallenen Aufrufe von $on, $off, $once, Filtern, $children und $destroy. Dass $on, $off und $once wegfallen, könnte Auswirkungen auf einige Projekte haben, da einige Entwickler diese Funktionen zum Implementieren von Bus-Systemen im Stil von Event-Hubs genutzt haben. $emit ist dagegen weiterhin vorhanden, da die Funktion Event-Handler triggert. Der Migrationsleitfaden verweist zum Implementieren eines Bus-Systems auf Bibliotheken wie mitt oder tiny-emitter [22].

Teams sollten für langlebige Projekte einen Blick auf die Änderungen werfen, um die Weiterentwicklung in Richtung neuer und geänderter Funktionen lenken zu können. Wer nicht auf Vue.js 3 wechseln möchte, sollte berücksichtigen, dass Vue.js 2.7 die letzte Major-Version des 2er-Strangs ist. Obwohl sie Long-Term Support (LTS) für 18 Monate erhält und Ende 2020 erscheinen soll, läuft die Version 2 langfristig gesehen aus, und Version 2.7 wird nur noch kritische Bugfixes erhalten. Die Version soll als sogenannter Migration-Build einen langsamen, aber strategischen Wechseln von Version 2 auf 3 ermöglichen. Features der neuen Version, die in Version 2 funktionieren, portiert das Vue-Team zurück. Zusätzlich warnt das Release beim Verwenden auslaufender (deprecated) Funktionen. Auf die Weise können Entwickler wichtige Anpassungen vornehmen, bevor sie endgültig auf Version 3 umsteigen. Wer mit Internet Explorer 11 arbeitet, muss sich mit dem Umstieg gedulden, da noch kein kompatibler Build von Vue.js 3 dafür existiert. Eine kompakte Übersicht der Roadmap bietet die Projektübersicht zu Vue.js 3 auf GitHub.

Wer über einen Wechsel auf Version 3 nachdenkt, sollte zwingend einen Blick auf das Ökosystem werfen. Auch wenn die Community eifrig an den elementaren Bibliotheken arbeitet und erste kompatible Versionen veröffentlicht hat, sind die meisten noch nicht final freigegeben. Ein harter Wechsel auf Vue.js 3 ist daher noch nicht empfehlenswert.

Offener Weg zum stabilen Release

Vue.js 3 bringt viele Neuerungen mit. Im Zuge der Entwicklung hat das Core-Team nicht im stillen Kämmerlein gearbeitet, sondern viele Funktionen als RFC-Dokument zur Diskussion bereitgestellt und Zwischenversionen für erste Tests veröffentlicht. Nicht alle Änderungen sind sofort auf breite Unterstützung gestoßen, und einige der neuen Features wie die Composition API, werden bis heute diskutiert.

Der Kern von Vue 3 ist final und gilt als stabil. Dasselbe gilt für viele offizielle Bibliotheken und Tools. Entwickler können daher Projekte mit der neuen Major-Version starten. Wer viele externe Bibliotheken einsetzt, muss sich allerdings vorher informieren, ob und wie die Zusammenarbeit mit dem neuen Release funktioniert. Durch die aktuelle Release-Politik und den geplanten Migration Build der Version 2.7 bleibt insgesamt genug Zeit, sich auf die Änderungen einzustellen und zu überlegen, wie eine Migration für eine langfristige Umstellung vonstatten geht. Ein harter Umstieg auf die Version 3 ist weder notwendig noch vom Vue-Team forciert.

Sowohl Vue.js-Neulingen als auch Veteranen sei abschließend die Dokumentation "Vue.js: The Documentary" des YouTube-Kanals Honeypot ans Herz gelegt. Die dreißigminütige Dokumentation zeigt auf unterhaltsame Weise die Anfänge von Vue.js und erlaubt einen Blick hinter die Kulissen.

Die Version 3 ist für Vue.js ein großer Schritt nach vorne. Das anfangs kritische Feedback der Community hat sich weitgehend ins Positive gewandelt. Aus persönlicher Sicht des Autors ist die neue Composition API eine Bereicherung für die Implementierung komplexer Komponenten. Wie gut die Entwicklergemeinde die Neuerung annimmt, bleibt abzuwarten.

Fabian Deitelhoff

lebt und arbeitet in Dortmund. Nach seiner Promotion zu Source Code Comprehension arbeitet er als Innovation- und Transfer-Manager am Centrum für Entrepreneurship & Transfer an der TU Dortmund. Zugleich ist er als freier Autor, Softwareentwicklung und Trainer tätig. (rme)