Reactive objects with reactive in Vue - Step-by-Step Execution

Concept Flow - Reactive objects with reactive

Create reactive object

↓

Access properties

↓

Modify properties

↓

Vue tracks changes

↓

Update dependent views/components

This flow shows how Vue creates a reactive object, tracks property access and changes, and updates views automatically.

Execution Sample

Vue

import { reactive } from 'vue'
const state = reactive({ count: 0 })
state.count++
console.log(state.count)

This code creates a reactive object with a count property, increments it, and logs the updated value.

Execution Table

Step	Action	Property Accessed/Modified	State Before	State After	Effect
1	Create reactive object	-	{}	{ count: 0 }	Reactive proxy created
2	Access state.count	count	{ count: 0 }	{ count: 0 }	Dependency tracked
3	Modify state.count	count	{ count: 0 }	{ count: 1 }	Change detected, triggers updates
4	Log state.count	count	{ count: 1 }	{ count: 1 }	Outputs 1

💡 All steps complete; reactive object updated and logged

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
state.count	undefined	0	1	1

Key Moments - 2 Insights

Why does Vue track property access when we read state.count?

Vue tracks property access (see Step 2 in execution_table) to know which parts of the UI depend on that property, so it can update them when the property changes.

What happens when we modify a property inside a reactive object?

When a property changes (Step 3), Vue detects the change and triggers updates to any dependent views or components automatically.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of state.count after Step 3?

A 0

B undefined

C 1

D 2

💡 Hint

Check the 'State After' column for Step 3 in the execution_table.

At which step does Vue detect a change and trigger updates?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for 'Change detected' in the Effect column of the execution_table.

If we did not access state.count before modifying it, what would Vue miss?

A Creating the reactive object

B Tracking dependencies for updates

C Logging the value

D Incrementing the count

💡 Hint

Refer to Step 2 where dependency tracking happens on property access.

Concept Snapshot

Use Vue's reactive() to create reactive objects.
Accessing properties tracks dependencies.
Modifying properties triggers updates.
Vue automatically updates views using this reactivity.
Always access properties before modifying to track dependencies.

Full Transcript

This lesson shows how Vue's reactive() function creates reactive objects. When you create a reactive object, Vue wraps it to track property access and changes. Accessing a property registers it as a dependency, so Vue knows what to update later. When you modify a property, Vue detects the change and updates any dependent views or components automatically. The execution table traces creating the reactive object, accessing and modifying a property, and logging the result. The variable tracker shows how the count property changes from undefined to 0 to 1. Key moments clarify why property access is important for dependency tracking and how Vue triggers updates on changes. The quiz tests understanding of these steps and their effects. This helps beginners see how Vue's reactivity works step-by-step.