Shallow ref and shallow reactive in Vue - Performance & Optimization

Performance: Shallow ref and shallow reactive

MEDIUM IMPACT

This affects how Vue tracks changes and updates the DOM, impacting rendering speed and responsiveness.

Tracking changes on a large nested object where only top-level properties change

Vue

const state = shallowReactive({ user: { name: 'Alice', age: 30, address: { city: 'NY', zip: '10001' } } });

Vue tracks only top-level properties, ignoring nested changes, reducing watchers and update overhead.

📈 Performance Gainsingle reflow per top-level change, faster rendering

Tracking changes on a large nested object where only top-level properties change

Vue

const state = reactive({ user: { name: 'Alice', age: 30, address: { city: 'NY', zip: '10001' } } });

Vue deeply tracks all nested properties, causing many watchers and slow updates even if only top-level changes occur.

📉 Performance Costtriggers multiple reflows and recalculations on any nested change

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Deep reactive/ref	Many nested watchers	Multiple reflows on nested changes	High paint cost due to frequent updates	[X] Bad
Shallow reactive/ref	Watchers only on top-level	Single reflow per top-level change	Lower paint cost, fewer updates	[OK] Good

Rendering Pipeline

Vue's reactivity system tracks changes and triggers updates that flow through style calculation, layout, paint, and composite stages. Shallow refs/reactive reduce the number of tracked dependencies, lowering the cost in these stages.

→Dependency Tracking

→Style Calculation

→Layout

→Paint

⚠️ BottleneckDependency Tracking and Layout due to deep watchers and reflows

Core Web Vital Affected

INP

This affects how Vue tracks changes and updates the DOM, impacting rendering speed and responsiveness.

Optimization Tips

1Use shallowReactive or shallowRef when you only need to track top-level changes.

2Avoid deep reactive tracking on large or complex nested objects to reduce reflows.

3Check performance with DevTools to identify expensive reactive updates.

Performance Quiz - 3 Questions

What is the main performance benefit of using shallowReactive over reactive in Vue?

A It tracks only top-level properties, reducing watchers and reflows

B It automatically caches computed properties

C It disables reactivity completely

D It increases bundle size for better debugging

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long tasks caused by reactive updates and frequent layout recalculations.

What to look for: High number of reactive dependency recalculations and layout thrashing indicate deep reactive overhead; fewer and shorter tasks indicate shallow reactive efficiency.