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.