© 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 z...

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