Reactive data with ref in Vue - Step-by-Step Execution

Concept Flow - Reactive data with ref

Create ref with initial value

↓

Access ref.value to read

↓

Change ref.value to update

↓

Vue tracks ref change

↓

Trigger reactive updates

↓

Component re-renders with new value

This flow shows how Vue's ref creates reactive data, tracks changes, and triggers updates in the component.

Execution Sample

Vue

import { ref } from 'vue';
const count = ref(0);
console.log(count.value);
count.value = 5;
console.log(count.value);

This code creates a reactive count variable, reads its value, updates it, and reads the new value.

Execution Table

Step	Action	ref.value Before	Operation	ref.value After	Output
1	Create ref with 0	N/A	count = ref(0)	0	No output
2	Read ref.value	0	console.log(count.value)	0	0
3	Update ref.value	0	count.value = 5	5	No output
4	Read updated ref.value	5	console.log(count.value)	5	5
5	End of code	5	No further operations	5	Execution stops

💡 Code ends after reading updated ref.value; reactive value is 5

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
count.value	undefined	0	5	5

Key Moments - 2 Insights

Why do we use count.value instead of just count?

Because ref returns an object with a .value property holding the reactive data. The execution_table shows reading and updating count.value explicitly at steps 2 and 3.

Does changing count.value automatically update the UI?

Yes, Vue tracks changes to ref.value and triggers reactive updates. The flow diagram shows this reactive update after changing ref.value.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What is the value of count.value after the update?

A 0

B 5

C undefined

D null

💡 Hint

Check the 'ref.value After' column in step 3 of the execution_table.

At which step does the console output the initial value of count.value?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Output' column in the execution_table for the first console.log.

If we changed count.value = 10 at step 3 instead of 5, what would be the output at step 4?

A 10

B 0

C 5

D undefined

💡 Hint

Refer to the variable_tracker and execution_table showing how ref.value updates affect output.

Concept Snapshot

Vue ref creates reactive data with ref(initialValue).
Access or update the value with .value property.
Changing .value triggers reactive updates.
Use ref for primitive reactive variables.
Always read/write with .value in setup or script.

Full Transcript

This lesson shows how Vue's ref function creates reactive data. We start by creating a ref with an initial value of 0. We read the value using count.value, which logs 0. Then we update count.value to 5. Vue tracks this change and triggers reactive updates. Reading count.value again logs 5. The key is that ref returns an object with a .value property holding the reactive data. Changing .value updates the reactive system and UI. This simple flow helps beginners understand how to use ref for reactive variables in Vue.