Why advanced reactivity matters in Vue - See It in Action

Why advanced reactivity matters

📖 Scenario: You are building a small Vue app that tracks a list of tasks with their completion status. You want to see how Vue's advanced reactivity system helps keep the UI updated automatically when the data changes.

🎯 Goal: Create a Vue 3 component using the Composition API that holds a reactive list of tasks. Add a computed property to count completed tasks. Update the task status and see the UI update automatically without manual DOM changes.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive array of task objects with ref or reactive

Add a computed property that counts how many tasks are completed

Add a method to toggle a task's completion status

Render the list of tasks with checkboxes bound to their completion status

Display the count of completed tasks dynamically

💡 Why This Matters

🌍 Real World

Task lists and to-do apps are common in daily life. Using Vue's reactivity makes building these apps easier and more reliable.

💼 Career

Understanding Vue's reactivity system is essential for frontend developers working with modern web apps to create responsive and maintainable user interfaces.

1

Set up the reactive tasks list

Create a reactive array called tasks with these exact objects: { id: 1, title: 'Buy groceries', completed: false }, { id: 2, title: 'Walk the dog', completed: true }, and { id: 3, title: 'Read a book', completed: false }. Use Vue's ref or reactive to make it reactive.

Vue

// Create a reactive array called tasks with the given objects
// Your code here

Hint

Use ref from Vue to create a reactive array. Put the exact task objects inside the array.

2

Add a computed property for completed count

Import Vue's computed and create a computed property called completedCount that returns the number of tasks in tasks.value where completed is true.

Vue

import { ref, computed } from 'vue'

const tasks = ref([
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Read a book', completed: false }
])

// Create a computed property called completedCount
// Your code here

Hint

Use computed to create a reactive count that updates when tasks change.

3

Add a method to toggle task completion

Create a function called toggleTask that takes a taskId parameter. Inside, find the task in tasks.value with matching id and toggle its completed property from true to false or vice versa.

Vue

import { ref, computed } from 'vue'

const tasks = ref([
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Read a book', completed: false }
])

const completedCount = computed(() => tasks.value.filter(task => task.completed).length)

// Create a function toggleTask(taskId) to toggle completed status
// Your code here

Hint

Use find on tasks.value to locate the task, then flip its completed boolean.

4

Render tasks and completed count in template

Add a template that uses v-for to list each task with a checkbox bound to task.completed using :checked="task.completed". When the checkbox changes, call toggleTask(task.id). Below the list, display the text Completed Tasks: {{ completedCount }}.

Vue

import { ref, computed } from 'vue'

const tasks = ref([
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Read a book', completed: false }
])

const completedCount = computed(() => tasks.value.filter(task => task.completed).length)

function toggleTask(taskId) {
  const task = tasks.value.find(t => t.id === taskId)
  if (task) {
    task.completed = !task.completed
  }
}



  
  

Hint

Use v-for to loop tasks, bind checkbox with :checked="task.completed" and call toggleTask on @change. Show completed count below.

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