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.