Explain the difference between computed, watch and watchEffect.
Assesses fundamental understanding of Vue.js conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
computed derives a cached value from reactive dependencies. The getter re-evaluates only when a dependency changes and something reads the value, which makes it ideal for derived state used in templates. It must be pure.
watch runs a side effect when a specific source changes. It is lazy by default, gives you old and new values, supports deep, immediate and a cleanup callback, and is the right tool for data fetching or imperative work.
watchEffect runs immediately and automatically tracks every reactive property read during execution, re-running when any of them change. It is concise but makes dependencies implicit.
const total = computed(() => items.value.reduce((s, i) => s + i.price, 0));
watch(total, (v, old) => console.log(v, old));
watchEffect(() => console.log(total.value));
Never mutate state inside computed; use watch for side effects. Prefer computed over a method in a template to gain caching, and call the returned watcher handle to stop it when needed.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.