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.

Practice

1. Which Vue function should you use to create a reactive variable holding a simple number with type safety?

easy

A. ref<number>(0)

B. reactive<number>({ value: 0 })

C. ref({ count: 0 })

D. reactive(0)

Solution

1. Step 1: Understand the use of ref for simple values

   ref<Type> is used to create reactive primitive values like numbers or strings with type safety.

2. Step 2: Recognize the correct syntax for a typed ref

   The syntax ref<number>(0) correctly creates a reactive number initialized to 0.

3. Final Answer:

   ref<number>(0) -> Option A

4. Quick Check:

   Simple reactive value uses ref<Type> = D [OK]

Hint: Use ref<Type> for simple values, reactive<Type> for objects [OK]

Common Mistakes:

• Using reactive for simple primitive values
• Omitting the type parameter in ref
• Using ref with an object instead of reactive

2. Which of the following is the correct syntax to create a reactive object with type safety in Vue 3?

easy

A. const state = ref<{ count: number }>({ count: 0 })

B. const state = reactive<{ count: number }>({ count: 0 })

C. const state = reactive({ count: 0 })

D. const state = ref({ count: 0 })

Solution

1. Step 1: Identify the correct function for reactive objects

   Use reactive<Type> to create reactive objects with type safety.

2. Step 2: Check the syntax correctness

   const state = reactive<{ count: number }>({ count: 0 }) correctly types the object and makes it reactive.

3. Final Answer:

   const state = reactive<{ count: number }>({ count: 0 }) -> Option B

4. Quick Check:

   Reactive object with type uses reactive<Type> = A [OK]

Hint: Use reactive<Type> for objects, ref<Type> for primitives [OK]

Common Mistakes:

• Using ref instead of reactive for objects
• Missing type parameter in reactive
• Using reactive without an object

3. Given the code:

const count = ref<number>(5);
count.value = 10;
console.log(count.value);

What will be logged to the console?

medium

A. 5

B. undefined

C. 10

D. Error: count is not a function

Solution

1. Step 1: Understand ref and .value usage

   ref<number>(5) creates a reactive number with initial value 5. To update or read the value, use .value.

2. Step 2: Follow the code execution

   Setting count.value = 10 updates the reactive value. Logging count.value outputs 10.

3. Final Answer:

   10 -> Option C

4. Quick Check:

   ref value updated and logged = 10 [OK]

Hint: Access ref values with .value to get or set [OK]

Common Mistakes:

• Logging ref directly without .value
• Confusing reactive object access with ref
• Expecting initial value after update

4. What is wrong with this Vue 3 code snippet?

const state = reactive<{ count: number }>({ count: 0 });
state.count = 'one';

medium

A. Runtime error: reactive objects are immutable

B. Syntax error: reactive cannot be typed

C. No error, code works fine

D. Type error: assigning string to number property

Solution

1. Step 1: Check the declared type of reactive object

   The object is typed as { count: number }, so count must be a number.

2. Step 2: Analyze the assignment

   Assigning 'one' (a string) to count violates the type, causing a type error.

3. Final Answer:

   Type error: assigning string to number property -> Option D

4. Quick Check:

   Type mismatch in reactive object property = C [OK]

Hint: Check property types before assigning new values [OK]

Common Mistakes:

• Ignoring type errors in reactive objects
• Thinking reactive objects are immutable
• Confusing syntax errors with type errors

5. You want to create a reactive state in Vue 3 that holds a list of user objects with typed properties id: number and name: string. Which is the best way to type and initialize this state?

hard

A. const users = ref<Array<{ id: number; name: string }>>([])

B. const users = reactive<Array<{ id: number; name: string }>>({})

C. const users = reactive<{ id: number; name: string }>([])

D. const users = ref<{ id: number; name: string }>([])

Solution

1. Step 1: Decide between ref and reactive for arrays

   Arrays are objects, but Vue recommends using ref for arrays to keep reactivity simple and clear.

2. Step 2: Apply correct typing for array of objects

   Typing as Array<{ id: number; name: string }> ensures each user object has correct properties.

3. Step 3: Check initialization syntax

   ref<Array<{ id: number; name: string }>>([]) initializes an empty reactive array with proper typing.

4. Final Answer:

   const users = ref<Array<{ id: number; name: string }>>([]) -> Option A

5. Quick Check:

   Typed reactive array uses ref with array type = A [OK]

Hint: Use ref<Array<Type>> for reactive arrays of objects [OK]

Common Mistakes:

• Using reactive with array type incorrectly
• Typing reactive as single object instead of array
• Using ref with object type for array