Seite 2: 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.