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




  

Need a 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




  

Need a 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




  

Need a 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)




  
  

Need a hint?

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