Why advanced reactivity matters in Vue - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue component display after clicking the button twice?

Consider this Vue 3 component using the Composition API. What will be the displayed count after clicking the button two times?

Vue

<template>
  <button @click="increment">Click me</button>
  <p>Count: {{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

A Count: 0

B Count: 1

C Count: 2

D Count: undefined

💡 Hint

Remember that ref creates a reactive value that updates the UI when changed.

Each click calls increment, which increases count.value by 1. After two clicks, count is 2, so the displayed text is 'Count: 2'.

❓ state_output

intermediate

What is the output of this reactive object update?

Given this Vue 3 code snippet, what will be the value of state.message after calling updateMessage()?

Vue

<script setup>
import { reactive } from 'vue'
const state = reactive({ message: 'Hello' })
function updateMessage() {
  state.message = 'Hi'
}
updateMessage()
</script>

A 'Hi'

B 'Hello'

C undefined

D null

💡 Hint

Reactive objects update their properties reactively when assigned new values.

Calling updateMessage() sets state.message to 'Hi'. So the value is 'Hi'.

🔧 Debug

advanced

Why does this Vue shallowReactive array update not trigger the UI update?

Look at this Vue 3 code snippet. The UI does not update after pushing a new item to the array. Why?

Vue

<script setup>
import { shallowReactive } from 'vue'
const state = shallowReactive({ items: [] })
function addItem() {
  state.items.push('new')
}
addItem()
</script>

A Because the array was not declared with ref()

B Because the function addItem was not called inside a lifecycle hook

C Because push returns the new length, not the array

D Because shallowReactive does not track array mutations like push

💡 Hint

Think about shallowReactive vs reactive and how Vue tracks changes in nested arrays.

shallowReactive only proxies the top-level properties. The nested items array remains a plain JavaScript array, so mutations like push() do not trigger reactivity updates or UI re-renders. Use reactive for deep reactivity on nested data structures.

🧠 Conceptual

advanced

What is the main benefit of Vue 3's Proxy-based reactivity over Vue 2's Object.defineProperty?

Vue 3 uses Proxy for reactivity instead of Object.defineProperty like Vue 2. What is the main advantage of this change?

A It allows tracking of property additions and deletions dynamically

B It improves performance by avoiding all reactivity tracking

C It makes Vue components run without a virtual DOM

D It removes the need for any reactive declarations in code

💡 Hint

Think about what Proxy can do that Object.defineProperty cannot.

Proxy can intercept operations like adding or deleting properties, which Object.defineProperty cannot track. This makes Vue 3's reactivity more flexible and complete.

📝 Syntax

expert

Which option correctly creates a computed property that doubles a reactive count in Vue 3?

Choose the correct Vue 3 Composition API syntax to create a computed property doubleCount that returns count * 2, where count is a ref.

A const doubleCount = computed(count * 2)

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

C const doubleCount = computed(() => count * 2)

D const doubleCount = computed(() => { return count * 2 })

💡 Hint

Remember to access the value inside a ref with .value.

Since count is a ref, you must use count.value inside the computed function. Option B correctly does this. Option B and D forget .value, and C passes an expression instead of a function.

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