Najważniejsze informacje
- Frameworki JavaScript, takie jak Vue, udostępniają architekturę opartą na komponentach, mechanizmy zarządzania stanem i routing, co znacząco upraszcza proces tworzenia aplikacji internetowych.
- W Vue obserwatorzy są funkcjami, które śledzą zmiany w reaktywnych właściwościach, umożliwiając dynamiczną reakcję na modyfikacje danych i zdarzenia.
- Porównując obserwatorów z właściwościami obliczanymi, warto zauważyć, że te drugie są zazwyczaj bardziej zwięzłe, łatwiejsze do zrozumienia, co przekłada się na lepszą wydajność i łatwiejsze debugowanie.
Platformy JavaScript stały się nieodłącznym elementem współczesnego projektowania stron internetowych. Ich popularność wynika z bogatej funkcjonalności, w tym z architektury komponentowej, efektywnego zarządzania stanem i elastycznego routingu. Te cechy pomagają zredukować nakład pracy, czas i poziom trudności związane z tworzeniem aplikacji internetowych od podstaw.
Vue, jako jeden z czołowych frameworków, oferuje szereg udogodnień przyspieszających rozwój. Jedną z nich jest funkcja obserwacji, która umożliwia monitorowanie wartości zmiennych i wyrażeń w trakcie działania programu.
Czym są obserwatorzy w Vue?
Obserwatorzy w Vue to specjalne funkcje, które czuwają nad zmianami w reaktywnych właściwościach i odpowiednio na nie reagują. Dają one możliwość dynamicznego reagowania na zdarzenia oraz modyfikacje danych w aplikacji.
Aby skorzystać z obserwatora, należy zaimportować funkcję `watch` z biblioteki Vue w skrypcie komponentu:
<script setup>
import { watch } from 'vue';
</script>
Po zaimportowaniu można użyć funkcji `watch` do zaimplementowania obserwatora w komponencie. Oto prosty przykład:
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Zmień nazwę</button>
</div>
</template><script setup>
import { ref, watch } from 'vue';const user = ref('Jan');
const changeName = () => {
user.value="Piotr"; // Zmiana nazwy użytkownika
};watch(user, (newUser, oldUser) => {
alert(`Nazwa użytkownika zmieniona z "${oldUser}" na "${newUser}"`);
});
</script>
Ten uproszczony komponent wykorzystuje funkcję `watch` do śledzenia zmian w nazwie użytkownika. W sekcji szablonu HTML zdefiniowana jest struktura komponentu, zawierająca element wyświetlający wartość reaktywnej zmiennej `user`.
Szablon zawiera również przycisk, który po kliknięciu uruchamia funkcję `changeName`. Gdy wartość zmiennej `user` ulegnie zmianie, Vue wywoła funkcję zwrotną (callback) zdefiniowaną w obserwatorze. Ta funkcja zwrotna wyświetli okno alert z komunikatem: „Nazwa użytkownika została zmieniona z „Jan” na „Piotr”.”
Porównanie obserwatorów z właściwościami obliczanymi
Kluczowe jest zrozumienie różnic między obserwatorami a właściwościami obliczanymi. Chociaż oba te mechanizmy pełnią rolę w reaktywności Vue, są one przeznaczone do różnych celów.
Przykładowo, obliczenie sumy wieku ojca i syna za pomocą obserwatorów można zrealizować w następujący sposób:
<template>
<input type="text" placeholder="Wiek ojca" v-model="father">
<input type="text" placeholder="Wiek syna" v-model="son">
<p>Suma wieku: {{ total }}</p>
</template><script setup>
import { ref, watch } from 'vue';const father = ref();
const son = ref();
const total = ref();watch(son, (newAge, oldAge) => {
total.value = Number(father.value) + Number(newAge)
})watch(father, (newAge, oldAge) => {
total.value = Number(newAge) + Number(son.value)
})</script>
Ten komponent Vue używa obserwatorów do obliczenia sumy wieku ojca i syna. W tym celu tworzy nową, reaktywną zmienną `total`, korzystając z API kompozycji Vue.
Następnie kod wykorzystuje dwie funkcje `watch`, aby monitorować wiek syna i ojca. Dla każdej zmiany wieku, ojca lub syna, kod sumuje nową wartość z wiekiem drugiego i zapisuje wynik w zmiennej reaktywnej `total`.
Rozważmy teraz ten sam scenariusz, ale z wykorzystaniem właściwości obliczanych:
<template>
<input type="text" placeholder="Wiek ojca" v-model="father">
<input type="text" placeholder="Wiek syna" v-model="son">
<p>Suma wieku: {{ total }}</p>
</template><script setup>
import { ref , computed } from 'vue';const father = ref();
const son = ref();const total = computed(() => {
return Number(father.value) + Number(son.value);
});</script>
Ten kod, w porównaniu z poprzednim, jest bardziej zwięzły i czytelny. Oblicza on sumę wieku ojca i syna i zapisuje ją w obliczonej zmiennej `total`. W sekcji szablonu zmienna `total` jest wyświetlana przy użyciu interpolacji, czyli techniki wiązania danych w Vue.
Chociaż sumę dwóch wieków można uzyskać przy użyciu obserwatorów, preferowanym rozwiązaniem jest użycie właściwości obliczanych. Stosowanie obserwatorów w tym kontekście może prowadzić do wolniejszego działania aplikacji i trudniejszego debugowania, ze względu na większą ilość potrzebnego kodu.
Nie należy traktować obserwatorów jako zamiennika właściwości obliczanych. Obserwatory są przydatne do monitorowania i reagowania na zmiany danych, natomiast właściwości obliczane służą do tworzenia nowych danych na podstawie istniejących, reaktywnych danych.
Opcja `immediate` pozwala na skonfigurowanie obserwatora tak, aby wywołał funkcję zwrotną od razu po zamontowaniu komponentu przez Vue.
Oto przykład komponentu, który wykorzystuje obserwatora z opcją `immediate`:
<script setup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Liczba zmieniona z ${oldCount} na ${newCount}`);
},
{ immediate: true }
);
</script>
W powyższym kodzie obserwator wykona funkcję zwrotną natychmiast po zainicjalizowaniu komponentu i wypisze w konsoli „Liczba zmieniona z undefined na 10”. Pokazuje to, że początkowa wartość zmiennej była niezdefiniowana, zanim Vue przypisał wartość 10 do zmiennej `count`.
Opcja `immediate` jest przydatna w sytuacjach, gdy potrzebne jest wykonanie akcji inicjalizującej na podstawie bieżącej wartości obserwowanej właściwości, na przykład gdy aplikacja ma pobrać dane z API po zamontowaniu komponentu.
Opcja `deep` dostępna w obserwatorach Vue
Opcja `deep` podczas korzystania z obserwatorów w Vue pozwala na głęboką obserwację zmian w zagnieżdżonych obiektach lub tablicach. Po ustawieniu wartości `true`, obserwator jest w stanie wykryć zmiany we właściwościach zagnieżdżonych struktur danych.
Poniżej znajduje się przykład komponentu Vue wykorzystującego opcję `deep`:
<script setup>
import { ref, watch } from 'vue';const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Dane zmienione`);
},
{ deep: true }
);// To wywoła obserwatora, ponieważ jest to zmiana głęboka
data.value.length = 43;
</script>
Powyższy kod inicjalizuje zmienną `data` obiektem zawierającym właściwość `length`. Opcja `deep` jest ustawiona na `true`. Następnie w konsoli pojawia się informacja o zmianie danych po modyfikacji właściwości `length` na 43.
Bez opcji `deep` ustawionej na `true`, funkcja `watch` nie zauważyłaby żadnych zmian wewnątrz obiektu. Natomiast, Vue śledzi wszystkie zmiany zagnieżdżone i głębokie bez opcji `deep`, gdy zmienna danych jest zainicjalizowana jako obiekt reaktywny:
<script setup>
import { ref, watch } from 'vue';const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Dane zmienione`);
}
);// To wywoła obserwatora, ponieważ zmienia obiekt reaktywny
data.length = 43;
</script>
W tym przypadku funkcja `watch` zarejestruje w konsoli zmianę danych, ponieważ zmienna `data` jest obiektem reaktywnym.
Twórz lepsze aplikacje z obserwatorami Vue
Obserwatory Vue pozwalają na osiągnięcie precyzyjnej reaktywności w aplikacjach. Umożliwiają monitorowanie zmian we właściwościach danych i wykonywanie niestandardowej logiki w odpowiedzi na te zmiany.
Zrozumienie, kiedy stosować obserwatory, ich różnic w stosunku do właściwości obliczanych oraz wykorzystanie opcji takich jak `immediate` i `deep`, znacząco podnosi możliwości tworzenia wysoce responsywnych aplikacji Vue.