Watchery i głęboka reaktywność
Zareagują Państwo na zmiany danych za pomocą watcherów i głębokiego obserwowania.
Watchery i głęboka reaktywność to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.
Czym jest obserwator?
Obserwator uruchamia funkcję w odpowiedzi na zmianę danych.
- W przeciwieństwie do computed służy do wykonywania skutków ubocznych
- Pobierania danych, rejestrowania informacji i zapisywania ich w magazynie
- Reagowania na konkretną zmianę
Funkcja watch
Funkcja watch przyjmuje źródło do obserwowania oraz callback otrzymujący nowe i poprzednie wartości.
import { ref, watch } from "vue"
const query = ref("")
watch(query, (newVal, oldVal) => {
console.log("changed from", oldVal, "to", newVal)
})Praktyczny przykład
Obserwowanie pola wyszukiwania w celu wywołania API po jego zmianie.
const search = ref("")
watch(search, async (newQuery) => {
const results = await fetchResults(newQuery)
items.value = results
})Opcja immediate
Domyślnie obserwator jest uruchamiany tylko po zmianach. Opcja immediate uruchamia go dodatkowo od razu, jeden raz.
watch(userId, (id) => {
loadUser(id)
}, { immediate: true })
// Runs immediately with the current value,
// then again on every changeOpcja deep
Domyślnie obserwowanie obiektu reaguje tylko na zmiany referencji. Opcja deep obserwuje również zagnieżdżone właściwości.
const profile = reactive({ name: "Ada", address: { city: "London" } })
watch(profile, (val) => {
console.log("profile changed")
}, { deep: true })
// Fires even when profile.address.city changesObserwowanie zagnieżdżonych obiektów
Bez opcji deep zmiana zagnieżdżonej właściwości obserwowanego reaktywnego obiektu może nie wywołać callbacku zgodnie z oczekiwaniami. Opcja deep zapewnia takie działanie kosztem większej ilości pracy.
- Opcji deep należy używać tylko wtedy, gdy śledzenie zagnieżdżonych właściwości jest naprawdę potrzebne
- Głębokie obserwowanie dużych obiektów może być kosztowne
Obserwowanie wartości zwracanej przez getter
Aby obserwować konkretną zagnieżdżoną wartość, należy przekazać funkcję getter jako źródło.
watch(
() => profile.address.city,
(newCity) => {
console.log("city is now", newCity)
}
)Obserwowanie wielu źródeł
Należy przekazać tablicę źródeł, aby obserwować kilka wartości jednocześnie.
watch([width, height], ([newW, newH], [oldW, oldH]) => {
console.log("size:", newW, "x", newH)
})watchEffect
watchEffect uruchamia się natychmiast i ponownie za każdym razem, gdy zmieni się dowolna odczytywana przez niego wartość reaktywna. Nie trzeba jawnie podawać listy źródeł.
import { watchEffect } from "vue"
watchEffect(() => {
console.log("count is", count.value)
})
// Runs now, and again whenever count changeswatch a watchEffect
Wybór między nimi:
- watch ma jawnie określone źródło, udostępnia stare i nowe wartości oraz domyślnie działa leniwie
- watchEffect automatycznie śledzi zależności, uruchamia się natychmiast i nie udostępnia poprzedniej wartości
Należy użyć watch, gdy potrzebna jest poprzednia wartość lub precyzyjna kontrola; watchEffect sprawdzi się, gdy liczy się wygoda.
Obserwatory w Options API
Options API deklaruje obserwatory w bloku watch, używając nazwy danych jako klucza.
export default {
data() {
return { question: "" }
},
watch: {
question(newVal, oldVal) {
this.getAnswer(newVal)
}
}
}Szybkie sprawdzenie
Proszę sprawdzić swoją wiedzę na temat obserwatorów.
Podsumowanie: obserwatory i głęboka reaktywność
W tej części nauczyli się Państwo reagować na zmiany za pomocą skutków ubocznych:
- watch obserwuje źródło i udostępnia nowe oraz poprzednie wartości
- immediate uruchamia obserwator jeden raz na początku
- deep śledzi zmiany w zagnieżdżonych obiektach
- watchEffect automatycznie śledzi zależności i uruchamia się natychmiast
- Wiele źródeł można obserwować za pomocą tablicy
Następnie: routing z użyciem Vue Router.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Watchery i głęboka reaktywność” jest bezpłatna?
Tak — pełny tekst „Watchery i głęboka reaktywność” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Watchery i głęboka reaktywność”?
Zareagują Państwo na zmiany danych za pomocą watcherów i głębokiego obserwowania. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Watchery i głęboka reaktywność”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Podstawy reaktywności
- Właściwości computed
- Watchery i głęboka reaktywność