Getters for computed store values in Vue - Performance & Optimization

Performance: Getters for computed store values

MEDIUM IMPACT

This affects how quickly the UI updates when store data changes and how much CPU is used during reactive computations.

Calculating derived state from store data for UI rendering

Vue

const store = reactive({ items: [1, 2, 3] });
const doubled = computed(() => store.items.map(x => x * 2)); // cached until items change

Computed caches the result and only recalculates when dependencies change, reducing CPU work.

📈 Performance Gainsingle recalculation per dependency change, smoother UI updates

Calculating derived state from store data for UI rendering

Vue

const store = reactive({ items: [1, 2, 3] });
const doubled = () => store.items.map(x => x * 2); // recalculates on every access

The function recalculates the doubled array every time it is accessed, causing extra CPU work and slower UI updates.

📉 Performance Costtriggers multiple recalculations per render, increasing CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Non-computed getter function	Minimal	None directly	Low but CPU-heavy	[X] Bad
Computed getter with caching	Minimal	None directly	Low and efficient	[OK] Good

Rendering Pipeline

Getters for computed store values are evaluated during the reactive update phase before the DOM updates. They reduce unnecessary recalculations by caching results until dependencies change.

→Reactive Dependency Tracking

→JavaScript Execution

→DOM Update

⚠️ BottleneckJavaScript Execution when recalculations happen too often

Core Web Vital Affected

INP

This affects how quickly the UI updates when store data changes and how much CPU is used during reactive computations.

Optimization Tips

1Use Vue's computed() for derived store values to cache results.

2Avoid plain functions that recalculate on every access to reduce CPU load.

3Monitor reactive dependencies to prevent unnecessary recomputations.

Performance Quiz - 3 Questions

Why are computed getters better for derived store values than plain functions?

A They run faster because they use less memory

B They cache results and recalculate only when dependencies change

C They automatically update the DOM without Vue's reactivity

D They prevent any JavaScript execution on updates

DevTools: Performance

How to check: Record a performance profile while interacting with the UI that uses store getters. Look for repeated recalculations in the JS call stack.

What to look for: High CPU usage in getter functions indicates missing caching; efficient computed getters show fewer recalculations.