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.

Practice

1. What is the main purpose of toRef in Vue's Composition API?

easy

A. To convert a ref into a reactive object

B. To create reactive references for all properties of a reactive object

C. To create a reactive reference to a single property of a reactive object

D. To make a reactive object readonly

Solution

1. Step 1: Understand what toRef does

   toRef creates a reactive reference to a single property inside a reactive object, keeping reactivity when destructuring.

2. Step 2: Compare with other options

   toRefs creates refs for all properties, not just one. The other options describe different functions.

3. Final Answer:

   To create a reactive reference to a single property of a reactive object -> Option C

4. Quick Check:

   toRef = single property ref [OK]

Hint: toRef = one property ref, toRefs = all properties refs [OK]

Common Mistakes:

• Confusing toRef with toRefs
• Thinking toRef creates refs for all properties
• Assuming toRef converts refs to reactive objects

2. Which of the following is the correct syntax to destructure a reactive object state using toRefs?

easy

A. const { count, name } = toRef(state)

B. const { count, name } = toRefs(state)

C. const [count, name] = toRefs(state)

D. const count = toRefs(state).count

Solution

1. Step 1: Recall the syntax of toRefs

   toRefs returns an object with refs for each property, so destructuring with curly braces is correct.

2. Step 2: Analyze each option

   const { count, name } = toRef(state) uses toRef which returns a single ref, so destructuring multiple properties is invalid. const [count, name] = toRefs(state) uses array destructuring which is wrong. const count = toRefs(state).count accesses a property but does not destructure.

3. Final Answer:

   const { count, name } = toRefs(state) -> Option B

4. Quick Check:

   toRefs returns object of refs, use object destructuring [OK]

Hint: Use curly braces {} with toRefs for object destructuring [OK]

Common Mistakes:

• Using toRef instead of toRefs for multiple properties
• Using array destructuring with toRefs
• Not destructuring and accessing properties directly

3. Given the code:

const state = reactive({ count: 0, name: 'Vue' })
const { count } = toRefs(state)
count.value++
console.log(state.count)

What will be logged to the console?

medium

A. 0

B. An error is thrown

C. undefined

D. 1

Solution

1. Step 1: Understand reactivity with toRefs

   Destructuring with toRefs keeps the properties reactive. So count is a ref linked to state.count.

2. Step 2: Incrementing count.value updates state.count

   Increasing count.value by 1 changes state.count to 1, so logging state.count outputs 1.

3. Final Answer:

   1 -> Option D

4. Quick Check:

   toRefs keeps reactivity, so state.count = 1 [OK]

Hint: toRefs keeps reactivity; changing ref updates original object [OK]

Common Mistakes:

• Thinking destructured refs are copies, not reactive
• Forgetting to use .value to update ref
• Expecting original state to stay unchanged

4. What is wrong with this code snippet?

const state = reactive({ count: 0 })
const { count } = state
count.value++

medium

A. You cannot destructure reactive objects directly without toRefs or toRef

B. count.value++ is invalid syntax

C. reactive objects cannot have numeric properties

D. count is not reactive because reactive() was not called

Solution

1. Step 1: Identify destructuring issue

   Destructuring state directly extracts the raw value, losing reactivity. count is not a ref here.

2. Step 2: Understand why count.value++ fails

   Since count is a plain value, it has no .value property, so this causes an error.

3. Final Answer:

   You cannot destructure reactive objects directly without toRefs or toRef -> Option A

4. Quick Check:

   Destructure reactive with toRefs/toRef to keep reactivity [OK]

Hint: Always use toRefs or toRef when destructuring reactive objects [OK]

Common Mistakes:

• Destructuring reactive objects directly
• Using .value on non-ref values
• Assuming reactive() makes properties refs automatically

5. You have a reactive object user with properties firstName and lastName. You want to destructure these properties but keep them reactive and also create a computed property fullName that updates when either changes. Which approach correctly achieves this?

hard

A. const { firstName, lastName } = toRefs(user); const fullName = computed(() => `${firstName.value} ${lastName.value}`)

B. const { firstName, lastName } = user; const fullName = computed(() => `${firstName} ${lastName}`)

C. const firstName = toRef(user, 'firstName'); const lastName = toRef(user, 'lastName'); const fullName = `${firstName.value} ${lastName.value}`

D. const firstName = user.firstName; const lastName = user.lastName; const fullName = computed(() => `${firstName.value} ${lastName.value}`)

Solution

1. Step 1: Destructure with reactivity

   Using toRefs keeps firstName and lastName reactive refs when destructured.

2. Step 2: Create computed property using .value

   The computed property accesses firstName.value and lastName.value to reactively update fullName.

3. Final Answer:

   const { firstName, lastName } = toRefs(user); const fullName = computed(() => `${firstName.value} ${lastName.value}`) -> Option A

4. Quick Check:

   toRefs + computed with .value keeps reactivity [OK]

Hint: Use toRefs for destructuring and computed with .value [OK]

Common Mistakes:

• Destructuring without toRefs loses reactivity
• Using .value on non-ref values
• Not using computed for reactive derived values