Composition API
Das Composition API in Vue.js ist ein modernes Paradigma zur Strukturierung und Organisation von Komponentenlogik. Es wurde eingeführt, um die Limitierungen der klassischen Options API zu überwinden und bietet Entwicklern eine modulare, wiederverwendbare Möglichkeit, reaktive Zustände, berechnete Eigenschaften und Nebenwirkungen zu verwalten. Besonders in großen Projekten ermöglicht das Composition API eine klare Trennung der Logik nach Funktionalität anstelle von Optionen, was die Lesbarkeit, Testbarkeit und Wartbarkeit erheblich verbessert.
Die Nutzung erfolgt primär innerhalb der setup()-Funktion, welche als Einstiegspunkt für die Definition des Zustands und der Methoden des Komponenten dient. Wichtige Konzepte umfassen ref und reactive zur Erstellung reaktiver Variablen und Objekte, computed für abgeleitete Zustände und watch zur Beobachtung von Datenänderungen. Durch die Kombination dieser Funktionen mit wiederverwendbaren Composables können Entwickler komplexe Logik modular extrahieren und zwischen Komponenten teilen.
In diesem Tutorial lernen Leser fortgeschrittene Vue.js-Prinzipien, einschließlich der Verwendung von Datenstrukturen, Algorithmen und OOP-Prinzipien innerhalb des Composition API. Anhand praktischer Beispiele wird gezeigt, wie man reaktive Zustände effizient verwaltet, Ereignisse behandelt und Komponenten auf skalierbare und performante Weise gestaltet, eingebettet in den Kontext von Softwareentwicklung und Systemarchitektur.
Grundlegendes Beispiel
textimport { createApp, ref, computed } from 'vue'
const App = {
setup() {
const counter = ref(0)
const increment = () => {
counter.value++
}
const doubleCounter = computed(() => counter.value * 2)
return {
counter,
increment,
doubleCounter
}
},
template: ` <div> <h1>Zähler: {{ counter }}</h1> <h2>Verdoppelter Zähler: {{ doubleCounter }}</h2> <button @click="increment">Erhöhen</button> </div>
`
}
createApp(App).mount('#app')In diesem grundlegenden Beispiel zeigt die setup()-Funktion das Herzstück des Composition API. Die Variable counter wird mit ref reaktiv erstellt, was automatische Updates im Template ermöglicht. Die Funktion increment demonstriert Ereignisbehandlung, während doubleCounter als computed-Eigenschaft den aktuellen Wert verdoppelt. Das Zurückgeben von counter, increment und doubleCounter aus setup() erlaubt ihre Nutzung im Template und illustriert, wie Logik modularisiert und wiederverwendet werden kann.
Für Anfänger ist entscheidend, das .value bei ref zu verstehen und die Bedeutung des Returns in setup() zu erkennen. Dieses Muster unterstützt sauberen, testbaren Code, der leicht in wiederverwendbare Composables ausgelagert werden kann.
Praktisches Beispiel
textimport { createApp, reactive, watch } from 'vue'
const App = {
setup() {
const state = reactive({
tasks: [],
newTask: ''
})
const addTask = () => {
if (state.newTask.trim() !== '') {
state.tasks.push({ text: state.newTask, done: false })
state.newTask = ''
}
}
watch(() => state.tasks.length, (newLength, oldLength) => {
console.log(`Anzahl der Aufgaben geändert von ${oldLength} auf ${newLength}`)
})
const removeTask = (index) => {
state.tasks.splice(index, 1)
}
return {
state,
addTask,
removeTask
}
},
template: ` <div> <h1>Aufgabenliste</h1> <input v-model="state.newTask" placeholder="Neue Aufgabe" /> <button @click="addTask">Hinzufügen</button> <ul> <li v-for="(task, index) in state.tasks" :key="index">
{{ task.text }} <button @click="removeTask(index)">Entfernen</button> </li> </ul> </div>
`
}
createApp(App).mount('#app')Dieses praktische Beispiel demonstriert die Anwendung des Composition API zur Verwaltung einer dynamischen Aufgabenliste. reactive wird verwendet, um ein Objekt state mit mehreren reaktiven Eigenschaften zu erstellen. Die Funktionen addTask und removeTask implementieren algorithmische Logik, einschließlich Validierung und Array-Manipulation. watch beobachtet die Länge des Aufgabenarrays und ermöglicht die Reaktion auf Änderungen.
Die Kapselung von Zustand und Operationen entspricht OOP-Prinzipien, während die modulare Struktur die Extraktion in wiederverwendbare Composables erleichtert. Best Practices beinhalten die korrekte Nutzung reaktiver Objekte, das Vermeiden direkter DOM-Manipulation und das Aufräumen von watch-Funktionen, um Speicherlecks zu verhindern und eine stabile, performante Anwendung zu gewährleisten.
Bei der Arbeit mit dem Composition API sollten Entwickler bewährte Vorgehensweisen beachten. ref ist für einfache Werte und reactive für Objekte oder Arrays zu verwenden. Computed- oder watch-Funktionen sollten nicht innerhalb von Rendering-Schleifen erzeugt werden, um Speicherlecks zu vermeiden. Fehlerbehandlung ist essentiell, insbesondere bei API-Aufrufen oder Benutzereingaben, mit try/catch.
Effekte in watch müssen korrekt aufgeräumt werden. Für Debugging-Zwecke eignen sich Vue Devtools, um reaktive Änderungen zu verfolgen. Performance-Optimierungen beinhalten das Vermeiden schwerer Berechnungen in computed und die Nutzung von Lazy-Evaluation. Sicherheitsaspekte umfassen die Validierung von Eingaben, XSS-Prävention und Schutz kritischer Zustände.
📊 Referenztabelle
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| ref | Erstellt eine einfache reaktive Variable | const count = ref(0) |
| reactive | Erstellt ein reaktives Objekt mit mehreren Eigenschaften | const state = reactive({ name: '', age: 0 }) |
| computed | Erstellt eine abgeleitete reaktive Eigenschaft | const double = computed(() => count.value * 2) |
| watch | Beobachtet Änderungen reaktiver Daten und führt Effekte aus | watch(() => state.tasks.length, (newVal) => console.log(newVal)) |
| setup | Einstiegspunkt für Zustand und Logik im Komponenten | setup() { const data = ref(0); return { data } } |
Das Composition API ermöglicht es, reaktive Zustände, computed-Eigenschaften und watch-Funktionen effizient zu verwalten und Logik modulär zu strukturieren. Entwickler können Komponenten wiederverwendbarer und lesbarer gestalten, komplexe Algorithmen implementieren und OOP-Prinzipien anwenden.
Nächste Schritte beinhalten die Nutzung von Composables für wiederverwendbare Logik, Integration von State-Management-Lösungen wie Pinia und die Erkundung fortgeschrittener Patterns wie async setup und suspense. Praktische Übungen in realen Projekten stärken das Verständnis und garantieren stabile, performante Anwendungen. Offizielle Dokumentation, Tutorials und Open-Source-Projekte sind empfohlene Ressourcen für vertieftes Lernen.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt