watch() Watch Reactive Sources
Last updated: 2026-10-22
watch() Watch Reactive Sources
watch() observes one or more reactive sources and runs a callback on change with old and new values — for reactive logic with side effects.
| Group | Reactivity: Core |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
watch(source, (newVal, oldVal) => { ... }, { immediate: true, deep: true })
// multiple sources
watch([count, keyword], ([c, k], [oc, ok]) => { ... })⚙️ Arguments
| source | A ref, getter function, reactive object or array |
|---|---|
| callback | (newValue, oldValue, onCleanup) => void |
| options | immediate, deep and flush (pre|post|sync) |
Returns：A stop function that cancels the watcher
▶ Example
Edit the code below and see the live result:
Output：
Editing the input shows 'old → new', e.g. '10 → 12'.💡 Key Points
💡 Tip Lazy by default — add immediate: true to run on setup.
⚠️ Warning deep: true walks the whole object; watch a getter (() => obj.a) for precision.
⚠️ Warning Cancel stale async work in onCleanup / onWatcherCleanup to avoid out-of-order results.
🏷️ Related Core
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q watch vs computed?
A computed derives a cached value; watch runs side effects with no return value.
Q How to run the watcher immediately?
A Pass { immediate: true }; the callback fires once on setup with undefined oldValue.
Q Can watch observe several sources?
A Yes — pass an array: watch([a, b], ([newA, newB]) => ...).
