watchPostEffect() Effect After Component Updates
Last updated: 2026-10-22
watchPostEffect() Effect After Component Updates
watchPostEffect() equals watchEffect with flush: 'post' — it runs after the component's DOM update, ideal for measuring the fresh DOM.
| Group | Reactivity: Core |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
watchPostEffect(() => {
console.log(el.value.offsetHeight) // DOM already updated
})⚙️ 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：
Shows the paragraph height; it follows font-size changes.💡 Key Points
💡 Tip Plain watchEffect runs before DOM updates, so layout reads are stale — that is what this variant fixes.
ℹ️ Note watchEffect with { flush: 'post' } is identical.
⚠️ Warning Guard against null template refs before mount.
🏷️ Related Core
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q One-line difference from watchEffect?
A Timing: watchEffect runs pre-update, watchPostEffect runs post-update.
Q When is it required?
A When reading element size, scroll position or focus after render.
Q Can nextTick replace it?
A For one-off reads nextTick works; for tracking changes continuously use watchPostEffect.
