What is the difference between watch and watchEffect?

Question

Accepted Answer

Both run side effects in response to reactive changes, but they differ in how dependencies are specified and what info they give you. Use them for side effects (API calls, logging, manual DOM work) — **not** for deriving values (that's `computed`). ## watch — explicit source, gives old + new values ```vue ``` `watch` watches a **specific** source you name, runs the callback only when that source changes, and provides the **old and new values** — useful when you need to compare them or react to one particular piece of state. ## watchEffect — automatic dependency tracking, runs immediately ```vue ``` `watchEffect` **automatically tracks** every reactive value used inside it (no source list), and runs **immediately on setup** (then re-runs on any dependency change). No old/new values. ## Side-by-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 ``` ## Useful watch options ```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 ``` ## Why it matters Choosing the right tool keeps reactive side effects clean: use **`computed`** for derived values, **`watch`** when you need to react to a specific source or compare old/new (e.g. fetch when an id changes), and **`watchEffect`** for effects that depend on several values and should track them automatically. Misusing watchers for derivation (instead of `computed`) is a common anti-pattern.