toRef and toRefs for destructuring in Vue - Mini Project: Build & Apply

Using toRef and toRefs for Destructuring in Vue 3

📖 Scenario: You are building a simple Vue 3 component that manages a user's profile information. You want to make it easy to access and update individual properties of a reactive object by destructuring them using toRef and toRefs.

🎯 Goal: Create a Vue 3 component that uses toRef to destructure a single property and toRefs to destructure all properties from a reactive object. This will allow you to bind these properties directly in the template and update them reactively.

📋 What You'll Learn

Create a reactive object called profile with properties name and age.

Create a toRef reference for the name property called nameRef.

Create toRefs references for all properties of profile called profileRefs.

Use the destructured refs in the template with two-way binding.

💡 Why This Matters

🌍 Real World

In real Vue 3 applications, destructuring reactive objects with <code>toRef</code> and <code>toRefs</code> helps keep code clean and reactive when working with complex state.

💼 Career

Understanding these Vue 3 reactivity helpers is important for frontend developers building interactive user interfaces with modern frameworks.

1

Create the reactive profile object

Create a reactive object called profile with properties name set to 'Alice' and age set to 30 using Vue's reactive function.

Vue

import { reactive } from 'vue'

// Create reactive profile object
// Your code here




  

Hint

Use const profile = reactive({ name: 'Alice', age: 30 }) to create the reactive object.

2

Create a toRef for the name property

Import toRef from 'vue' and create a reference called nameRef for the name property of the profile object using toRef(profile, 'name').

Vue

import { reactive, toRef } from 'vue'

const profile = reactive({ name: 'Alice', age: 30 })

// Create a toRef for the name property
// Your code here




  

Hint

Use const nameRef = toRef(profile, 'name') to create a reference to the name property.

3

Create toRefs for all properties of profile

Import toRefs from 'vue' and create a variable called profileRefs that holds references to all properties of profile using toRefs(profile).

Vue

import { reactive, toRef, toRefs } from 'vue'

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

// Create toRefs for all properties of profile
// Your code here




  

Hint

Use const profileRefs = toRefs(profile) to create references for all properties.

4

Bind the destructured refs in the template

In the template, create two input fields. Bind the first input's value to nameRef using v-model. Bind the second input's value to profileRefs.age using v-model. Add labels for accessibility.

Vue

import { reactive, toRef, toRefs } from 'vue'

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




  
  

Hint

Use <input v-model="nameRef" /> and <input v-model="profileRefs.age" /> with labels for accessibility.

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