Ref and reactive in Composition API in Vue - Performance & Optimization

Performance: Ref and reactive in Composition API

MEDIUM IMPACT

This affects how Vue tracks changes and updates the DOM efficiently during user interactions.

Managing reactive state for a simple counter and a complex object

Vue

import { ref, reactive } from 'vue';
const count = ref(0);
const user = reactive({ name: 'Alice', age: 30 });

Using ref for primitives keeps reactivity simple and efficient, while reactive is used for objects to track nested changes properly.

📈 Performance GainReduces reactivity overhead and avoids unnecessary re-renders, improving input responsiveness.

Managing reactive state for a simple counter and a complex object

Vue

import { reactive } from 'vue';
const count = reactive({ value: 0 });
const user = reactive({ name: 'Alice', age: 30 });

Using reactive for a single primitive value wraps it in an object, causing more complex reactivity tracking and unnecessary component updates.

📉 Performance CostTriggers more reactivity overhead and can cause extra component re-renders.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using reactive for primitives	More proxy layers	Multiple re-renders	Higher paint cost	[X] Bad
Using ref for primitives	Minimal proxy layers	Single re-render	Lower paint cost	[OK] Good
Replacing nested reactive objects	Triggers full reactivity recalculation	Multiple reflows	Higher paint cost	[X] Bad
Mutating nested reactive properties	Fine-grained updates	Single reflow	Lower paint cost	[OK] Good

Rendering Pipeline

Ref and reactive create reactive proxies that Vue uses to detect changes. When a reactive value changes, Vue schedules component updates, affecting style calculation, layout, and paint.

→Reactivity Tracking

→Component Update

→Layout

→Paint

⚠️ BottleneckComponent Update stage is most expensive due to re-rendering triggered by reactive changes.

Core Web Vital Affected

INP

This affects how Vue tracks changes and updates the DOM efficiently during user interactions.

Optimization Tips

1Use ref for primitive values to keep reactivity simple and efficient.

2Use reactive for objects to track nested property changes precisely.

3Mutate nested reactive properties directly instead of replacing objects to minimize re-renders.

Performance Quiz - 3 Questions

Which Vue Composition API feature is best for tracking a single number to minimize reactivity overhead?

A computed

B ref

C reactive

D watch

DevTools: Performance

How to check: Record a performance profile while interacting with the component; look for frequent component re-renders and long scripting times.

What to look for: High scripting time and many component updates indicate inefficient reactive usage; fewer updates mean better performance.