Why Vue performance matters - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Vue's reactivity system affect component updates?

Consider a Vue 3 component using the Composition API with a reactive state. What happens when a reactive property changes?

Vue

<script setup>
import { reactive } from 'vue'
const state = reactive({ count: 0 })
function increment() {
  state.count++
}
</script>
<template>
  <button @click="increment">Count: {{ state.count }}</button>
</template>

A Vue will not detect changes to 'state.count' because reactive objects don't track properties.

B The entire component will re-render every time 'state.count' changes, regardless of usage.

C Only the parts of the template that use 'state.count' will re-render when it changes.

D The component will throw an error because 'state' is not declared as a ref.

💡 Hint

Think about how Vue tracks dependencies to update only what is necessary.

Vue's reactivity system tracks which parts of the template depend on reactive properties. When 'state.count' changes, only those parts re-render, improving performance.

❓ state_output

intermediate

What is the output when updating a reactive object in Vue?

Given the following Vue 3 setup, what will be displayed after clicking the button twice?

Vue

<script setup>
import { reactive } from 'vue'
const state = reactive({ items: [] })
function addItem() {
  state.items.push('item')
}
</script>
<template>
  <button @click="addItem">Add</button>
  <p>Items count: {{ state.items.length }}</p>
</template>

A Items count: 2

B The component will not update because arrays are not reactive.

C Items count: 1

D Items count: 0

💡 Hint

Remember how Vue tracks changes in reactive arrays.

Vue tracks mutations on reactive arrays like push. After clicking twice, two items are added, so the count is 2.

📝 Syntax

advanced

Which option correctly uses Vue's