Options API: data, methods, computed
Proszę definiować reaktywne dane, pisać metody wywoływane z szablonu oraz używać właściwości computed dla wartości pochodnych, które aktualizują się automatycznie.
Options API: data, methods, computed to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest Options API?
Options API porządkuje logikę komponentu według typów opcji: data (stan reaktywny), methods (funkcje), computed (stan pochodny), watch (efekty uboczne) i hooki cyklu życia. Każdy element umieszcza się we właściwości obiektu o odpowiedniej nazwie.
Opcja data
Zwraca obiekt właściwości reaktywnych. Wszystkie właściwości zadeklarowane w data() są reaktywne — Vue je obserwuje i ponownie renderuje szablon, gdy się zmienią.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}Opcja methods
Funkcje, które można wywoływać z szablonu lub z innych metod. W metodach this odnosi się do instancji komponentu i zapewnia dostęp do właściwości data oraz computed.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}Opcja computed
Właściwości computed wyprowadzają wartości z danych reaktywnych. Są buforowane — są przeliczane ponownie tylko wtedy, gdy zmienią się ich zależności. Proszę używać ich zamiast metod w przypadku wartości pochodnych, aby uniknąć niepotrzebnych przeliczeń.
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
}
}Właściwości computed z możliwością zapisu
Właściwość computed może mieć get i set, aby można było ją modyfikować — jest to przydatne przy dwukierunkowym wiązaniu za pomocą v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}Opcja watch
Obserwatory wykonują efekty uboczne, gdy zmienia się właściwość reaktywna. Proszę używać ich do operacji asynchronicznych wywoływanych zmianami danych, takich jak pobieranie danych po zmianie wyszukiwanej frazy.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Hooki cyklu życia w Options API
Proszę deklarować hooki cyklu życia jako metody: created, mounted, updated, unmounted. created jest wykonywany przed przygotowaniem DOM-u. mounted jest wykonywany po umieszczeniu komponentu w DOM-ie.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Dostęp do szablonu: $refs
Proszę dodać atrybut ref do elementu szablonu, aby uzyskać dostęp do elementu DOM lub komponentu potomnego za pomocą this.$refs.name w metodach. Jest on dostępny po zamontowaniu komponentu.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixiny a Composition API
Options API oferuje mixiny do współdzielenia logiki między komponentami. W Composition API mixiny są w dużej mierze zastępowane przez composable — utrudniają analizowanie kodu i mogą powodować konflikty nazw. W nowym kodzie proszę preferować Composition API.
Options API a Composition API
Options API sprawdza się doskonale w małych i średnich komponentach oraz jest łatwiejsze do opanowania przez początkujących. Composition API (setup() /