onUpdated and onBeforeUpdate in Vue - Performance & Optimization

Performance: onUpdated and onBeforeUpdate

MEDIUM IMPACT

These lifecycle hooks affect the rendering performance by running code before and after the DOM updates, impacting interaction responsiveness and visual stability.

Running expensive computations inside onUpdated or onBeforeUpdate hooks

Vue

import { onBeforeUpdate, onUpdated, nextTick } from 'vue';
onBeforeUpdate(() => {
  // minimal or no work here
});
onUpdated(async () => {
  await nextTick();
  // defer heavy work or use requestIdleCallback
});

Deferring heavy work until after the DOM is stable or offloading it prevents blocking the main thread during updates.

📈 Performance GainReduces blocking to under 10ms, improving interaction responsiveness and reducing layout shifts.

Running expensive computations inside onUpdated or onBeforeUpdate hooks

Vue

import { onBeforeUpdate, onUpdated } from 'vue';
onBeforeUpdate(() => {
  for (let i = 0; i < 1000000; i++) { /* heavy loop */ }
});
onUpdated(() => {
  // heavy DOM queries or recalculations
  document.querySelectorAll('.item').forEach(el => { /* complex logic */ });
});

Heavy synchronous work blocks the browser from painting updates quickly, causing slow interaction and possible layout shifts.

📉 Performance CostBlocks rendering for 50-100ms per update, causing janky UI and increased INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous work in onBeforeUpdate/onUpdated	Multiple DOM queries	Triggers multiple reflows	High paint cost due to layout thrashing	[X] Bad
Minimal work and deferred heavy tasks	No extra DOM queries during update	Single reflow per update cycle	Low paint cost, smooth rendering	[OK] Good

Rendering Pipeline

onBeforeUpdate runs before the DOM updates, allowing preparation but blocking layout if heavy. onUpdated runs after DOM updates, where heavy work can delay painting or cause layout thrashing.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution blocking Layout and Paint

Core Web Vital Affected

INP, CLS

These lifecycle hooks affect the rendering performance by running code before and after the DOM updates, impacting interaction responsiveness and visual stability.

Optimization Tips

1Keep onBeforeUpdate and onUpdated hooks lightweight to avoid blocking rendering.

2Defer heavy computations using nextTick or idle callbacks after DOM updates.

3Avoid DOM queries or manipulations inside these hooks that cause layout thrashing.

Performance Quiz - 3 Questions

What is the main performance risk of running heavy synchronous code inside onBeforeUpdate?

A It blocks the browser from painting updates quickly, causing slow UI response.

B It increases the initial page load time significantly.

C It causes network requests to delay.

D It improves rendering speed by preparing data early.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long tasks during the update phase and check if onBeforeUpdate or onUpdated hooks cause blocking.

What to look for: Long JavaScript execution bars during update, delayed frame rendering, and layout thrashing markers indicate poor performance.

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