Warum die Composition API?
Einschränkungen der Options API, Problem der Wiederverwendung von Logik, Vorteile der Composition API.
Warum die Composition API? 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.
Die zwei Arten, Vue zu schreiben
Vue 3 bietet Ihnen zwei Stile zum Erstellen von Komponentenlogik: die Options API und die Composition API. Beide führen zum gleichen Ergebnis, organisieren den Code jedoch sehr unterschiedlich.
Wenn Sie die jeweiligen Vor- und Nachteile verstehen, können Sie das passende Werkzeug auswählen und vorhandene Codebasen sicher nachvollziehen.
Wie die Options API Code organisiert
Die Options API teilt eine Komponente in feste Bereiche auf: data, computed, methods, watch und Lifecycle-Hooks. Jeder Teil eines Features befindet sich in einem anderen Bereich.
Für ein einziges kleines Feature müssen Sie möglicherweise vier separate Blöcke der Datei bearbeiten.
export default {
data() {
return { count: 0 }
},
computed: {
doubled() { return this.count * 2 }
},
methods: {
increment() { this.count++ }
}
}Das Problem: Anliegen werden verstreut
Wenn eine Komponente wächst, ist die Logik für ein einzelnes Anliegen, etwa ein Suchfeld, über data, methods, computed und watch verteilt. Sie müssen ständig nach oben und unten scrollen, um einem Feature zu folgen.
Das nennt man das Fragmentierungsproblem.
Composition API: Nach Feature gruppieren
Mit der Composition API können Sie den gesamten Code für ein logisches Anliegen zusammen platzieren. Reaktiver Zustand, abgeleitete Werte und die Funktionen, die ihn verändern, stehen direkt nebeneinander.
Sie lesen den Code von oben nach unten und sehen ein vollständiges Feature an einer Stelle.
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() { count.value++ }
return { count, doubled, increment }
}
}Gegenüberstellung
Beachten Sie, wie das zweite Beispiel count, das abgeleitete doubled und increment zusammenhält. In der Options API befanden sich dieselben drei Elemente in drei separaten Bereichen.
- Options API: organisiert nach Optionstyp
- Composition API: organisiert nach logischem Anliegen
Logik wiederverwenden: Mixins (der alte Weg)
Vor der Composition API waren Mixins das wichtigste Werkzeug zur Wiederverwendung. Ein Mixin führt seine Optionen mit denen einer Komponente zusammen.
Mixins haben jedoch echte Probleme: Namenskonflikte, eine unklare Herkunft von Eigenschaften und implizite Abhängigkeiten zwischen Mixins.
const counterMixin = {
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
export default {
mixins: [counterMixin]
// Where did count come from? Not obvious.
}Logik wiederverwenden: Composables (der neue Weg)
Ein Composable ist einfach eine Funktion, die Reaktivitäts-APIs verwendet und reaktiven Zustand zurückgibt. Sie rufen es wie jede andere Funktion auf, sodass die Herkunft jedes Werts explizit ist.
Keine magische Zusammenführung, keine versteckten Namenskonflikte.
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Ein Composable verwenden
Durch das Importieren und Aufrufen des Composables ist sofort erkennbar, dass count und increment aus useCounter stammen. Sie können sie beim Destrukturieren sogar umbenennen, um Konflikte zu vermeiden.
import { useCounter } from './useCounter'
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Warum Composables besser sind als Mixins
- Explizite Quellen — jeder Wert stammt aus einem sichtbaren Funktionsaufruf.
- Keine Namenskonflikte — Sie können frei destrukturieren und umbenennen.
- Komponierbar — ein Composable kann ein anderes aufrufen.
- Typsicher — TypeScript leitet die zurückgegebenen Typen automatisch ab.
Besseres TypeScript und bessere Tools
Da die Composition API aus einfachen Funktionen und Variablen besteht, kann TypeScript Typen ohne spezielle Tools ableiten. Es gibt kein this mit einem von Hand geschriebenen Typ, den Sie pflegen müssen, und Editoren bieten eine präzise Autovervollständigung.
Wann welche API verwendet werden sollte
Die Composition API spielt ihre Stärken bei mittelgroßen und großen Komponenten sowie bei jeder Logik aus, die Sie wiederverwenden möchten. Die Options API ist weiterhin völlig gültig und kann bei sehr kleinen Komponenten übersichtlich sein.
Neuer Vue-3-Code bevorzugt im Allgemeinen die Composition API, insbesondere mit <script setup>, das Sie bald kennenlernen werden.
Wissenscheck
Testen Sie, was Sie darüber gelernt haben, warum die Composition API existiert.
Zusammenfassung
In dieser Lektion haben Sie gelernt:
- Die Options API organisiert Code nach Optionstyp, wodurch ein Feature über mehrere Bereiche verteilt wird.
- Die Composition API gruppiert Code nach logischem Anliegen.
- Mixins verwenden Logik wieder, führen aber zu Namenskonflikten und versteckten Quellen.
- Composables sind einfache Funktionen, die reaktiven Zustand zurückgeben — explizit, konfliktfrei und komponierbar.
Häufig gestellte Fragen
Ist die Lektion „Warum die Composition API?“ kostenlos?
Ja — der vollständige Text von „Warum die Composition API?“ 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 „Warum die Composition API?“?
Einschränkungen der Options API, Problem der Wiederverwendung von Logik, Vorteile der Composition API. 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 „Warum die Composition API?“?
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
- Warum die Composition API?
- setup()-Funktion und reaktive Variablen
- ref vs. reactive: Wann Sie welches verwenden
- Computed und Watch in der Composition API