Computed properties for derived state in Vue - Performance & Optimization

Performance: Computed properties for derived state

MEDIUM IMPACT

This affects how efficiently the UI updates when underlying data changes, impacting rendering speed and responsiveness.

Calculating a value derived from reactive data for display

Vue

const doubled = computed(() => count.value * 2);

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

📈 Performance Gainsingle reactive update and minimal re-renders

Calculating a value derived from reactive data for display

Vue

const doubled = ref(0);
watch(() => count.value, (newVal) => {
  doubled.value = newVal * 2;
});

Manually updating derived state causes extra watchers and can trigger multiple re-renders.

📉 Performance Costtriggers multiple reactive updates and re-renders on each change

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual watcher updating derived state	Multiple reactive triggers	Multiple reflows per update	Higher paint cost due to redundant updates	[X] Bad
Computed property for derived state	Single reactive trigger	Single reflow per update	Lower paint cost due to caching	[OK] Good

Rendering Pipeline

Computed properties run during the reactive update phase before rendering. They cache results to avoid redundant recalculations, reducing layout and paint work.

→Reactive Update

→Style Calculation

→Layout

→Paint

⚠️ BottleneckExcessive recalculations in reactive updates cause unnecessary layout and paint.

Core Web Vital Affected

INP

This affects how efficiently the UI updates when underlying data changes, impacting rendering speed and responsiveness.

Optimization Tips

1Use computed properties to cache derived state and avoid redundant recalculations.

2Avoid manual watchers for derived state to reduce reactive update overhead.

3Efficient computed properties improve UI responsiveness and reduce unnecessary re-renders.

Performance Quiz - 3 Questions

Why are computed properties better than manual watchers for derived state in Vue?

A They cache results and only recalculate when dependencies change

B They always recalculate on every render

C They block the main thread longer

D They increase bundle size significantly

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for repeated recalculations or reactive updates in the flame chart.

What to look for: Fewer recalculations and shorter update times indicate efficient computed property usage.