What are watchers in Vue and when should you use watch vs watchEffect?
Understand Vue watchers and when to use watch vs watchEffect: old/new values, automatic dependency tracking, timing, and cleanup for side effects.
Expected Interview Answer
Watchers let you run side effects in response to reactive state changes; watch observes specific sources and gives you old and new values, while watchEffect runs immediately and re-runs whenever any reactive value it reads changes.
Use watch when you need to react to a particular source, compare previous and current values, or run lazily only after a change. Use watchEffect when the effect depends on several reactive values and you want automatic dependency tracking without listing sources, accepting that it runs once eagerly on setup. Both are for side effects like fetching data or syncing to storage — not for deriving values, which is what computed is for.
- Run side effects in response to state changes
- watch gives access to old and new values
- watchEffect auto-tracks dependencies
- Fine-grained control over timing and lazy execution
- Ideal for async work like data fetching
AI Mentor Explanation
watch is like a third umpire assigned to one specific decision — a run-out — who compares the before and after frames and only acts when that event happens. watchEffect is like a fielding coach who automatically reacts to whatever changes on the pitch, adjusting positions the moment anything relevant shifts, without being told which single thing to watch.
Step-by-Step Explanation
Step 1
Decide if you need a side effect
Watchers are for effects like fetching or logging — use computed for pure derived values.
Step 2
Choose watch for a specific source
Pass a ref, getter, or array of sources and a callback receiving new and old values.
Step 3
Choose watchEffect for multiple deps
Write the effect; Vue tracks every reactive value it reads and re-runs on any change.
Step 4
Mind the timing
watch is lazy by default (add immediate: true to run on setup); watchEffect always runs once immediately.
Step 5
Clean up
Use onCleanup / onWatcherCleanup to cancel stale async work before the next run.
What Interviewer Expects
- Clear distinction between watch and watchEffect
- Knowledge that watch gives old and new values
- Understanding of automatic dependency tracking
- Awareness of lazy vs immediate execution
- When to prefer computed over a watcher
Common Mistakes
- Using a watcher to derive a value that should be computed
- Expecting watchEffect to provide the previous value
- Forgetting watchEffect runs immediately on setup
- Not cleaning up async work, causing race conditions
- Deep-watching large objects unnecessarily and hurting performance
Best Answer (HR Friendly)
“Watchers in Vue let you run extra code, like fetching data, whenever some data changes. Use watch when you care about one specific thing and want to compare the old and new value, and use watchEffect when your code depends on several values and you want Vue to track them for you automatically.”
Code Example
import { ref, watch, watchEffect } from 'vue'
const userId = ref(1)
const query = ref('')
// watch: specific source, gives old and new, lazy by default
watch(userId, (newId, oldId) => {
console.log(`changed from ${oldId} to ${newId}`)
fetchUser(newId)
})
// watchEffect: auto-tracks userId and query, runs immediately
watchEffect(() => {
console.log(`searching ${query.value} for user ${userId.value}`)
})Follow-up Questions
- How do you access the previous value in watchEffect?
- How do you make watch run immediately on setup?
- What is the deep option in watch and when is it needed?
- How do you cancel a pending async request inside a watcher?
- Why is computed preferred over a watcher for derived state?
MCQ Practice
1. Which watcher gives you both the old and new value of a source?
watch passes (newValue, oldValue) to its callback; watchEffect does not expose the previous value.
2. When does watchEffect first run?
watchEffect runs eagerly once on setup to collect its dependencies, then again whenever any of them change.
3. What should you use for a pure value derived from state?
Derived values belong in computed; watchers are for side effects, not for producing derived state.
Flash Cards
watch vs watchEffect: which gives old value? — watch — its callback receives (newValue, oldValue). watchEffect does not.
When does watchEffect first run? — Immediately on setup, then re-runs when any tracked reactive value changes.
How does watchEffect know its dependencies? — It automatically tracks every reactive value read during its execution.
Watcher or computed for derived state? — computed — watchers are for side effects like fetching or logging.