0Pricing
Vue Academy · Lektion

Was ein gutes Composable ausmacht

Namenskonvention (useName), reaktiven State kapseln, Refs statt roher Werte zurückgeben.

Was ein gutes Composable ausmacht ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Composable

Ein Composable ist eine Funktion, die die Vue Composition API verwendet, um zustandsbehaftete Logik zu kapseln und wiederzuverwenden. Es ist die Antwort von Vue 3 auf Mixins – sauberer, explizit und typsicher.

Die use-Präfix-Konvention

Komposables werden konventionsgemäß mit dem Präfix use benannt: useCounter, useFetch, useMouse. Dadurch ist sofort erkennbar, dass die Funktion reaktive Logik enthält.

function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }

Refs statt unveränderlicher Werte zurückgeben

Geben Sie Refs (oder reaktiven Zustand) zurück, damit die Reaktivität beim Destrukturieren erhalten bleibt. Wenn Sie count.value zurückgeben, erhalten Sie nur einen Snapshot, der nie aktualisiert wird.

function useCounter() {
  const count = ref(0);
  return { count }; // return the ref itself
}

Sicheres Destrukturieren

Da Sie Refs zurückgeben, können Sie sie ohne Reaktivitätsverlust frei destrukturieren. Jede Ref behält ihre eigene reaktive Verbindung.

const { count } = useCounter();
// count stays reactive after destructuring

Einzelne Verantwortung

Ein gutes Komposable erledigt eine Aufgabe. useFetch ruft Daten ab, useLocalStorage speichert sie. Kleine, fokussierte Komposables lassen sich problemlos zu größeren Funktionen zusammensetzen.

Komposables zusammensetzen

Komposables können andere Komposables aufrufen und so geschichtete Logik aufbauen. Ein useUserProfile könnte intern useFetch verwenden.

function useUserProfile(id) {
  const { data } = useFetch("/users/" + id);
  return { user: data };
}

Nebeneffekte bereinigen

Wenn ein Komposable Listener, Timer oder Subscriptions hinzufügt, muss es diese in onUnmounted entfernen, um Speicherlecks zu vermeiden.

import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));

Reaktive Argumente akzeptieren

Komposables können Refs oder Getter als Eingaben akzeptieren und mit watch oder watchEffect auf sie reagieren. Dadurch bleiben sie flexibel.

function useDouble(source) {
  return computed(() => unref(source) * 2);
}

Namenskonflikte vermeiden

Wenn ein Komposable viele Werte zurückgibt, sollten Sie klare Namen verwenden. Wenn zwei Komposables data zurückgeben, benennen Sie den Wert beim Destrukturieren um, um Konflikte zu vermeiden.

const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");

Framework-konform bleiben

Rufen Sie Komposables synchron auf der obersten Ebene von setup (oder eines anderen Komposables) auf, nicht innerhalb von Bedingungen oder asynchronen Callbacks. So werden Lifecycle-Hooks korrekt registriert.

// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await

Dokumentation und Rückgabeform

Geben Sie ein vorhersehbares Objekt zurück, damit Nutzende wissen, was sie erhalten. Eine einheitliche Form (Zustand plus Methoden) macht Komposables leicht verständlich und verwendbar.

return { count, increment, decrement, reset };

Kurze Überprüfung

Warum sollte ein Komposable Refs statt unveränderlicher Werte zurückgeben?

Zusammenfassung

Sie haben die Merkmale eines guten Komposables kennengelernt: das Präfix use, die Rückgabe von Refs für sicheres Destrukturieren, eine einzelne Verantwortung, die Bereinigung von Nebeneffekten in onUnmounted und das Vermeiden von Namenskonflikten im zurückgegebenen Objekt.

Häufig gestellte Fragen

Ist die Lektion „Was ein gutes Composable ausmacht“ kostenlos?

Ja — der vollständige Text von „Was ein gutes Composable ausmacht“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Was ein gutes Composable ausmacht“?

Namenskonvention (useName), reaktiven State kapseln, Refs statt roher Werte zurückgeben. Du übst Vue 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 Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue 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 1 von 4.

Wie lange dauert die Lektion „Was ein gutes Composable ausmacht“?

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 Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue 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

  1. Was ein gutes Composable ausmacht
  2. useCounter: Ein einfaches Composable
  3. useFetch: Asynchrones Composable für Daten
  4. VueUse: Die Composable-Bibliothek
← Zurück zu Vue Academy