nextTick for DOM update timing in Vue - Performance & Optimization

Performance: nextTick for DOM update timing

MEDIUM IMPACT

Controls when DOM updates happen after reactive data changes, affecting rendering timing and user interaction smoothness.

Waiting for DOM updates after reactive data changes before running code that depends on updated DOM

Vue

this.someData = newValue;
this.$nextTick(() => {
  const height = this.$refs.element.clientHeight;
});

Waits for Vue to batch and apply DOM updates before reading layout, reducing forced reflows.

📈 Performance GainSingle reflow after batch update, smoother rendering

Waiting for DOM updates after reactive data changes before running code that depends on updated DOM

Vue

this.someData = newValue;
// Immediately access DOM that depends on someData
const height = this.$refs.element.clientHeight;

Accessing DOM immediately after data change reads stale layout because DOM update is async, causing layout thrashing if forced reflow occurs.

📉 Performance CostTriggers multiple reflows if forced layout reads happen repeatedly

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Immediate DOM read after data change	Multiple reads and writes	Multiple forced reflows	High paint cost due to layout thrashing	[X] Bad
Using nextTick to wait for DOM update	Batched DOM writes then reads	Single reflow after batch	Lower paint cost, smoother rendering	[OK] Good

Rendering Pipeline

Reactive data changes schedule DOM updates asynchronously. Using nextTick defers code execution until after DOM updates and style recalculations complete, preventing forced synchronous layouts.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout (forced synchronous reflows caused by immediate DOM reads after data changes)

Core Web Vital Affected

INP

Controls when DOM updates happen after reactive data changes, affecting rendering timing and user interaction smoothness.

Optimization Tips

1Always use nextTick to run code after DOM updates to avoid forced synchronous layouts.

2Avoid reading layout properties immediately after reactive data changes without nextTick.

3Batch DOM writes and reads to minimize reflows and improve interaction responsiveness.

Performance Quiz - 3 Questions

What is the main benefit of using nextTick after changing reactive data in Vue?

A It immediately forces the DOM to update synchronously.

B It delays data changes to reduce CPU usage.

C It waits for DOM updates to finish before running code that depends on the updated DOM.

D It prevents any DOM updates from happening.

DevTools: Performance

How to check: Record a performance profile while triggering the reactive data change and DOM read. Look for forced synchronous layouts and layout thrashing in the flame chart.

What to look for: Multiple Layout events clustered around the data change indicate forced reflows; a single Layout event after nextTick usage indicates better performance.