onUpdated and onBeforeUpdate in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Understanding onBeforeUpdate timing

In a Vue 3 component using the Composition API, when does the onBeforeUpdate lifecycle hook run?

Choose the correct description of its timing relative to the DOM update.

A It runs right before the component's reactive data changes.

B It runs after the DOM has been updated with the new data.

C It runs only once when the component is first created.

D It runs right before the DOM updates but after reactive data changes.

💡 Hint

Think about when Vue needs to prepare the DOM before showing changes.

The onBeforeUpdate hook runs after reactive data changes but before the DOM updates. This lets you perform actions or checks before the DOM reflects the new state.

❓ component_behavior

intermediate

Effect of onUpdated hook on DOM

What happens when the onUpdated lifecycle hook runs in a Vue 3 component?

Choose the correct statement about its effect on the DOM.

A It runs after the DOM has updated and can access the new DOM state.

B It runs before the DOM updates and can cancel the update.

C It runs only if the component's props change, not reactive data.

D It runs before the component is mounted.

💡 Hint

Consider when you want to read or manipulate the updated DOM.

The onUpdated hook runs after the DOM updates, so you can safely access or manipulate the new DOM state.

❓ state_output

advanced

Output order of onBeforeUpdate and onUpdated

Given this Vue 3 component code, what is the order of console logs when the button is clicked?

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

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

When the button triggers increment(), what logs appear and in what order?

A Updated, Before Update

B Before Update, Updated

C Before Update only

D Updated only

💡 Hint

Remember the lifecycle hooks run around the DOM update.

When reactive data changes, onBeforeUpdate runs first before the DOM updates, then onUpdated runs after the DOM updates.

🔧 Debug

advanced

Why does onUpdated not run?

A developer writes this Vue 3 component:

import { ref, onUpdated } from 'vue';

export default {
  setup() {
    const message = ref('Hello');
    onUpdated(() => console.log('Component updated'));
    function changeMessage() {
      message.value = 'Hi';
    }
    return { message, changeMessage };
  }
}

But when changeMessage() is called, the console log never appears. What is the most likely reason?

A The component is not mounted, so lifecycle hooks don't run.

B The <code>onUpdated</code> hook only runs on prop changes, not reactive refs.

C The component's template does not use <code>message</code>, so no DOM update occurs.

D The <code>message</code> ref is not reactive, so no update triggers.

💡 Hint

Think about when Vue triggers DOM updates.

If the reactive data changes but is not used in the template, Vue does not update the DOM, so onUpdated does not run.

🧠 Conceptual

expert

Distinguishing onBeforeUpdate and onUpdated use cases

Which scenario best fits using onBeforeUpdate instead of onUpdated in a Vue 3 component?

A You want to save the current DOM state before it changes for comparison.

B You want to fetch new data after the component updates.

C You want to measure the DOM size after it changes to adjust layout.

D You want to initialize data when the component mounts.

💡 Hint

Think about when you need to capture the old state before changes.

onBeforeUpdate runs before the DOM changes, so it's ideal to capture the current DOM state before updates. onUpdated runs after the DOM changes.

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