Hva er forskjellen mellom watch og watchEffect?

Question

Accepted Answer

Begge kjører bivirkninger som svar på reaktive endringer, men de skiller seg i hvordan avhengigheter spesifiseres og hva slags informasjon de gir deg. Bruk dem for bivirkninger (API-kall, logging, manuelt DOM-arbeid) — **ikke** for å utlede verdier (det er `computed`). ## watch — eksplisitt kilde, gir gamle + nye verdier ```vue ``` `watch` overvåker en **spesifikk** kilde du navngir, kjører callback bare når den kilden endres, og gir **gamle og nye verdier** — nyttig når du trenger å sammenligne dem eller reagere på ett bestemt stykke state. ## watchEffect — automatisk avhengighetssporing, kjører umiddelbart ```vue ``` `watchEffect` **sporer automatisk** hver reaktiv verdi brukt inni den (ingen kildeliste), og kjører **umiddelbart ved oppsett** (kjører deretter på nytt når avhengigheter endres). Ingen gamle/nye verdier. ## Side ved side ```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 ``` ## Nyttige watch-alternativer ```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 ``` ## Hvorfor det betyr noe Å velge riktig verktøy holder reaktive bivirkninger rene: bruk **`computed`** for utledede verdier, **`watch`** når du må reagere på en spesifikk kilde eller sammenligne gamle/nye (f.eks. hent når en id endres), og **`watchEffect`** for effekter som avhenger av flere verdier og skal spore dem automatisk. Å misbruke watchers for utledning (i stedet for `computed`) er et vanlig anti-pattern.