0Pricing
Vue Academy · Lekcja

Computed i watch w Composition API

computed() dla stanu pochodnego, watch() i watchEffect() dla efektów ubocznych.

Computed i watch w Composition API to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Wyprowadzanie stanu i reagowanie na zmiany

Stan reaktywny to tylko połowa zagadnienia. Trzeba również wyprowadzać z niego nowe wartości i reagować na zmiany. Composition API oferuje do tego computed, watch i watchEffect.

computed dla wartości pochodnych

computed() przyjmuje funkcję getter i zwraca ref, którego wartość jest wyprowadzana z innych reaktywnych danych. W JS uzyskuje się do niej dostęp przez .value, a w szablonie jest automatycznie rozpakowywana.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed działa leniwie i korzysta z pamięci podręcznej

Computed przelicza się ponownie tylko wtedy, gdy zmieni się jedna z jego reaktywnych zależności. Jeśli odczytasz je dziesięć razy bez żadnych zmian, getter wykona się raz, a następnie zostanie użyty zapisany wynik.

Dzięki temu computed idealnie nadaje się do kosztownych obliczeń.

computed aktualizuje się automatycznie

Po zmianie zależności computed aktualizuje się przy następnym odczycie. Nie trzeba wywoływać go ręcznie.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

watch do efektów ubocznych

watch() obserwuje reaktywne źródło i uruchamia funkcję zwrotną, gdy źródło się zmieni. Funkcja zwrotna otrzymuje nową wartość i starą wartość.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch jest domyślnie leniwe

W przeciwieństwie do computed watch nie uruchamia funkcji zwrotnej natychmiast. Czeka na pierwszą zmianę. Używaj go do efektów ubocznych: rejestrowania danych, pobierania danych i zapisywania ich w pamięci.

Obserwowanie wielu źródeł

Przekaż tablicę źródeł, aby obserwować kilka wartości jednocześnie. Funkcja zwrotna otrzyma tablice nowych i starych wartości.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

Obserwowanie funkcji getter

Aby obserwować właściwość obiektu reaktywnego, przekaż funkcję getter. Bezpośrednie obserwowanie obiektu reaguje tylko na głębokie zmiany, co może być zaskakujące.

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: natychmiastowe wykonywanie i automatyczne śledzenie

watchEffect() uruchamia swoją funkcję natychmiast i wykonuje ją ponownie za każdym razem, gdy zmieni się dowolna użyta w niej wartość reaktywna. Nie trzeba podawać zależności — są śledzone automatycznie.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch a watchEffect

  • watch: jawne źródło, działanie leniwe, dostęp do starych i nowych wartości.
  • watchEffect: automatycznie śledzi zależności, wykonuje się od razu, bez dostępu do starej wartości.

Używaj watch, gdy potrzebujesz poprzedniej wartości albo chcesz precyzyjnie kontrolować działanie. Używaj watchEffect do szybkich reaktywnych efektów ubocznych.

computed czy watch

Po computed należy sięgać, gdy potrzebna jest nowa wartość pochodna. watch lub watchEffect należy stosować, gdy w reakcji na zmianę trzeba wykonać działanie. Nie należy używać watch do ponownego obliczania wartości — do tego służy computed.

Szybkie sprawdzenie

Wybierz właściwy pomocnik reaktywny.

Podsumowanie

Wiesz już, jak wyprowadzać wartości i reagować na zmiany:

  • computed tworzy leniwe, buforowane wartości pochodne.
  • watch reaguje na konkretne źródło i udostępnia nowe oraz poprzednie wartości; działa leniwie.
  • watchEffect uruchamia się niezwłocznie i automatycznie śledzi zależności.
  • computed służy do wartości, a watch/watchEffect do efektów ubocznych.

Często zadawane pytania

Czy lekcja „Computed i watch w Composition API” jest bezpłatna?

Tak — pełny tekst „Computed i watch w Composition API” 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 4 lekcji w sumie.

Co nauczysz się w „Computed i watch w Composition API”?

computed() dla stanu pochodnego, watch() i watchEffect() dla efektów ubocznych. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Computed i watch w Composition API”?

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

  1. Dlaczego Composition API?
  2. Funkcja setup() i zmienne reaktywne
  3. ref a reactive: kiedy używać każdego z nich
  4. Computed i watch w Composition API
← Powrót do Vue Academy