Watch vs computed decision in Vue - Performance Comparison

Performance: Watch vs computed decision

MEDIUM IMPACT

This affects how efficiently Vue updates the DOM and manages reactive data changes, impacting interaction responsiveness and rendering speed.

Deriving a value from reactive data to display in the template

Vue

const derived = computed(() => props.value * 2);

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

📈 Performance GainSingle reactive update with cached value, fewer DOM patches

Deriving a value from reactive data to display in the template

Vue

watch(() => props.value, (newVal) => {
  derived.value = newVal * 2;
});

Triggers side effects and updates manually, causing extra reactivity overhead and potential multiple DOM updates.

📉 Performance CostTriggers multiple reactivity updates and possible extra DOM patches

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using computed for derived data	Minimal reactive updates	Single reflow per change	Low paint cost	[OK] Good
Using watch to update derived data manually	Multiple reactive updates	Multiple reflows possible	Higher paint cost	[X] Bad
Expensive operations inside computed	Blocks reactive updates	Blocks reflow	High paint cost	[X] Bad
Expensive operations inside watch	Runs after reactive update	May cause extra reflows	Moderate paint cost	[!] OK

Rendering Pipeline

Reactive data changes trigger dependency tracking. Computed properties recalculate during the 'Reactive Update' phase, causing minimal layout recalculations. Watchers run after updates and can trigger additional side effects, potentially causing extra layout and paint cycles.

→Reactive Update

→Layout

→Paint

⚠️ BottleneckExtra side effects in watchers can cause multiple layout recalculations and paints.

Core Web Vital Affected

INP

This affects how efficiently Vue updates the DOM and manages reactive data changes, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Use computed properties for pure derived reactive data to leverage caching.

2Use watchers only for side effects or expensive operations triggered by reactive changes.

3Avoid expensive computations inside computed properties to keep UI responsive.

Performance Quiz - 3 Questions

Which pattern is best for deriving reactive data that updates the UI?

A Use methods called in the template

B Use watchers to update derived data manually

C Use computed properties for derived data

D Use setTimeout to update data

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long tasks or multiple reactive updates triggered by computed or watch.

What to look for: Check for multiple recalculations or layout thrashing caused by watchers updating reactive data unnecessarily.