Vue 3: Code wiederverwendbar gestalten

Bei der Softwareentwicklung tritt oft die Notwendigkeit auf, Funktionen wiederzuverwenden. Ein Feature kommt an Stelle X zum Einsatz und später stellt sich heraus, dass es auch an Stelle Y benötigt wird. Es gibt viele Möglichkeiten, Code wiederverwendbar zu gestalten, etwa durch das Auslagern in eine eigene Klasse, Methode oder ein Framework. John Carmack, Mitgründer von id Software, sagte dazu einmal: "Sometimes, the elegant implementation is just a function. Not a method. Not a class. Not a framework. Just a function."
In modernen Web-Frameworks wie Angular, React und Vue.js wird oft auf die Implementierung durch Komponenten gesetzt, um Funktionalitäten bereitzustellen und Layouts zu gestalten. Diese Komponenten lassen sich durch Eigenschaften und Slots wiederverwendbar gestalten, aber oft ist es notwendig, einzelne Funktionalitäten unabhängig zu nutzen. Web-Frameworks wie React und Vue haben sich daher in Richtung modularer Funktionen weiterentwickelt, etwa durch React-Hooks oder Composables in Vue, die mit dem Composition API in Vue 3 eingeführt wurden. Der Fokus dieses Artikels liegt auf Vueuse, einer Bibliothek mit vielen Hilfsfunktionen, die über das Composition API einfach in Anwendungen eingebunden werden können. Vueuse verfügt über eine Vielzahl streng typisierter Funktionen mit zahlreichen Features, die über einfache Funktionsaufrufe verfügbar sind.