© Abscent/Shutterstock.com
Eine Einführung in das Vue 3 Composition API

Ausmisten, aber nachhaltig!


Vue 3 steht in den Startlöchern. Mit dem neuen Composition API kommt eine zusätzliche Möglichkeit, um Komponenten aufzubauen. Doch warum ist das überhaupt notwendig? Welche Vorteile ergeben sich aus der Verwendung des API und wie benutzt man es?

Es war gar nicht so einfach, einen passenden Titel für diesen Artikel zu finden. In diesem Beitrag geht es um das Composition API, das mit Vue 3 kommen wird. Schaut man im Wörterbuch nach dem Begriff „composition“, finden sich eine ganze Reihe deutscher Wörter, die passen würden: Zusammensetzung, Gemisch, Struktur, Anordnung, Verbindung, Arrangement. Ja, richtig. Beim Composition API geht es um den Aufbau von Komponenten. Es geht um die Art und Weise, wie Dinge zusammengesetzt werden können, damit am Ende eine lauffähige Komponente entsteht. Die soll innerhalb einer Vue-Anwendung natürlich mit allen anderen Komponenten (auch mit denen, die nicht mit dem Composition API gebaut wurden) kompatibel sein.

Hierbei ist es zunächst wichtig, zu verstehen, dass das Composition API optional ist. Wer es nicht verwenden will, lässt es einfach sein. Das bekannte und etablierte Verfahren zum Aufbau von Komponenten wie in Listing 1 dargestellt bleibt auch in Vue 3 weiterhin bestehen. Man muss sich keine Sorgen machen, dass mit dem Wechsel auf die neue Version große Umstrukturierungen oder Anpassungen im eigenen Quellcode notwendig werden. Mehr noch, das Composition API kann heute schon verwendet werden. Hierzu wird ein Plug-in bereitgestellt, das man relativ schnell mit npm install @vue/composition-api ins eigene Projekt bringen kann. Wenn das Composition API dann heruntergeladen und im Projekt vorhanden ist, darf man auf keinen Fall vergessen, es zu aktivieren. Das kann durch Vue.use(VueCompositionApi) erfolgen, zum Beispiel in der main.js, wenn das Projekt mit dem Vue CLI erzeugt wurde.

Warum das neue Composition API?

Nochmal zurück zu Listing 1. Es zeigt, wie eine Vue-Komponente klassisch aufgebaut wird (hier in Form einer Single File Component). Letztendlich wird im Bereich <script> ein JavaScript-Objekt erzeugt. Dieses besteht aus einer Reihe von vordefinierten Properties bzw. Optionen, mit denen Daten, Verhalten und auch das Aussehen der Komponente bestimmt werden. In Vue gibt es viele Stellen, um Optionen festzulegen oder Logik unterzubringen: props, data, computed, methods, components. Zusätzlich bestehen noch eine ganze Reihe sogenannter Lifecycle-Methoden, die hinzugenommen werden können, um in bestimmten Situationen zu reagieren und einzugreifen. Wenn man Wert darauf legt, eine Aktion durchzuführen, nachdem eine Komponente erzeugt wurde, wenn man in den Renderprozess eingreifen will oder einfach bei Veränderung der Daten in der Komponente informiert werden will, kommen Lifecycle-Methoden und Watcher ins Spiel.

Ein klarer Nachteil des klassischen Verfahrens ist es, dass man in ein Korsett gepresst wird. Man muss dieses Vue-Komponentenobjekt erzeugen und hat sich an seine Konventionen zu halten. Wenn beispielsweise aus dem UI heraus auf Geschäftslogik zugegriffen werden soll, muss die zugehörige Logik in den Kategorien methods oder computed untergebracht sein.

In ein enges Schema gezwungen zu werden, dürfte generell den wenigsten Entwicklern gefallen. Der Verlust von Implementierungsfreiheit schmerzt einfach. Doch das ist nicht das größte Problem. Viel stärker wiegt beim klassischen Ansatz (wie Listing 1 auch zeigt), dass der Quelltext sehr schnell unübersichtlich wird.

Unübersichtlich bedeutet schwieriger zu lesen und damit auch schlechter zu warten. Die Gefahr, dass die Komponente unübersichtlich werden kann, liegt vor allem darin, dass die Einstellungen und auch die Geschäftslogik nach dem Aufbau und der Struktur der Komponente (vorgegeben durch Vue) organisiert sind. Besser wäre es, wenn man die Komponente nach den eigenen Anforderungen beziehungsweise Features strukturieren könnte, zum Beispiel indem man die Komponente aus einer Reihe von Funktionen aufbaut. Das würde auch dem Wiederverwendbarkeitsgedanken entsprechen, denn solche Funktionen ließen sich in Modulen zusammenfassen und außerhalb der Komponente führen. Das Composition API bietet all diese Möglichkeiten. Im weiteren Verlauf des Artikels soll betrachtet werden, wie man die Komponente aus Listing 1 mit dem neuen API umsetzen würde.

Listing 1: Klassischer, eher unübersichtlicher Aufbau einer Vue-Komponente

<template> <div> <v-select class="country-search" v-model="selected" :options="options" @input="onSelection" @search="onSearch" /> </div> </template> <script> import vSelect from "vue-select"; import "vue-select/dist/vue-select.css"; export default { name: "CountrySearch", components: { vSelect }, data() { return { options: [], selected: "" } }, methods: { onSelection(value) { fetch("https://restcountries.eu/rest/v2/name/" + value) .then(res => { res.json().then(json => { this.$parent.$emit('countryChanged', json.map(e => e.alpha2Code) [0].toLowerCase()); }) }) }, onSearch(search) { fetch("https://restcountries.eu/rest/v2/name/" + search).then(res => { res.json().then(json => (this.options = json.m...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang