Options API: data, methods, computed
Definieren Sie reaktive Daten, schreiben Sie aus dem Template aufgerufene Methoden und verwenden Sie computed-Eigenschaften für abgeleitete Werte, die automatisch aktualisiert werden.
Options API: data, methods, computed ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 ist die Options API?
Die Options API organisiert die Logik einer Komponente nach Optionstyp: data (reaktiver Zustand), methods (Funktionen), computed (abgeleiteter Zustand), watch (Seiteneffekte) und Lifecycle-Hooks. Jede Option wird in einer benannten Objekteigenschaft definiert.
Die Option data
Liefert ein Objekt mit reaktiven Eigenschaften. Alle in data() deklarierten Eigenschaften sind reaktiv – Vue beobachtet sie und rendert das Template neu, wenn sie sich ändern.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}Die Option methods
Funktionen, die aus dem Template oder aus anderen Methoden aufgerufen werden können. Innerhalb von Methoden verweist this auf die Komponenteninstanz und ermöglicht den Zugriff auf data- und computed-Eigenschaften.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}Die Option computed
Computed-Eigenschaften leiten Werte aus reaktiven Daten ab. Sie werden zwischengespeichert und nur neu berechnet, wenn sich ihre Abhängigkeiten ändern. Verwenden Sie sie anstelle von Methoden für abgeleitete Werte, um unnötige Neuberechnungen zu vermeiden.
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}Schreibbare Computed-Eigenschaften
Ein computed kann mit get und set schreibbar gemacht werden – das ist nützlich für bidirektionale Bindings mit v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}Die Option watch
Watcher führen Seiteneffekte aus, wenn sich eine reaktive Eigenschaft ändert. Verwenden Sie sie für asynchrone Vorgänge, die durch Datenänderungen ausgelöst werden, etwa zum Abrufen von Daten, wenn sich ein Suchbegriff ändert.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Lifecycle-Hooks in der Options API
Deklarieren Sie Lifecycle-Hooks als Methoden: created, mounted, updated und unmounted. created wird ausgeführt, bevor das DOM bereit ist. mounted wird ausgeführt, nachdem die Komponente in das DOM eingefügt wurde.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Zugriff auf das Template: $refs
Fügen Sie einem Template-Element ein ref-Attribut hinzu und greifen Sie in Methoden über this.$refs.name auf das DOM-Element oder die untergeordnete Komponenteninstanz zu. Verfügbar nach dem Mounten.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins im Vergleich zur Composition API
Die Options API bietet Mixins, um Logik zwischen Komponenten gemeinsam zu verwenden. In der Composition API werden Mixins weitgehend durch Composables ersetzt – sie sind schwieriger nachzuvollziehen und können zu Namensraumkollisionen führen. Bevorzugen Sie für neuen Code die Composition API.
Options API im Vergleich zur Composition API
Die Options API eignet sich hervorragend für kleine bis mittelgroße Komponenten und ist für Einsteiger leichter zu erlernen. Die Composition API (setup() /