Why advanced reactivity matters in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive variable using Vue's Composition API.

Vue

import { ref } from 'vue';
const count = [1](0);

Drag options to blanks, or click blank then click option'

Awatch

Bcomputed

Creactive

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values

Using computed or watch incorrectly here

Use ref to create a reactive primitive value like a number.

2fill in blank

medium

Complete the code to watch the reactive variable and log its new value.

Vue

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal) => {
  console.log([1]);
});

Drag options to blanks, or click blank then click option'

AoldVal

BnewVal

Ccount

Dcount.value

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the reactive variable instead of the new value parameter

Using count.value inside the watcher callback

The watcher callback receives the new value as the first argument, here named newVal.

3fill in blank

hard

Fix the error in the code to correctly update a reactive object property.

Vue

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

Drag options to blanks, or click blank then click option'

Acount

Bstate

Ccount.value

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using .value on reactive object properties

Trying to update the whole reactive object instead of a property

When using reactive, access properties directly without .value.

4fill in blank

hard

Fill both blanks to create a computed property that doubles the count.

Vue

import { ref, computed } from 'vue';
const count = ref(5);
const double = computed(() => count[1][2]2);

Drag options to blanks, or click blank then click option'

A.value

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting .value to access the ref

Using addition or other wrong operators

Use .value to access the ref value and * to multiply by 2.

5fill in blank

hard

Fill all three blanks to create a reactive object with a nested property and update it.

Vue

import { reactive } from 'vue';
const state = reactive({ user: { name: [1] } });
function updateName(newName) {
  state.user.[2] = [3];
}

Drag options to blanks, or click blank then click option'

A'Alice'

Bname

CnewName

D'Bob'

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes incorrectly around property names

Confusing the property name and value

Initialize name with 'Alice', then update state.user.name to newName.

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