Mi a különbség a watch és a watchEffect között?

Question

Accepted Answer

Mindkettő mellékhatásokat futtat válaszul a reaktív változásokra, de abban különböznek, hogy az függőségek hogyan vannak megadva és milyen információkat adnak. Használja őket mellékhatásokhoz (API-hívások, naplózás, kézi DOM-munka) — **nem** értékek levezetésére (az a `computed`). ## watch — explicit forrás, régi és új értékeket ad ```vue ``` A `watch` egy **specifikus** forrást néz, amelyet megnevez, a callback-et csak akkor futtatja, amikor az a forrás megváltozik, és a **régi és új értékeket** adja vissza — hasznos, ha össze kell vetni őket, vagy egy adott állapotdarabra kell reagálni. ## watchEffect — automatikus függőség-követés, azonnal fut ```vue ``` A `watchEffect` **automatikusan nyomon követi** a benne használt minden reaktív értéket (nincs forráslista), és **azonnal fut a beállításkor** (majd újra fut bármilyen függőség-változáson). Nincs régi/új érték. ## Egymás mellett ```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 ``` ## Hasznos watch-opciók ```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 ``` ## Miért fontos A megfelelő eszköz kiválasztása tisztává tartja a reaktív mellékhatásokat: **`computed`** használata levezetett értékekhez, **`watch`** használata amikor egy specifikus forrásra kell reagálni vagy összehasonlítani a régit/újat (pl. lekérés, ha az id megváltozik), és **`watchEffect`** használata olyan mellékhatásokhoz, amelyek több értéktől függenek és automatikusan kellene nyomon követniük azokat. A watch-ok levezetésre való felhasználása (`computed` helyett) egy közös anti-pattern.