Wat is het verschil tussen watch en watchEffect?

Question

Accepted Answer

Beide voeren side effects uit als reactie op reactieve veranderingen, maar ze verschillen in hoe dependencies worden gespecificeerd en welke informatie ze je geven. Gebruik ze voor side effects (API-aanroepen, logging, handmatig DOM-werk) — **niet** voor het afleiden van waarden (daarvoor is `computed`). ## watch — expliciete bron, geeft oude + nieuwe waarden ```vue ``` `watch` kijkt naar een **specifieke** bron die je noemt, voert de callback alleen uit wanneer die bron verandert, en geeft de **oude en nieuwe waarden** — handig wanneer je deze wilt vergelijken of op één bepaald stuk state wilt reageren. ## watchEffect — automatische dependency tracking, voert onmiddellijk uit ```vue ``` `watchEffect` **volgt automatisch** elke reactieve waarde die erin wordt gebruikt (geen bronnenlijst), en voert **onmiddellijk uit bij setup** (voert dan opnieuw uit bij elke dependency-verandering). Geen oude/nieuwe waarden. ## Naast elkaar ```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 ``` ## Handige watch-opties ```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 ``` ## Waarom het belangrijk is Het kiezen van het juiste gereedschap houdt reactieve side effects schoon: gebruik **`computed`** voor afgeleide waarden, **`watch`** wanneer je op een specifieke bron moet reageren of oude/nieuwe waarden wilt vergelijken (bijv. fetch wanneer een id verandert), en **`watchEffect`** voor effects die afhangen van meerdere waarden en deze automatisch moeten bijhouden. Watchers voor afleiding gebruiken (in plaats van `computed`) is een veel voorkomend anti-patroon.