onWatcherCleanup() Register Watcher Cleanup
Last updated: 2026-10-22
onWatcherCleanup() Register Watcher Cleanup
onWatcherCleanup() registers a teardown that runs before the watcher re-runs or stops — for cancelling requests and timers.
| Group | Reactivity: Core |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.5+ |
| SSR Support | Yes |
📝 Syntax
watch(keyword, async () => {
const controller = new AbortController()
onWatcherCleanup(() => controller.abort())
const res = await fetch(url, { signal: controller.signal })
})⚙️ Arguments
| cleanupFn | The teardown function, run before the watcher becomes stale |
|---|
Returns：None (call it inside a watcher callback)
▶ Example
Edit the code below and see the live result:
Output：
Typing fast shows only the final result after a 600ms pause — earlier ones are cancelled.💡 Key Points
⚠️ Warning Must be called synchronously inside the callback — calling it after await throws.
💡 Tip The third callback argument onCleanup is equivalent — both styles are common.
ℹ️ Note Typical uses: search debouncing, race-free requests, socket reconnect cleanup.
🏷️ Related Core
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What happens without cleanup?
A Stale work keeps running: a slow old response can overwrite the new one — a race condition.
Q Difference from onUnmounted?
A onWatcherCleanup runs before every re-run; onUnmounted runs once on unmount.
Q Can it be used in watchEffect?
A Yes — watchEffect supports it too via the onCleanup argument.
