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.