Was sind Composables und wie schreibt man eine?

Question

Was sind Composables und wie schreibt man eine?

Accepted Answer

Ein **Composable** ist eine wiederverwendbare Funktion, die **zustandsbehaftete Logik** mit der Composition API kapselt. Nach Konvention heißt sie `useXxx` und gibt reaktiven State plus Funktionen zurück — so kannst du Logik über Komponenten hinweg teilen, ohne Mixins oder Wiederholungen. ## Schreiben eines Composable ```js // composables/useCounter.js import { ref, computed } from "vue"; export function useCounter(initial = 0) { const count = ref(initial); // encapsulated reactive state const double = computed(() => count.value * 2); function increment() { count.value++; } function reset() { count.value = initial; } return { count, double, increment, reset }; // expose the API } ``` ## Verwendung in jeder Komponente ```vue ``` Jede Komponente, die `useCounter()` aufruft, erhält ihren **eigenen isolierten** `count` — Composables erstellen bei jedem Aufruf einen frischen State, anders als eine gemeinsam genutzte Variable auf Modulebene. ## Ein realistisches Beispiel: useFetch mit Lifecycle ```js import { ref, onUnmounted } from "vue"; export function useMousePosition() { const x = ref(0), y = ref(0); const update = (e) => { x.value = e.pageX; y.value = e.pageY; }; window.addEventListener("mousemove", update); // set up onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup! return { x, y }; } ``` Composables können Lifecycle Hooks, Watchers und andere Composables verwenden — und entscheidend: Sie **kapseln ihre eigene Cleanup** (`onUnmounted`), sodass Verbraucher sich nicht daran erinnern müssen. ## Composables vs. Mixins (die alte Methode) ```text Mixins (Vue 2): merged into the component — unclear where properties came from, naming collisions between mixins, implicit dependencies Composables: explicit imports + return values — clear sources, no collisions, can be composed, fully typed in TypeScript ``` ## Warum es wichtig ist Composables sind die *idiomatische* Methode, um zustandsbehaftete Logik in Vue 3 zu extrahieren und wiederzuverwenden — Datenabruf, Formularverarbeitung, Maus-/Scroll-Verfolgung, Debouncing usw. Sie lösen das Logic-Wiederverwendungs-Problem sauber (explizit, kollisionsfrei, zusammensetzbar, TypeScript-freundlich), wo Vue 2's Mixins versagt haben. Sie sind der Hauptgrund, warum Teams die Composition API übernehmen: Gemeinsame Logik wird zu einer einfachen, testbaren Funktion statt zu verstreut oder dupliziert Kode.