Care este diferența dintre watch și watchEffect?

Question

Accepted Answer

Ambele execută efecte secundare în răspuns la modificări reactive, dar diferă în modul în care sunt specificate dependențele și ce informații îți furnizează. Folosește-le pentru efecte secundare (apeluri API, logging, lucru manual cu DOM) — **nu** pentru derivarea valorilor (asta e treaba lui `computed`). ## watch — sursă explicită, oferă valorile vechi + noi ```vue ``` `watch` urmărește o sursă **specifică** pe care o numești, execută callback-ul doar când acea sursă se schimbă, și furnizează **valorile vechi și noi** — util când trebuie să le compari sau să reacționezi la o anumită parte a state-ului. ## watchEffect — tracking automat al dependențelor, se execută imediat ```vue ``` `watchEffect` **urmărește automat** fiecare valoare reactivă folosită în interiorul lui (fără listă de surse), și se execută **imediat la setup** (apoi se re-execută la orice schimbare de dependență). Fără valori vechi/noi. ## Comparație directă ```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 ``` ## Opțiuni utile pentru 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 ``` ## De ce contează Alegerea uneltei potrivite ține efectele reactive secundare curate: folosește **`computed`** pentru valori derivate, **`watch`** când trebuie să reacționezi la o sursă specifică sau să compari vechi/nou (de ex. fetch când se schimbă un id), și **`watchEffect`** pentru efecte care depind de mai multe valori și ar trebui să le urmărească automat. Folosirea greșită a watcher-urilor pentru derivare (în loc de `computed`) este un anti-pattern obișnuit.