watchEffect() Run an Effect with Automatic Tracking
Last updated: 2026-10-22
watchEffect() Run an Effect with Automatic Tracking
watchEffect() runs the function immediately and tracks whatever reactive data it reads — re-running whenever a dependency changes.
| Group | Reactivity: Core |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
watchEffect(() => {
document.title = `${count.value} clicks` // tracks count automatically
})
// cleanup support
watchEffect((onCleanup) => { const t = setTimeout(fn, 500); onCleanup(() => clearTimeout(t)) })⚙️ Arguments
| effect | The effect function; receives onCleanup to register teardown |
|---|---|
| options | flush (pre|post|sync), onTrack and onTrigger |
Returns：A stop function that cancels the effect
▶ Example
Edit the code below and see the live result:
Output：
The title becomes '0 clicks' on mount and updates after every click.💡 Key Points
💡 Tip No dependency list to maintain: whatever it reads is tracked.
ℹ️ Note No old value is provided — use watch() when you need before/after comparison.
⚠️ Warning Cancel stale requests via onCleanup to avoid race conditions on rapid changes.
🏷️ Related Core
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q watchEffect or watch?
A Simple dependencies and no old value → watchEffect. Old values, precise sources or laziness → watch.
Q Why does it re-run for data I did not use?
A Only what is actually read is tracked — dependencies follow the branch taken.
Q Can watchEffect be stopped?
A Yes — call the returned stop(); it also stops automatically on unmount.
