Why advanced reactivity matters in Vue - Performance Evidence

Performance: Why advanced reactivity matters

HIGH IMPACT

This affects how fast the page updates when data changes, impacting user interaction smoothness and rendering speed.

Updating UI efficiently when data changes

Vue

const count = ref(0);
const items = ref([]);

watch(count, () => {
  // only runs when count changes
  efficientUpdate();
});

Watching specific reactive references limits updates to relevant changes only, reducing wasted work.

📈 Performance Gainsingle reflow and repaint per relevant change, improving responsiveness

Updating UI efficiently when data changes

Vue

const state = reactive({ count: 0, items: [] });

watch(state, () => {
  // runs on any change, even unrelated
  expensiveUpdate();
});

Watching the entire state object triggers updates even when unrelated properties change, causing extra work.

📉 Performance Costtriggers multiple unnecessary reflows and repaints per unrelated change

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Watching entire reactive object	High (many nodes affected)	Multiple reflows per unrelated change	High paint cost due to frequent updates	[X] Bad
Watching specific refs or computed	Low (only affected nodes)	Single reflow per relevant change	Low paint cost with minimal updates	[OK] Good

Rendering Pipeline

Advanced reactivity selectively triggers component updates only when necessary, minimizing layout recalculations and repaints.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to unnecessary updates

Core Web Vital Affected

INP

This affects how fast the page updates when data changes, impacting user interaction smoothness and rendering speed.

Optimization Tips

1Watch only the reactive data you need to update UI efficiently.

2Use refs and computed properties to limit component updates.

3Avoid watching large reactive objects to prevent unnecessary reflows.

Performance Quiz - 3 Questions

What is the main performance benefit of using fine-grained reactive references in Vue?

A It increases bundle size but improves style calculation

B Only components depending on changed data update, reducing unnecessary work

C All components update at once for consistency

D It delays updates to batch them later

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for frequent layout and paint events triggered by reactive updates.

What to look for: Check if updates cause many layout recalculations or if they are limited to necessary components only.

Practice

1. Why is advanced reactivity important in Vue applications?

easy

A. It forces the entire app to reload on every change.

B. It updates only the parts of the app that change, making it faster.

C. It disables data updates to prevent errors.

D. It requires manual DOM updates for every change.

Solution

1. Step 1: Understand reactivity basics

   Reactivity means Vue tracks data changes and updates the UI accordingly.

2. Step 2: Recognize advanced reactivity benefits

   Advanced reactivity updates only changed parts, improving speed and efficiency.

3. Final Answer:

   It updates only the parts of the app that change, making it faster. -> Option B

4. Quick Check:

   Advanced reactivity = selective updates = It updates only the parts of the app that change, making it faster. [OK]

Hint: Advanced reactivity means updating only changed parts [OK]

Common Mistakes:

• Thinking the whole app reloads on every change
• Believing reactivity disables updates
• Assuming manual DOM updates are needed

2. Which of the following is the correct way to create a reactive reference in Vue 3?

easy

A. const count = ref(0);

B. const count = computed(0);

C. const count = reactive(0);

D. const count = watch(0);

Solution

1. Step 1: Identify Vue 3 reactive APIs

   Vue 3 uses ref to create reactive primitive values like numbers.

2. Step 2: Match correct usage

   reactive is for objects, computed for derived values, watch for side effects.

3. Final Answer:

   const count = ref(0); -> Option A

4. Quick Check:

   Use ref() for reactive primitives = const count = ref(0); [OK]

Hint: Use ref() for single reactive values, reactive() for objects [OK]

Common Mistakes:

• Using reactive() for primitive values
• Confusing computed() with ref()
• Trying to watch() to create reactive data

3. Given the code below, what will be logged to the console?

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal) => {
  console.log('Count changed to', newVal);
});
count.value = 5;
count.value = 10;

medium

A. Count changed to 0
Count changed to 5
Count changed to 10

B. No output

C. Count changed to 5
Count changed to 10

D. Count changed to 10

Solution

1. Step 1: Understand watch behavior

   The watcher runs only when the reactive value changes, not on initial setup.

2. Step 2: Trace value changes

   Setting count.value to 5 triggers the watcher logging 'Count changed to 5'. Then setting to 10 triggers 'Count changed to 10'.

3. Final Answer:

   Count changed to 5 Count changed to 10 -> Option C

4. Quick Check:

   Watch triggers on changes, not initial = Count changed to 5 Count changed to 10 [OK]

Hint: Watch logs only on value changes, not on initial ref creation [OK]

Common Mistakes:

• Expecting watch to run immediately on setup
• Thinking initial value triggers watch
• Missing that watch reacts only to changes

4. What is wrong with this Vue 3 reactive code snippet?

import { reactive } from 'vue';
const state = reactive({ count: 0 });
function increment() {
  state.count++;
}
increment();
console.log(state.count);

medium

A. You cannot increment reactive properties directly.

B. You must use state.count.value to access reactive properties.

C. The reactive object must be wrapped in ref().

D. There is no error; the code works correctly.

Solution

1. Step 1: Review reactive object usage

   Using reactive creates a reactive object whose properties can be accessed and mutated directly.

2. Step 2: Check increment function

   Incrementing state.count directly is valid and updates the reactive state.

3. Final Answer:

   There is no error; the code works correctly. -> Option D

4. Quick Check:

   reactive objects allow direct property mutation = There is no error; the code works correctly. [OK]

Hint: reactive() objects allow direct property changes without .value [OK]

Common Mistakes:

• Confusing reactive() with ref() usage
• Trying to use .value on reactive object properties
• Thinking reactive properties are immutable

5. You want to create a computed property that returns the double of a reactive count. Which code correctly uses Vue 3 advanced reactivity to achieve this?

import { ref, computed } from 'vue';
const count = ref(3);
const doubleCount = ???
console.log(doubleCount.value);

hard

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

B. const doubleCount = computed(count * 2);

C. const doubleCount = ref(count.value * 2);

D. const doubleCount = reactive(() => count.value * 2);

Solution

1. Step 1: Understand computed properties

   Computed properties use a function returning a value based on reactive data and update automatically.

2. Step 2: Identify correct computed syntax

   The correct syntax is computed(() => count.value * 2) to create a reactive doubleCount.

3. Final Answer:

   const doubleCount = computed(() => count.value * 2); -> Option A

4. Quick Check:

   Use computed with a function returning reactive value = const doubleCount = computed(() => count.value * 2); [OK]

Hint: Use computed(() => reactiveValue.value * 2) for derived data [OK]

Common Mistakes:

• Passing expression directly to computed without a function
• Using ref() instead of computed() for derived values
• Trying to use reactive() for computed properties