Registrierungspflichtiger Artikel

Das Javascript-Framework Vue.js, Teil 8 Arbeiten mit der Composition-API von Vue

Von Dr. Dirk Koller

Seit Version 3 des Vue.js-Frameworks steht Entwicklern und Entwicklerinnen die Composition API zur Realisierung ihrer Anwendungen zur Verfügung. Vor allem bei größeren Komponenten soll die neue Programmierschnittstelle ür mehr Ordnung sorgen.

Anbieter zum Thema

Die Composition API von Vue.js kann dabei helfen, den Code besser zu strukturieren.
Die Composition API von Vue.js kann dabei helfen, den Code besser zu strukturieren.
(Bild: geralt / Pixabay )

Bei der bis Vue.js 2.x enthaltenen Options-API wurden Daten, Methoden und Computed Properties in einem Options-Objekt übergeben. Die technisch bedingte Aufteilung (eben in Data, Methods und Computed) führte dabei dazu, dass logisch zusammengehörende Teile wie Methoden und Daten eines Features auseinandergerissen und mit Methoden und Daten anderer Features vermischt wurden. Der Code der resultierenden Komponenten war dadurch schwer verständlich und nicht wiederverwendbar.

Mit der Composition-API sollte sich das ändern. Herzstück der Programmierschnittstelle ist die Methode setup. Diese fasst Variablen, Methoden, Computed Properties, Lifecycle-Methoden und Watchers zusammen. Die Methode wird dann der Komponenten-Konfiguration zugefügt: