onBeforeUpdate() Before Update Hook
Last updated: 2026-10-22
onBeforeUpdate() Before Update Hook
onBeforeUpdate() runs after reactive data changes but before the DOM updates — read the pre-update DOM here.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onBeforeUpdate(() => {
// DOM still holds the previous state
})⚙️ Arguments
| callback | Function executed before update |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
Each click records the stale DOM first, then the view refreshes.💡 Key Points
ℹ️ Note Low usage — watch plus watchPostEffect covers most needs.
⚠️ Warning Mutating state here triggers another update — guard against loops.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Which comes first — this hook or the DOM update?
A The hook first: the DOM updates right after, so it reads stale markup.
Q Can it cancel the update?
A No — use v-if for conditional rendering instead.
Q Difference from watch with flush: 'pre'?
A Same timing, but watch targets specific data with values.
