Computed in Composition API in Vue - Performance & Optimization

Performance: Computed in Composition API

MEDIUM IMPACT

This affects how efficiently reactive data updates trigger UI changes and how often expensive calculations run.

Calculating a derived value from reactive state in Vue Composition API

Vue

import { ref, computed } from 'vue';
const count = ref(0);
const double = computed(() => count.value * 2);

Computed caches the result and only recalculates when count changes, reducing CPU work and improving responsiveness.

📈 Performance GainAvoids repeated recalculations, improving INP by reducing CPU blocking during interactions.

Calculating a derived value from reactive state in Vue Composition API

Vue

import { ref } from 'vue';
const count = ref(0);
function double() {
  return count.value * 2;
}

The function recalculates the value every time it is called, even if count hasn't changed, causing unnecessary CPU work.

📉 Performance CostTriggers recalculation on every access, increasing CPU usage and slowing interaction responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using plain functions for derived state	No direct DOM ops	Triggers recalculation on every access	Minimal paint but CPU heavy	[X] Bad
Using computed properties	No direct DOM ops	Recalculates only on dependency change	Minimal paint and CPU efficient	[OK] Good

Rendering Pipeline

Computed properties are evaluated during the reactive update cycle before the DOM updates. They help minimize layout recalculations by caching values.

→JavaScript Execution

→Reactive Dependency Tracking

→DOM Update

⚠️ BottleneckJavaScript Execution when recalculations happen unnecessarily

Core Web Vital Affected

INP

This affects how efficiently reactive data updates trigger UI changes and how often expensive calculations run.

Optimization Tips

1Use computed properties to cache derived reactive data.

2Avoid plain functions for reactive calculations to reduce CPU overhead.

3Computed properties improve interaction responsiveness by minimizing recalculations.

Performance Quiz - 3 Questions

Why are computed properties in Vue Composition API better for performance than plain functions for derived state?

A They run on every render to ensure fresh data.

B They delay calculations until after DOM updates.

C They cache results and only recalculate when dependencies change.

D They prevent any reactive updates from triggering.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for repeated JavaScript recalculations of derived values.

What to look for: Check if computed properties reduce the number of recalculations compared to plain functions, improving interaction responsiveness.