Mikä on ero watch:in ja watchEffect:in välillä?

Question

Accepted Answer

Molemmat suorittavat side effecteja reaktiivisen muutoksen seurauksena, mutta ne eroavat siinä, miten riippuvuudet määritellään ja mitä tietoja ne sinulle antavat. Käytä niitä side effecteille (API-kutsut, logging, manuaalinen DOM-työ) — **eivät** arvojen johtamiseen (se on `computed`). ## watch — eksplisiittinen lähde, antaa vanhat + uudet arvot ```vue ``` `watch` tarkailee **tiettyä** lähdettä, jonka nimeät, suorittaa callback-funktion vain kun kyseinen lähde muuttuu, ja antaa **vanhat ja uudet arvot** — hyödyllinen kun sinun täytyy verrata niitä tai reagoida johonkin tiettyyn tilaan. ## watchEffect — automaattinen riippuvuuksien seuranta, suoritetaan heti ```vue ``` `watchEffect` **seuraa automaattisesti** jokaista sen sisällä käytettyä reaktiivista arvoa (ilman lähdeluetteloa) ja suoritetaan **heti asennuksessa** (sitten uudelleen milloin tahansa riippuvuuden muuttuu). Ei vanhoja/uusia arvoja. ## Rinnakkain ```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 ``` ## Hyödylliset watch-asetukset ```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 ``` ## Miksi tämä on tärkeää Oikean työkalun valinta pitää reaktiiviset side effectit puhtaina: käytä **`computed`**-arvoa johdettaville arvoille, **`watch`**-arvoa kun sinun täytyy reagoida tiettyyn lähteeseen tai verrata vanhoja/uusia (esim. fetch kun id muuttuu), ja **`watchEffect`**-arvoa effecteille, jotka riippuvat useista arvoista ja joiden tulisi seurata niitä automaattisesti. Watcher-funktioiden väärä käyttö johdannaiseen (sen sijaan että käyttäisit `computed`-arvoa) on yleinen anti-pattern.