Why advanced reactivity matters in Vue

Introduction

Advanced reactivity helps your app update only what needs to change. This makes your app faster and smoother.

When your app has many parts that change based on user actions

When you want to avoid slow updates and keep the app feeling quick

When you need to track changes deeply inside objects or arrays

When you want to write less code but still keep UI in sync

When building complex interfaces that depend on many data points

Syntax

Vue

import { reactive, ref, computed, watch } from 'vue';

const state = reactive({ count: 0 });
const doubled = computed(() => state.count * 2);

watch(() => state.count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

reactive makes an object reactive so Vue tracks its changes.

computed creates a value that updates automatically when dependencies change.

Examples

Using ref for a simple reactive number.

Vue

const count = ref(0);

function increment() {
  count.value++;
}

Using reactive for an object so Vue tracks changes inside it.

Vue

const state = reactive({ name: 'Alice', age: 30 });

state.age = 31;

computed automatically updates when count changes.

Vue

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

watch runs code when a reactive value changes.

Vue

watch(() => state.age, (newAge, oldAge) => {
  console.log(`Age changed from ${oldAge} to ${newAge}`);
});

Sample Program

This Vue component shows a count and its doubled value. When you click the button, the count increases and the doubled value updates automatically thanks to reactivity.

Vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="increment">Add 1</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

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

function increment() {
  count.value++;
}
</script>

Important Notes

Advanced reactivity helps avoid updating the whole page, only the parts that changed.

Using ref and reactive properly keeps your code clean and efficient.

Watchers let you react to changes for side effects like logging or fetching data.

Summary

Advanced reactivity keeps your app fast by updating only what changes.

Use ref, reactive, computed, and watch to manage reactive data.

This makes your app easier to build and maintain.

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