onUpdated and onBeforeUpdate in Vue - Step-by-Step Execution

Concept Flow - onUpdated and onBeforeUpdate

Component Render Start

↓

onBeforeUpdate Hook Runs

↓

DOM Updates

↓

onUpdated Hook Runs

↓

Render Cycle Ends or Repeats

This flow shows how Vue calls onBeforeUpdate before the DOM changes, then updates the DOM, and finally calls onUpdated after the DOM is updated.

Execution Sample

Vue

import { ref, onBeforeUpdate, onUpdated } from 'vue';

export default {
  setup() {
    const count = ref(0);
    onBeforeUpdate(() => console.log('Before update:', count.value));
    onUpdated(() => console.log('Updated:', count.value));
    function increment() { count.value++; }
    return { count, increment };
  }
}

This Vue component logs messages before and after the DOM updates when the count changes.

Execution Table

Step	Trigger	count.value	Hook Called	Console Output	DOM State
1	Initial render	0	None		count displayed as 0
2	increment() called	1	onBeforeUpdate	Before update: 1	DOM still shows 0
3	DOM updates	1	None		count displayed as 1
4	After DOM update	1	onUpdated	Updated: 1	count displayed as 1
5	increment() called again	2	onBeforeUpdate	Before update: 2	DOM still shows 1
6	DOM updates	2	None		count displayed as 2
7	After DOM update	2	onUpdated	Updated: 2	count displayed as 2
8	No more changes	2	None		DOM stable with count 2

💡 No more state changes, so no further hooks or DOM updates occur.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	After Step 6	Final
count.value	0	1	1	2	2	2

Key Moments - 3 Insights

Why does onBeforeUpdate log the new count value before the DOM changes?

Because onBeforeUpdate runs after Vue updates the reactive data but before the DOM, so count.value holds the new value while the DOM still shows the old value (see Step 2 and Step 5 in execution_table).

Why does onUpdated log the new count value after the DOM updates?

Because onUpdated runs after Vue has updated the DOM and reactive data, so count.value reflects the new value (see Step 4 and Step 7 in execution_table).

Does onBeforeUpdate run on the initial render?

No, onBeforeUpdate only runs before updates, not on the first render (see Step 1 where no hook is called).

Visual Quiz - 3 Questions

Look at the execution_table, what is count.value when onBeforeUpdate logs at Step 2?

A 1

B 0

C undefined

D 2

💡 Hint

Check the 'count.value' and 'Console Output' columns at Step 2 in execution_table.

At which step does the DOM first show the updated count value?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'DOM State' column to see when the count changes visually.

If increment() was not called again after Step 7, what would happen next?

A onBeforeUpdate would run again

B onUpdated would run again

C No hooks would run and DOM stays the same

D count.value resets to 0

💡 Hint

Refer to Step 8 in execution_table and the exit_note.

Concept Snapshot

Vue calls onBeforeUpdate before the DOM updates to let you react to upcoming changes.
onUpdated runs after the DOM updates to confirm changes happened.
Neither hook runs on the initial render.
Use these hooks to track or react to DOM changes safely.
They help manage side effects around reactive data updates.

Full Transcript

This visual trace shows how Vue's onBeforeUpdate and onUpdated hooks work during component updates. Initially, the component renders with count 0 and no hooks run. When increment() is called, it first updates the reactive count.value. Then onBeforeUpdate runs, logging the new count value before the DOM changes. Then Vue updates the DOM. After that, onUpdated runs, logging the new count value. This cycle repeats with each increment call. The key point is that onBeforeUpdate sees the new reactive state before the DOM changes, and onUpdated sees the new state after DOM changes. Neither hook runs on the first render. This helps developers run code safely around DOM updates. The variable tracker shows count.value changing from 0 to 2 over steps. The execution table details each step's state, hook calls, and console output. The quiz questions check understanding of when hooks run and what values they see.

Practice

1. What is the main difference between onBeforeUpdate and onUpdated in Vue?

easy

A. onUpdated runs only once when the component mounts.

B. onBeforeUpdate runs after the screen updates; onUpdated runs before.

C. Both run at the same time during the update.

D. onBeforeUpdate runs before the screen updates; onUpdated runs after.

Solution

1. Step 1: Understand lifecycle timing

   onBeforeUpdate triggers just before Vue updates the DOM to reflect data changes.

2. Step 2: Identify post-update hook

   onUpdated triggers right after the DOM has been updated.

3. Final Answer:

   onBeforeUpdate runs before the screen updates; onUpdated runs after. -> Option D

4. Quick Check:

   Before update = onBeforeUpdate, After update = onUpdated [OK]

Hint: Remember: before update = before screen changes, after update = after screen changes [OK]

Common Mistakes:

• Confusing the order of hooks
• Thinking both run at the same time
• Assuming onUpdated runs only once

2. Which of the following is the correct way to import and use onBeforeUpdate in a Vue 3 component?

easy

A. import { onBeforeUpdate } from 'vue'; onBeforeUpdate(() => { console.log('Before update'); });

B. import onBeforeUpdate from 'vue'; onBeforeUpdate(() => { console.log('Before update'); });

C. import { onBeforeUpdate } from 'vue'; onBeforeUpdate = () => { console.log('Before update'); };

D. import { onBeforeUpdate } from 'vue'; onBeforeUpdate.log('Before update');

Solution

1. Step 1: Check import syntax

   Vue exports onBeforeUpdate as a named export, so use curly braces in import.

2. Step 2: Use hook as a function

   Call onBeforeUpdate with a callback function to run code before update.

3. Final Answer:

   import { onBeforeUpdate } from 'vue'; onBeforeUpdate(() => { console.log('Before update'); }); -> Option A

4. Quick Check:

   Named import + callback function = import { onBeforeUpdate } from 'vue'; onBeforeUpdate(() => { console.log('Before update'); }); [OK]

Hint: Use curly braces for named imports and pass a function [OK]

Common Mistakes:

• Importing without curly braces
• Assigning hook to a variable instead of calling it
• Trying to call a method on the hook

3. Given this Vue 3 setup code, what will be logged to the console when count changes from 0 to 1?

import { ref, onBeforeUpdate, onUpdated } from 'vue';
export default {
  setup() {
    const count = ref(0);
    onBeforeUpdate(() => console.log('Before update:', count.value));
    onUpdated(() => console.log('After update:', count.value));
    return { count };
  }
}

medium

A. After update: 1
Before update: 0

B. Before update: 1
After update: 1

C. Before update: 0
After update: 1

D. Before update: 1
After update: 0

Solution

1. Step 1: Understand timing of hooks

   onBeforeUpdate runs after reactive data updated (to 1) but before DOM updates, so count.value is 1.

2. Step 2: Check onUpdated timing

   onUpdated runs after DOM updates, count.value is 1.

3. Final Answer:

   Before update: 1 After update: 1 -> Option B

4. Quick Check:

   Both hooks log new value [OK]

Hint: Both hooks log new value; they time relative to DOM update [OK]

Common Mistakes:

• Thinking onBeforeUpdate logs old value
• Mixing order of logs
• Thinking onBeforeUpdate runs after value changes

4. What is wrong with this Vue 3 code snippet using onBeforeUpdate and onUpdated?

import { ref, onBeforeUpdate, onUpdated } from 'vue';
export default {
  setup() {
    const count = ref(0);
    onBeforeUpdate = () => console.log('Before update');
    onUpdated(() => console.log('After update'));
    count.value++;
    return { count };
  }
}

medium

A. Assigning a function to onBeforeUpdate instead of calling it.

B. Missing import of onBeforeUpdate.

C. Using count.value++ instead of count++.

D. Not returning count from setup.

Solution

1. Step 1: Check hook usage

   The code assigns a function to onBeforeUpdate instead of calling it with a callback.

2. Step 2: Confirm other parts

   Imports are correct, count.value++ is valid, and count is returned properly.

3. Final Answer:

   Assigning a function to onBeforeUpdate instead of calling it. -> Option A

4. Quick Check:

   Hooks must be called, not reassigned [OK]

Hint: Call hooks with functions, don't assign them [OK]

Common Mistakes:

• Assigning hooks instead of calling
• Forgetting to import hooks
• Misusing ref value increment

5. You want to log the previous and current value of a reactive variable score every time it updates in a Vue 3 component. Which approach correctly uses onBeforeUpdate and onUpdated to achieve this?

import { ref, onBeforeUpdate, onUpdated } from 'vue';
export default {
  setup() {
    const score = ref(0);
    let oldScore = 0;

    onBeforeUpdate(() => {
      oldScore = score.value;
    });

    onUpdated(() => {
      console.log(`Score changed from ${oldScore} to ${score.value}`);
    });

    return { score };
  }
}

hard

A. This code correctly logs the previous and current score values on update.

B. This code will cause an infinite loop because score.value changes inside hooks.

C. This code logs the same value twice because oldScore is set to the new value in onBeforeUpdate.

D. This code misses importing onUpdated, so it will fail.

Solution

1. Step 1: Understand hook order

   onBeforeUpdate runs after data updated, so sets oldScore to new value.

2. Step 2: Confirm logging after update

   onUpdated logs new value for both old and current.

3. Final Answer:

   This code logs the same value twice because oldScore is set to the new value in onBeforeUpdate. -> Option C

4. Quick Check:

   onBeforeUpdate cannot capture old ref value; use watch() instead [OK]

Hint: Data updates before onBeforeUpdate; capture old values with watch(newVal, oldVal) [OK]

Common Mistakes:

• Thinking onBeforeUpdate sees old data value
• Expecting old/new to differ with this pattern
• Fearing infinite loops from hook logic