Hvad er forskellen mellem watch og watchEffect?

Question

Accepted Answer

Begge kører side effects som svar på reaktive ændringer, men de adskiller sig i, hvordan afhængigheder angives og hvilke oplysninger de giver dig. Brug dem til side effects (API-kald, logging, manuel DOM-arbejde) — **ikke** til at udlede værdier (det er `computed`). ## watch — eksplicit kilde, giver gamle + nye værdier ```vue ``` `watch` ser på en **specifik** kilde du navngiver, kører callback'en kun når den pågældende kilde ændrer sig, og giver dig **de gamle og nye værdier** — nyttigt når du skal sammenligne dem eller reagere på et særligt stykke state. ## watchEffect — automatisk afhængighedssporing, kører med det samme ```vue ``` `watchEffect` **sporer automatisk** enhver reaktiv værdi brugt inde i den (ingen kildelist), og kører **med det samme ved opsætning** (kører så igen ved enhver afhængighhedsændring). Ingen gamle/nye værdier. ## Side om 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 ``` ## Brugbare watch-indstillinger ```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 betyder noget At vælge det rigtige værktøj holder reaktive side effects rene: brug **`computed`** til afledte værdier, **`watch`** når du skal reagere på en specifik kilde eller sammenligne gamle/nye (f.eks. fetch når et id ændres), og **`watchEffect`** til effekter som afhænger af flere værdier og skal spore dem automatisk. Misbrug af watchers til afledning (i stedet for `computed`) er et almindeligt anti-pattern.