Typing ref and reactive in Vue - Performance & Optimization

Performance: Typing ref and reactive

MEDIUM IMPACT

Typing refs and reactive objects affects how Vue tracks changes and updates the DOM, impacting rendering speed and responsiveness.

Defining reactive state with proper typing to optimize reactivity

Vue

import { ref } from 'vue';
const count = ref<number>(0);

Typing the ref explicitly allows Vue to optimize reactivity and avoid unnecessary checks or updates.

📈 Performance GainReduces reactive tracking overhead and improves update efficiency.

Defining reactive state with proper typing to optimize reactivity

Vue

import { ref } from 'vue';
const count = ref(null);
count.value = 0;

Using ref without typing causes Vue to treat the value as any type, which can lead to less efficient reactivity tracking and potential runtime errors.

📉 Performance CostTriggers extra reactive tracking overhead and may cause unnecessary component updates.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Untyped ref	Reactive tracking on all changes	Multiple reflows on updates	Higher paint cost due to redundant updates	[X] Bad
Typed ref	Optimized reactive tracking	Single reflow per update	Lower paint cost with batched updates	[OK] Good
Untyped reactive object	Deep reactive tracking triggers many updates	Multiple reflows on nested changes	High paint cost due to layout thrashing	[X] Bad
Typed reactive object	Selective reactive tracking	Minimal reflows on relevant changes	Reduced paint cost with efficient updates	[OK] Good

Rendering Pipeline

Typing refs and reactive objects influence how Vue tracks dependencies and schedules DOM updates, affecting the Layout and Paint stages.

→Dependency Tracking

→Layout

→Paint

⚠️ BottleneckExcessive reactive tracking causing redundant Layout and Paint operations

Core Web Vital Affected

INP

Typing refs and reactive objects affects how Vue tracks changes and updates the DOM, impacting rendering speed and responsiveness.

Optimization Tips

1Always type refs to help Vue optimize reactive dependency tracking.

2Use typed reactive objects to minimize unnecessary nested updates.

3Avoid untyped reactive state to reduce layout thrashing and improve responsiveness.

Performance Quiz - 3 Questions

How does typing a ref in Vue improve performance?

A It helps Vue optimize reactive tracking and avoid unnecessary updates.

B It reduces the size of the JavaScript bundle significantly.

C It prevents Vue from updating the DOM entirely.

D It automatically caches the component output.

DevTools: Performance

How to check: Record a performance profile while interacting with the component using refs/reactive. Look for frequent Layout and Paint events.

What to look for: Excessive Layout or Paint events indicate inefficient reactive updates; fewer and batched events indicate good performance.

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