Jaka jest różnica między watch a watchEffect?

Question

Accepted Answer

Oba uruchamiają efekty uboczne w odpowiedzi na zmiany reaktywne, ale różnią się tym, jak zależności są określane i jakie informacje Ci dostarczają. Używaj ich do efektów ubocznych (połączenia API, logowanie, ręczna praca z DOM) — **nie** do wyprowadzania wartości (to jest `computed`). ## watch — jawne źródło, podaje stare + nowe wartości ```vue ``` `watch` obserwuje **konkretne** źródło, które określisz, uruchamia callback tylko wtedy, gdy zmienia się to źródło, i dostarcza **stare i nowe wartości** — przydatne, gdy trzeba je porównać lub zareagować na jedną konkretną część stanu. ## watchEffect — automatyczne śledzenie zależności, uruchamia się natychmiast ```vue ``` `watchEffect` **automatycznie śledzi** każdą wartość reaktywną używaną wewnątrz (bez listy źródeł) i uruchamia się **natychmiast podczas konfiguracji** (a następnie ponownie uruchamia się przy każdej zmianie zależności). Brak starych/nowych wartości. ## Obok siebie ```text watch watchEffect Dependencies explicit (you name them) automatic (tracked from usage) Runs immediately? no (unless immediate:true) yes Old + new values? yes no Best for reacting to specific state, running an effect that depends needing prev value on several values ``` ## Przydatne opcje watch ```js watch(source, cb, { immediate: true, // run once right away (like watchEffect) deep: true, // watch nested object changes }); watch([a, b], ([newA, newB]) => {}); // watch multiple sources ``` ## Dlaczego to ważne Wybór odpowiedniego narzędzia utrzymuje reaktywne efekty uboczne czystymi: używaj **`computed`** do wartości pochodnych, **`watch`** gdy musisz zareagować na konkretne źródło lub porównać stare/nowe (np. pobranie danych gdy zmieni się id), i **`watchEffect`** do efektów zależnych od wielu wartości i powinny je automatycznie śledzić. Niepoprawne używanie watchers do wyprowadzania (zamiast `computed`) to częsty anty-wzorzec.