Vilken är skillnaden mellan watch och watchEffect?

Question

Accepted Answer

Båda kör bieffekter som svar på reaktiva ändringar, men de skiljer sig åt i hur beroenden anges och vilken information de ger dig. Använd dem för bieffekter (API-anrop, loggning, manuellt DOM-arbete) — **inte** för att härleda värden (det är `computed`). ## watch — explicit källa, ger gamla + nya värden ```vue ``` `watch` övervakar en **specifik** källa som du namnger, kör callback endast när denna källa ändras, och tillhandahåller de **gamla och nya värdena** — användbart när du behöver jämföra dem eller reagera på en särskild del av tillståndet. ## watchEffect — automatisk beroendeövervakning, körs omedelbar ```vue ``` `watchEffect` **övervakar automatiskt** varje reaktivt värde som används inuti det (ingen källlista), och körs **omedelbar på konfigurering** (kör sedan om på ändringar av beroenden). Inga gamla/nya värden. ## Sida vid sida ```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 ``` ## Användbara watch-alternativ ```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 ``` ## Varför det är viktigt Att välja rätt verktyg håller reaktiva bieffekter rena: använd **`computed`** för härledda värden, **`watch`** när du behöver reagera på en specifik källa eller jämföra gamla/nya (t.ex. hämta när ett id ändras), och **`watchEffect`** för effekter som beror på flera värden och bör spåra dem automatiskt. Missbruk av watchers för härledning (i stället för `computed`) är ett vanligt anti-mönster.