Typing ref and reactive in Vue - Step-by-Step Execution

Concept Flow - Typing ref and reactive

Import ref, reactive

↓

Declare ref with type

↓

Declare reactive with type

↓

Use variables in template or logic

↓

Update values

↓

Reactivity triggers updates

This flow shows how to import and declare typed ref and reactive variables, use them, update their values, and trigger reactive updates.

Execution Sample

Vue

import { ref, reactive } from 'vue'

const count = ref<number>(0)
const state = reactive<{ name: string, age: number }>({ name: 'Alice', age: 30 })

count.value++
state.age = 31

This code creates a typed ref and a typed reactive object, then updates their values.

Execution Table

Step	Action	Variable	Value Before	Value After	Reactivity Triggered
1	Declare count as ref<number>(0)	count.value	undefined	0	No
2	Declare state as reactive<{name:string, age:number}>	state	undefined	{ name: 'Alice', age: 30 }	No
3	Increment count.value	count.value	0	1	Yes
4	Update state.age to 31	state.age	30	31	Yes

💡 All declarations and updates done, reactive system ready to update UI or watchers.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
count.value	undefined	0	0	1	1	1
state.name	undefined	undefined	Alice	Alice	Alice	Alice
state.age	undefined	undefined	30	30	31	31

Key Moments - 3 Insights

Why do we use count.value to access the ref value?

Because ref wraps the value inside an object with a .value property, as shown in steps 1 and 3 of the execution_table.

How does typing reactive differ from typing ref?

Typing reactive applies to the whole object shape, while typing ref applies to the single value inside .value, as seen in steps 1 and 2.

Does updating count.value or state.age trigger reactivity?

Yes, updating these triggers reactivity, shown in steps 3 and 4 where Reactivity Triggered is 'Yes'.

Visual Quiz - 3 Questions

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

A 0

B 1

C undefined

D 2

💡 Hint

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

At which step does state.age change from 30 to 31?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Look at the 'Action' and 'Value After' columns for state.age.

If we remove typing from ref, what changes in the execution_table?

A No change in values, but type safety is lost

B count.value becomes undefined

C Reactivity stops working

D state object loses properties

💡 Hint

Typing affects development safety, not runtime values shown in execution_table.

Concept Snapshot

Typing ref and reactive in Vue:
- Use ref<Type>(initial) for single reactive values
- Use reactive<Type>(object) for reactive objects
- Access ref value with .value
- Updates trigger reactivity and UI updates
- Typing helps catch errors but does not affect runtime behavior

Full Transcript

This lesson shows how to use typed ref and reactive in Vue. First, we import ref and reactive. Then we declare a ref with a number type and a reactive object with a typed shape. We update the ref's value using .value and update a property inside the reactive object. Each update triggers Vue's reactivity system to update the UI or watchers. The execution table tracks each step's variable values and whether reactivity triggers. Key points include accessing ref values with .value and how typing helps with code safety. The visual quiz tests understanding of variable values and typing effects.