toRef and toRefs for destructuring in Vue - Step-by-Step Execution

Concept Flow - toRef and toRefs for destructuring

Start with reactive object

↓

Use toRef for single property

↓

Use toRefs for all properties

↓

Destructure refs

↓

Access or update values

↓

Reactive updates reflect in original object

Shows how to create references to reactive object properties for easy destructuring and reactive updates.

Execution Sample

Vue

import { reactive, toRef, toRefs } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
const countRef = toRef(state, 'count')
const { count, name } = toRefs(state)
countRef.value++
name.value = 'VueJS'

Creates reactive references to properties of a reactive object and updates them.

Execution Table

Step	Action	Value of state.count	Value of countRef.value	Value of count.value	Value of name.value
1	Create reactive state	0	N/A	N/A	N/A
2	Create countRef = toRef(state, 'count')	0	0	N/A	N/A
3	Destructure { count, name } = toRefs(state)	0	0	0	'Vue'
4	Increment countRef.value++	1	1	1	'Vue'
5	Update name.value = 'VueJS'	1	1	1	'VueJS'

💡 Finished updates; reactive references reflect changes in original state.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
state.count	0	0	0	1	1
countRef.value	N/A	0	0	1	1
count.value	N/A	N/A	0	1	1
name.value	N/A	N/A	'Vue'	'Vue'	'VueJS'

Key Moments - 3 Insights

Why does updating countRef.value change state.count?

Because countRef is a reactive reference directly linked to state.count, so changing countRef.value updates the original reactive property (see execution_table step 4).

What is the difference between toRef and toRefs?

toRef creates a single reactive reference to one property, while toRefs returns reactive references for all properties in the object, allowing easy destructuring (see execution_table steps 2 and 3).

Why do we use .value to access or update refs?

Refs in Vue wrap values inside a .value property to track reactivity. Accessing or setting .value updates the reactive system (see execution_table steps 4 and 5).

Visual Quiz - 3 Questions

Look at the execution table at step 4, what is countRef.value?

A 1

B 0

C undefined

D N/A

💡 Hint

Check the 'Value of countRef.value' column at step 4 in the execution_table.

At which step does name.value change to 'VueJS'?

A Step 3

B Step 4

C Step 5

D Step 2

💡 Hint

Look at the 'Value of name.value' column in the execution_table.

If we only use toRef for 'count' and not toRefs, what happens to 'name'?

A 'name' remains reactive and accessible as a ref

B 'name' is not reactive and cannot be destructured as a ref

C 'name' becomes a normal variable with .value property

D 'name' is automatically converted to a ref

💡 Hint

Refer to the difference between toRef and toRefs explained in key_moments and execution_table steps 2 and 3.

Concept Snapshot

toRef creates a reactive reference to one property of a reactive object.
toRefs creates reactive references for all properties, enabling destructuring.
Use .value to read or update refs.
Updating refs updates the original reactive object.
Useful for clean destructuring while keeping reactivity.

Full Transcript

This visual trace shows how Vue's toRef and toRefs work for destructuring reactive objects. We start with a reactive object 'state' with properties 'count' and 'name'. Using toRef, we create a reactive reference to 'count' only. Using toRefs, we create reactive references for all properties, allowing easy destructuring. When we update countRef.value or name.value, these changes reflect in the original reactive object. The execution table tracks these values step-by-step, showing how reactivity links the references and the original state. Key moments clarify common confusions about why .value is used and the difference between toRef and toRefs. The quiz tests understanding of these reactive links and updates.

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