Reactive objects with reactive in Vue - Performance & Optimization

Performance: Reactive objects with reactive

MEDIUM IMPACT

This affects how Vue tracks changes in objects and updates the DOM efficiently.

Tracking changes in a complex object to update UI

Vue

const state = reactive({ user: { name: 'Alice', age: 30 } });
// Use Vue's reactive system properly; mutations are tracked efficiently
state.user.name = 'Bob';

Vue's reactive system tracks nested changes efficiently with reactive objects, minimizing unnecessary updates.

📈 Performance GainSingle reactivity update triggers one DOM patch

Tracking changes in a complex object to update UI

Vue

const state = ref({ user: { name: 'Alice', age: 30 } });
// Directly mutating nested properties without reactivity helpers
state.value.user.name = 'Bob';

Mutating nested properties directly can cause Vue to track changes inefficiently if not handled carefully, leading to extra re-renders.

📉 Performance CostTriggers multiple reactivity checks and potentially multiple DOM updates

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct nested mutation without optimization	Multiple DOM updates	Multiple reflows	High paint cost	[X] Bad
Reactive object with minimal nested changes	Single DOM update	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

When a reactive object's property changes, Vue's reactivity system detects it and schedules a component update. This update triggers style recalculation, layout, paint, and composite steps in the browser.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive due to DOM updates triggered by reactive changes.

Core Web Vital Affected

INP

This affects how Vue tracks changes in objects and updates the DOM efficiently.

Optimization Tips

1Use reactive() to track object changes efficiently.

2Avoid frequent deep nested mutations to reduce re-renders.

3Keep reactive objects as small and flat as possible.

Performance Quiz - 3 Questions

What is the main performance benefit of using Vue's reactive() for objects?

A It automatically batches all JavaScript code.

B It tracks nested property changes efficiently to minimize DOM updates.

C It prevents any DOM updates from happening.

D It increases the bundle size significantly.

DevTools: Performance

How to check: Record a performance profile while interacting with the component that uses reactive objects. Look for multiple layout or paint events triggered by reactive changes.

What to look for: Check if reactive changes cause multiple reflows or paints; fewer and shorter events indicate better performance.