Why reactivity is Vue's core concept - Performance Evidence

Performance: Why reactivity is Vue's core concept

HIGH IMPACT

Reactivity affects how quickly the UI updates in response to data changes, impacting interaction responsiveness and visual stability.

Updating UI when data changes

Vue

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal) => {
  // Vue updates DOM reactively and efficiently
});

Vue tracks dependencies and updates only affected DOM parts automatically, batching changes to reduce work.

📈 Performance GainSingle reflow per batch of changes, smoother UI updates, and better input responsiveness

Updating UI when data changes

Vue

const data = { count: 0 };
function updateUI() {
  document.getElementById('count').textContent = data.count;
}
// Manually call updateUI() after every data change

Manually updating the DOM causes repeated full updates and can miss changes, leading to inefficient rendering and potential UI lag.

📉 Performance CostTriggers multiple reflows and repaints per update, blocking rendering for tens of milliseconds on frequent changes

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual DOM updates on data change	Many direct DOM writes	Multiple reflows per update	High paint cost due to full updates	[X] Bad
Vue reactive refs with watch	Minimal DOM writes via reactive system	Single reflow per batch	Low paint cost with targeted updates	[OK] Good

Rendering Pipeline

Vue's reactivity system tracks data dependencies during rendering. When data changes, Vue schedules minimal DOM updates, avoiding full re-layouts.

→Dependency Tracking

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to unnecessary DOM updates

Core Web Vital Affected

INP

Reactivity affects how quickly the UI updates in response to data changes, impacting interaction responsiveness and visual stability.

Optimization Tips

1Use Vue's reactive refs and computed properties to track data changes efficiently.

2Avoid manual DOM manipulation; let Vue handle updates to minimize reflows.

3Batch data changes to reduce layout recalculations and paint costs.

Performance Quiz - 3 Questions

What is the main performance benefit of Vue's reactivity system?

A It updates only the parts of the DOM that depend on changed data.

B It reloads the entire page when data changes.

C It delays all updates until the user stops interacting.

D It disables DOM updates to improve speed.

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for long scripting or layout tasks caused by data updates.

What to look for: Frequent layout thrashing or long scripting times indicate poor reactivity; smooth, short tasks indicate efficient reactive updates.