Why deep reactivity understanding matters in Vue - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue component render?

Consider this Vue 3 component using reactive and toRefs. What will be the rendered output after clicking the button once?

Vue

<template>
  <div>
    <p>{{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

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

A 1 initially, then 2 after click

B 0 initially, then 1 after click

C Always 0, does not update

D Throws an error on click

💡 Hint

Think about how reactive objects track changes and update the DOM.

The reactive function creates a deeply reactive object. When state.count changes, Vue tracks it and updates the DOM. Initially, count is 0. After clicking, it increments to 1 and the displayed value updates accordingly.

❓ state_output

intermediate

What is the value of nested.value after mutation?

Given this Vue 3 reactive state, what is the value of nested.value after running state.nested.value = 10?

Vue

<script setup>
import { reactive } from 'vue'

const state = reactive({ nested: { value: 5 } })

state.nested.value = 10
</script>

A 5

B Throws a TypeError

C undefined

D 10

💡 Hint

Remember that reactive makes nested objects reactive too.

Vue's reactive creates deep reactivity. Changing state.nested.value updates the reactive object. So the new value is 10.

🔧 Debug

advanced

Why does this Vue component not update on nested property change?

This Vue 3 component uses ref with a nested object. Why does the template not update when state.value.count changes?

Vue

<template>
  <p>{{ state.value.count }}</p>
  <button @click="increment">Increment</button>
</template>

<script setup>
import { ref } from 'vue'

const state = ref({ count: 0 })

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

A Because the template syntax is invalid

B Because the increment function is not called correctly

C Because ref does not make nested properties reactive, so changes to count are not tracked

D Because Vue 3 does not support reactivity on objects

💡 Hint

Think about how ref tracks changes on objects versus reactive.

ref tracks changes to the reference itself, not deep properties inside the object. Changing state.value.count does not trigger reactivity. To track nested changes, use reactive or replace the whole object.

📝 Syntax

advanced

Which option correctly creates a deeply reactive object in Vue 3?

Choose the correct code snippet that creates a deeply reactive object and allows nested property tracking.

A const state = reactive({ user: { name: 'Alice' } })

B const state = ref({ user: { name: 'Alice' } })

C const state = reactive(ref({ user: { name: 'Alice' } }))

D const state = ref(reactive({ user: { name: 'Alice' } }))

💡 Hint

Which method tracks nested properties automatically?

reactive creates a deeply reactive object. ref tracks only the reference. Wrapping ref inside reactive or vice versa is incorrect and causes errors or unexpected behavior.

🧠 Conceptual

expert

Why is understanding deep reactivity crucial in Vue 3?

Which statement best explains why deep reactivity understanding matters when building Vue 3 applications?

A Because deep reactivity ensures that changes to nested objects automatically update the UI without manual intervention

B Because deep reactivity disables Vue's reactivity system for performance reasons

C Because Vue 3 does not support reactive arrays, so deep reactivity is needed to track them

D Because Vue 3 only tracks changes on top-level properties, so nested changes require special handling

💡 Hint

Think about how Vue updates the UI when nested data changes.

Deep reactivity means Vue tracks changes inside nested objects and arrays automatically. This allows the UI to update whenever any nested data changes, making the app reactive and responsive without extra code.