Reactive data with ref in Vue - Performance & Optimization

Performance: Reactive data with ref

MEDIUM IMPACT

This affects how efficiently Vue tracks and updates changes in reactive data, impacting rendering speed and responsiveness.

Managing a single reactive primitive value in Vue

Vue

import { ref } from 'vue';
const count = ref(0);

function increment() {
  count.value++;
}

ref is optimized for single primitive values, creating a simple reactive wrapper that triggers updates only when the value changes.

📈 Performance Gainreduces reactivity overhead and improves update speed

Managing a single reactive primitive value in Vue

Vue

const count = reactive({ value: 0 });

function increment() {
  count.value++;
}

Using reactive for a single primitive adds unnecessary proxy overhead and can cause more complex reactivity tracking.

📉 Performance Costadds extra proxy layers and triggers more dependency tracking than needed

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using reactive for primitive	More proxy layers, deeper tracking	Potentially more reflows if updates cascade	Higher paint cost due to extra updates	[X] Bad
Using ref for primitive	Minimal proxy, direct tracking	Single reflow per update	Lower paint cost with targeted updates	[OK] Good

Rendering Pipeline

When a ref's value changes, Vue's reactivity system schedules component updates. The browser then recalculates styles and layouts only for affected components, minimizing work.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution due to reactive dependency tracking

Core Web Vital Affected

INP

This affects how efficiently Vue tracks and updates changes in reactive data, impacting rendering speed and responsiveness.

Optimization Tips

1Use ref for single primitive reactive values to reduce overhead.

2Avoid using reactive for primitives to prevent unnecessary deep proxying.

3Changing a ref value triggers targeted component updates, improving responsiveness.

Performance Quiz - 3 Questions

Why is using ref better than reactive for a single primitive value in Vue?

A Because ref creates a simpler reactive wrapper with less overhead

B Because reactive does not track changes at all

C Because ref disables reactivity for primitives

D Because reactive only works with objects

DevTools: Performance

How to check: Record a performance profile while interacting with the component using ref. Look for minimal scripting time and fewer layout recalculations.

What to look for: Low JavaScript execution time and fewer layout thrashing events indicate good reactive data usage.