toRef and toRefs for destructuring in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the output when using toRef for a single property?

Consider the following Vue 3 component setup using toRef. What will be displayed when the button is clicked twice?

Vue

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

const state = reactive({ count: 0 })
const countRef = toRef(state, 'count')

function increment() {
  countRef.value++
}
</script>
<template>
  <div>
    <p>Count: {{ countRef.value }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

A Count: 0

B Count: undefined

C Count: 1

D Count: 2

💡 Hint

Remember that toRef creates a reactive reference to the original property.

The toRef creates a reactive reference to state.count. Incrementing countRef.value updates state.count. After clicking twice, the count increases from 0 to 2, so the displayed value is 2.

❓ state_output

intermediate

What is the value of nameRef.value after modifying the original object?

Given the following code, what will be the value of nameRef.value after user.name is changed?

Vue

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

const user = reactive({ name: 'Alice', age: 30 })
const nameRef = toRef(user, 'name')

user.name = 'Bob'
</script>

A null

B 'Bob'

C undefined

D 'Alice'

💡 Hint

Think about how toRef keeps the reference reactive to the original property.

nameRef is a reactive reference to user.name. When user.name changes to 'Bob', nameRef.value also updates to 'Bob'.

📝 Syntax

advanced

Which option correctly uses toRefs to destructure a reactive object?

You want to destructure all properties of a reactive object profile into refs. Which code snippet is correct?

Vue

const profile = reactive({ firstName: 'John', lastName: 'Doe' })

A const { firstName, lastName } = toRefs(profile)

B const { firstName, lastName } = reactive(profile)

C const [firstName, lastName] = toRefs(profile)

D const [firstName, lastName] = reactive(profile)

💡 Hint

toRefs returns an object with refs for each property.

toRefs returns an object with the same keys as the original reactive object, but each value is a ref. Destructuring with curly braces {} is correct. Using square brackets [] is invalid because toRefs does not return an array.

🔧 Debug

advanced

Why is ageRef.value undefined when using toRef?

Examine the code below. Why does console.log(ageRef.value) output undefined?

Vue

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

const person = reactive({ name: 'Eve' })
const ageRef = toRef(person, 'age')
console.log(ageRef.value)
</script>

A Because 'age' does not exist on the reactive object, so <code>toRef</code> creates an undefined ref.

B Because <code>toRef</code> only works with arrays, not objects.

C Because <code>toRef</code> requires a third argument to specify default values.

D Because <code>reactive</code> objects cannot be destructured with <code>toRef</code>.

💡 Hint

Check if the property exists on the reactive object before creating a ref.

toRef creates a ref for the specified property. If the property does not exist on the reactive object, the ref's value is undefined. Therefore, console.log(ageRef.value) outputs undefined.

🧠 Conceptual

expert

What is the main difference between toRef and toRefs in Vue 3?

Choose the option that best explains the difference between toRef and toRefs.

A <code>toRef</code> is used only for arrays, and <code>toRefs</code> is used only for objects.

B <code>toRef</code> converts a reactive object into a ref, while <code>toRefs</code> converts a ref into a reactive object.

C <code>toRef</code> creates a ref for a single property of a reactive object, while <code>toRefs</code> creates refs for all properties of a reactive object and returns them as an object.

D <code>toRef</code> creates a deep reactive copy of a property, while <code>toRefs</code> creates shallow copies of all properties.

💡 Hint

Think about how many properties each function handles and what they return.

toRef creates a reactive reference to a single property of a reactive object. toRefs creates reactive references for all properties of a reactive object and returns them as an object with the same keys.