Composables: wiederverwendbare Composition-Funktionen
Extrahieren Sie reaktive Logik in mit use beginnende Composable-Funktionen, teilen Sie sie zwischen Komponenten und verstehen Sie, wie sie sich von Mixins unterscheiden.
Composables: wiederverwendbare Composition-Funktionen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Composables?
Ein Composable ist eine Funktion, die Hooks der Composition API verwendet, um zustandsbehaftete Logik zu kapseln und wiederzuverwenden. Composables sind das Gegenstück der Composition API zu Mixins — jedoch ohne Namensraumkonflikte oder versteckte Abhängigkeiten.
Ein einfaches Composable
Extrahieren Sie reaktive Logik in eine Funktion, deren Name mit use beginnt. Sie kann ref, computed, watch und Lebenszyklus-Hooks verwenden — genau wie setup().
// useCounter.ts
import { ref } from 'vue';
export function useCounter(initial = 0) {
const count = ref(initial);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => (count.value = initial);
return { count, increment, decrement, reset };
}
// Usage in any component:
const { count, increment } = useCounter(10);Composable mit Lebenszyklus-Hooks
Composables können Lebenszyklus-Hooks registrieren. Die Hooks werden relativ zu der Komponente ausgelöst, die das Composable aufruft.
// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useOnlineStatus() {
const isOnline = ref(navigator.onLine);
const update = () => (isOnline.value = navigator.onLine);
onMounted(() => {
window.addEventListener('online', update);
window.addEventListener('offline', update);
});
onUnmounted(() => {
window.removeEventListener('online', update);
window.removeEventListener('offline', update);
});
return { isOnline };
}Composable mit Async (useFetch)
Composables eignen sich hervorragend für das asynchrone Abrufen von Daten — kapseln Sie das Muster aus Ladezustand, Fehler und Daten.
// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
const data = ref<T | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
watchEffect(async (onCleanup) => {
const controller = new AbortController();
onCleanup(() => controller.abort());
loading.value = true;
error.value = null;
try {
const res = await fetch(unref(url), { signal: controller.signal });
data.value = await res.json();
} catch (e: any) {
if (e.name !== 'AbortError') error.value = e.message;
} finally { loading.value = false; }
});
return { data, loading, error };
}Refs als Parameter akzeptieren
Composables können mithilfe von MaybeRef<T> (= T | Ref<T>) und unref() als Argumente sowohl einfache Werte als auch Refs akzeptieren und auf den Wert zugreifen.
import type { MaybeRef } from 'vue';
import { unref } from 'vue';
function useDouble(num: MaybeRef<number>) {
return computed(() => unref(num) * 2);
}Composables vs Mixins
Mixins fügen der Komponente Eigenschaften hinzu, ohne deren Herkunft eindeutig zu machen. Composables sind explizit — anhand ihres Rückgabewerts sehen Sie genau, was ein Composable bereitstellt. Mehrere Composables können ohne Namenskonflikte verwendet werden.
State zwischen Komponenten teilen
Wenn ein Composable ref() in sich selbst aufruft, erhält jede Komponente, die das Composable aufruft, ihren eigenen State. Um den State komponentenübergreifend zu teilen, rufen Sie ref() auf Modulebene auf (außerhalb der Composable-Funktion).
// Shared state (module-level):
const sharedCount = ref(0);
export function useSharedCounter() {
// All callers share the same sharedCount
return { count: sharedCount, increment: () => sharedCount.value++ };
}Composable-Bibliotheken
VueUse (vueuse.org) stellt mehr als 200 sofort verwendbare Composables bereit: useLocalStorage, useFetch, useDark, useIntersectionObserver und viele weitere. Prüfen Sie immer zuerst VueUse, bevor Sie etwas von Grund auf neu schreiben.
Composables testen
Testen Sie Composables, indem Sie sie innerhalb einer kleinen Testkomponente aufrufen oder das mountedApp-Muster von @vue/test-utils verwenden. Vitest lässt sich gut in das Reaktivitätssystem von Vue integrieren.
Namenskonventionen für Composables
Beginnen Sie Namen immer mit use (useAuth, useFetch, useMediaQuery). Beschränken Sie sie auf einen einzigen Verantwortungsbereich. Vermeiden Sie Composables, die zu viele voneinander unabhängige Aufgaben übernehmen.
Organisation von Composables
Erstellen Sie einen Ordner composables/. Verwenden Sie eine Datei pro Composable. Eine Indexdatei exportiert alle Composables erneut. Dies entspricht der Organisation von Custom Hooks in React-Projekten.
Schnelltest
Was ist der entscheidende Vorteil von Composables gegenüber Vue-Mixins?
Zusammenfassung: Vue-Composables
Ein Composable ist eine Funktion mit dem Präfix use, die Hooks der Composition API aufruft. Jeder Aufrufer erhält unabhängigen State, sofern Sie keine Refs auf Modulebene verwenden. Akzeptieren Sie Refs oder Werte mit MaybeRef + unref. Registrieren Sie Lebenszyklus-Hooks innerhalb von Composables. Prüfen Sie VueUse, bevor Sie ein eigenes Composable schreiben. Explizite Rückgabewerte verhindern die Verschmutzung von Namensräumen nach dem Muster von Mixins.
Häufig gestellte Fragen
Ist die Lektion „Composables: wiederverwendbare Composition-Funktionen“ kostenlos?
Ja — der vollständige Text von „Composables: wiederverwendbare Composition-Funktionen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Composables: wiederverwendbare Composition-Funktionen“?
Extrahieren Sie reaktive Logik in mit use beginnende Composable-Funktionen, teilen Sie sie zwischen Komponenten und verstehen Sie, wie sie sich von Mixins unterscheiden. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Composables: wiederverwendbare Composition-Funktionen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- ref() und reactive()
- computed() und watch()
- Die Funktion setup() und script setup
- Composables: wiederverwendbare Composition-Funktionen