Ref and reactive in Composition API in Vue - Step-by-Step Execution

Concept Flow - Ref and reactive in Composition API

Start Setup

↓

Create ref or reactive

↓

Access or update value

↓

Vue tracks changes

↓

Component re-renders

↓

User sees updated UI

↓

Repeat updates as needed

This flow shows how Vue's ref and reactive create reactive state, track changes, and update the UI automatically.

Execution Sample

Vue

import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({ name: 'Vue' })

count.value++
state.name = 'Vue 3'

This code creates a ref and a reactive object, then updates their values to trigger reactivity.

Execution Table

Step	Variable	Action	Value Before	Value After	Reactivity Triggered	UI Update
1	count	Initialize ref	undefined	0	No	No
2	state	Initialize reactive	undefined	{ name: 'Vue' }	No	No
3	count.value	Increment	0	1	Yes	Yes - count displayed updates
4	state.name	Change property	'Vue'	'Vue 3'	Yes	Yes - name displayed updates

💡 All reactive changes processed, UI updated accordingly

Variable Tracker

Variable	Start	After Step 3	After Step 4
count.value	0	1	1
state.name	'Vue'	'Vue'	'Vue 3'

Key Moments - 2 Insights

Why do we use count.value to access the ref but state.name directly for reactive?

Refs wrap the value inside a .value property, so you must use count.value (see step 3). Reactive objects are proxies, so you access properties directly like state.name (step 4).

Does changing count.value or state.name immediately update the UI?

Yes, Vue tracks these changes and triggers UI updates automatically after the change (see 'Reactivity Triggered' and 'UI Update' columns in steps 3 and 4).

Visual Quiz - 3 Questions

Look at the execution table, what is count.value after step 3?

A 0

B undefined

C 1

D 2

💡 Hint

Check the 'Value After' column for count.value at step 3 in the execution table.

At which step does the UI update to show the new state.name value?

A Step 1

B Step 4

C Step 2

D Step 3

💡 Hint

Look at the 'UI Update' column for state.name changes in the execution table.

If we forget to use .value with count, what happens?

A No update happens because .value is required

B The value updates correctly

C Vue throws an error immediately

D Reactive works instead of ref

💡 Hint

Recall that refs require .value to access or update the inner value (see key moments).

Concept Snapshot

Vue Composition API uses ref() to create a reactive single value accessed via .value.
Use reactive() to create a reactive object accessed directly.
Changing ref.value or reactive properties triggers automatic UI updates.
Always use .value with refs, but not with reactive objects.
This enables simple, tracked state changes in components.

Full Transcript

In Vue's Composition API, ref and reactive create reactive state. Ref wraps a single value accessed with .value, while reactive wraps an object accessed directly. When you change these values, Vue tracks the changes and updates the UI automatically. For example, incrementing count.value or changing state.name triggers re-rendering. Remember to use .value with refs, or changes won't be tracked. This flow helps you build dynamic, responsive interfaces easily.