Vue Academy · Lesson

onUpdated and onBeforeUpdate

Reacting to reactive data changes, avoiding infinite update loops in onUpdated.

Lesson 3 of 413 steps

onUpdated and onBeforeUpdate is a free Vue Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

Hooks Around Updates

When reactive data changes, Vue re-renders the component. Two hooks bracket this: onBeforeUpdate fires before the DOM is patched and onUpdated fires after.

onUpdated: After the Patch

onUpdated runs once the DOM has been updated to reflect new reactive state. At this point the rendered DOM matches your data.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

Reading Updated DOM

Because the patch is complete, onUpdated is the right place to read new element sizes or positions that depend on the latest render.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

The Infinite Loop Trap

Never mutate reactive state inside onUpdated. Doing so triggers another render, which fires onUpdated again, which mutates again — an infinite loop that freezes the app.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

Use watch Instead

If you want to react to a specific value changing, use watch, not onUpdated. A watch targets one source and avoids the loop risk, while onUpdated fires for every render.

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: Before the Patch

onBeforeUpdate runs after a reactive change but before Vue patches the DOM. The DOM still shows the old values here.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

Use Case: Pre-Update Snapshot

Because onBeforeUpdate sees the old DOM, it is perfect for capturing a snapshot before the change — for example, recording the current scroll position to restore it after the update.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

They Fire on Every Render

Both hooks run on each update cycle, which can be frequent. Keep their callbacks lightweight to avoid performance problems.

Not for Data Side Effects

These hooks are about the DOM, not your data. For data-driven reactions prefer computed (for derived values) or watch (for side effects on specific sources).

Order Recap

On a reactive change the sequence is: state changes, onBeforeUpdate runs (old DOM), Vue patches the DOM, then onUpdated runs (new DOM).

Choosing Between Them

onBeforeUpdate: capture old DOM state, like scroll or selection.
onUpdated: read the new DOM after patch — but never mutate reactive state here.

Quick Check

Test your update hooks knowledge.

Answer it in the interactive lesson

Recap

Update hooks summary:

onUpdated runs after the DOM patch — read new sizes here.
Never mutate reactive state inside it (infinite loop); use watch instead.
onBeforeUpdate runs before the patch with old DOM — great for snapshots.
Both fire on every render, so keep them light.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “onUpdated and onBeforeUpdate” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “onUpdated and onBeforeUpdate”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

What will I learn in “onUpdated and onBeforeUpdate”?

Reacting to reactive data changes, avoiding infinite update loops in onUpdated. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “onUpdated and onBeforeUpdate” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy