beforeUpdate Before Update
Last updated: 2026-10-22
beforeUpdate Before Update
beforeUpdate runs after data changes but before the DOM patch — it still reads the previous DOM.
| Group | Options: Rendering & Lifecycle |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
beforeUpdate() {
// the DOM still holds the old value
}
}⚙️ Arguments
| value | No arguments |
|---|
Returns：No return value
▶ 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 with flush: 'pre' usually suffices.
⚠️ Warning Mutating data here schedules extra updates — be careful.
🏷️ Related Rendering & Lifecycle
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Which comes first?
A The hook runs first, the DOM right after.
Q Can it cancel the update?
A No — control rendering with v-if.
Q Difference from updated?
A Opposite timing: stale DOM here, fresh in updated.
