watchSyncEffect() Effect That Runs Synchronously
Last updated: 2026-10-22
watchSyncEffect() Effect That Runs Synchronously
watchSyncEffect() equals watchEffect with flush: 'sync' — it fires immediately on change without batching.
| Group | Reactivity: Core |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
watchSyncEffect(() => {
console.log('runs at once', count.value)
})⚙️ Arguments
| effect | The effect function; options match watchEffect (no flush) |
|---|
Returns：A stop function
▶ Example
Edit the code below and see the live result:
Output：
A +2 click logs twice (e.g. '2 2'); with default flush you would see the final value once.💡 Key Points
⚠️ Warning Skipping batching hurts performance under rapid change — only for exact per-change capture.
ℹ️ Note Typical uses: debugging and strictly ordered change logs.
💡 Tip If watch plus nextTick suffices, avoid sync.
🏷️ Related Core
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Sync vs default flush?
A The default batches changes per tick; sync fires on every single change.
Q Is it a performance risk?
A Yes — each assignment runs the effect, so loops multiply the cost.
Q Does it give old and new values?
A No — for values use watch with flush: 'sync'.
