Koja je razlika između watch i watchEffect?

Question

Accepted Answer

Oba izvršavaju nuspojave kao odgovor na reaktivne promjene, ali razlikuju se u tome kako se specificirajú ovisnosti i koje informacije vam daju. Koristite ih za nuspojave (API pozivi, logiranje, ručni rad s DOM-om) — **ne** za izvedbu vrijednosti (to je `computed`). ## watch — eksplicitni izvor, daje stare i nove vrijednosti ```vue ``` `watch` gleda **specifičan** izvor koji navedete, pokreće callback samo kada se taj izvor promijeni i pruža **stare i nove vrijednosti** — korisno kada trebate usporediti njih ili reagirati na određeni dio stanja. ## watchEffect — automatsko praćenje ovisnosti, pokreće se odmah ```vue ``` `watchEffect` **automatski prati** svaku reaktivnu vrijednost korištenu u njemu (bez popisa izvora) i **pokreće se odmah pri postavljanju** (zatim se ponovno pokreće pri bilo kojoj promjeni ovisnosti). Bez starih/novih vrijednosti. ## Usporedno ```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 ``` ## Korisne opcije 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 ``` ## Zašto je to važno Odabir pravog alata čini reaktivne nuspojave čistima: koristite **`computed`** za izvedene vrijednosti, **`watch`** kada trebate reagirati na specifičan izvor ili usporediti stare/nove (npr. dohvati kada se id promijeni), i **`watchEffect`** za nuspojave koje ovise o nekoliko vrijednosti i trebale bi ih automatski pratiti. Zloupotreba promatrača za izvedbu (umjesto `computed`) čest je anti-uzorak.