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.

Practice

1. What does the ref function in Vue do?

easy

A. Defines a new component

B. Creates a reactive data reference that Vue tracks for changes

C. Imports external libraries

D. Sets up routing between pages

Solution

1. Step 1: Understand the purpose of ref

   ref is used to create reactive data that Vue can track and update the UI when it changes.

2. Step 2: Compare options with ref usage

   Options A, C, and D describe unrelated Vue features like components, imports, and routing, not reactive data.

3. Final Answer:

   Creates a reactive data reference that Vue tracks for changes -> Option B

4. Quick Check:

   ref creates reactive data = B [OK]

Hint: Remember: ref makes data reactive for UI updates [OK]

Common Mistakes:

• Confusing ref with component creation
• Thinking ref imports libraries
• Mixing ref with routing setup

2. Which is the correct way to declare a reactive variable count initialized to 0 using ref in Vue?

easy

A. var count = ref;

B. const count = reactive(0);

C. const count = ref(0);

D. let count = ref = 0;

Solution

1. Step 1: Recall correct ref syntax

   The correct syntax is const count = ref(0); to create a reactive reference with initial value 0.

2. Step 2: Identify incorrect options

   const count = reactive(0); uses reactive incorrectly with a primitive. let count = ref = 0; has invalid assignment syntax. var count = ref; incorrectly assigns the ref function without calling it and uses var which is discouraged in modern Vue code.

3. Final Answer:

   const count = ref(0); -> Option C

4. Quick Check:

   Use const with ref() for reactive variables = D [OK]

Hint: Use const and call ref() with initial value [OK]

Common Mistakes:

• Using reactive() for primitives
• Incorrect assignment syntax
• Using var instead of const

3. Given the code:

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

What will be logged to the console?

medium

A. 6

B. 5

C. undefined

D. Error: count is not a function

Solution

1. Step 1: Understand ref and .value usage

   count is a reactive reference initialized to 5. Incrementing count.value++ increases it to 6.

2. Step 2: Determine console output

   Logging count.value after increment prints 6.

3. Final Answer:

   6 -> Option A

4. Quick Check:

   Increment ref.value updates value = 6 [OK]

Hint: Remember to use .value to access and update ref data [OK]

Common Mistakes:

• Logging count instead of count.value
• Forgetting to use .value to update
• Expecting original value without increment

4. What is wrong with this Vue code snippet?

import { ref } from 'vue';
const message = ref('Hello');
message = 'Hi';

medium

A. You cannot reassign a ref variable directly; must update .value

B. ref cannot hold string values

C. Missing parentheses when calling ref

D. No import statement for ref

Solution

1. Step 1: Identify how to update ref values

   Ref variables are constants holding reactive objects. You cannot reassign the variable itself; instead, update the inner value with message.value = 'Hi';.

2. Step 2: Check other options

   ref cannot hold string values is false because ref can hold strings. Missing parentheses when calling ref is false because ref is called correctly. No import statement for ref is false because import is present.

3. Final Answer:

   You cannot reassign a ref variable directly; must update .value -> Option A

4. Quick Check:

   Update ref.value, not ref variable = C [OK]

Hint: Change .value property, not the ref variable itself [OK]

Common Mistakes:

• Reassigning ref variable instead of .value
• Thinking ref can't hold strings
• Missing import statement

5. You want to create a reactive counter that increments only if the current count is less than 10. Which Vue code correctly implements this using ref?

hard

A. let count = ref(0);
if (count.value <= 10) {
count.value += 1;
}

B. const count = ref(0);
if (count < 10) {
count++;
}

C. const count = reactive(0);
if (count.value < 10) {
count.value++;
}

D. const count = ref(0);
if (count.value < 10) {
count.value++;
}

Solution

1. Step 1: Use ref and access .value correctly

   const count = ref(0); if (count.value < 10) { count.value++; } correctly declares count with ref(0) and checks count.value < 10 before incrementing count.value++.

2. Step 2: Identify errors in other options

   const count = ref(0); if (count < 10) { count++; } incorrectly compares and increments count without .value. const count = reactive(0); if (count.value < 10) { count.value++; } uses reactive with a primitive, which is incorrect. let count = ref(0); if (count.value <= 10) { count.value += 1; } uses let (allowed but less preferred) and checks <= 10, which allows increment at 10, violating the condition.

3. Final Answer:

   const count = ref(0); if (count.value < 10) { count.value++; } -> Option D

4. Quick Check:

   Use ref with .value and correct condition = A [OK]

Hint: Always use .value to read and write ref data [OK]

Common Mistakes:

• Forgetting .value when reading or writing
• Using reactive() for primitives
• Incorrect comparison operators