Typing ref and reactive in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of ref in Vue's Composition API?

ref creates a reactive reference to a single value. It lets Vue track changes to that value and update the UI automatically.

beginner

How does reactive differ from ref in Vue?

reactive makes an entire object reactive, tracking changes to all its properties, while ref tracks a single value.

intermediate

How do you type a ref holding a number in Vue with TypeScript?

<p>Use <code>const count = ref&lt;number&gt;(0)</code> to tell TypeScript the value inside <code>count</code> is a number.</p>

intermediate

How do you type a reactive object with specific properties in Vue?

Define an interface for the object shape, then use reactive<MyInterface>({ ... }) to type it.

beginner

Why do you sometimes need to use .value with ref but not with reactive?

ref wraps a value inside an object, so you access the actual value with .value. reactive returns a proxy of the object itself, so you access properties directly.

Which Vue function creates a reactive object that tracks all its properties?

A reactive

B watch

C computed

D ref

reactive makes an entire object reactive, tracking all its properties.

How do you access the value inside a ref in Vue?

A Using .reactive property

B Directly by variable name

C Using .value property

D Using .get() method

You use .value to get or set the value inside a ref.

What TypeScript syntax is used to type a ref holding a string?

A ref('string')

B ref(string)

C ref: string

D ref<string>('')

Use angle brackets to specify the type: ref<string>('').

Which is true about reactive in Vue?

A It only works with primitive values

B It returns a proxy object

C You must use .value to access properties

D It is used to create computed properties

reactive returns a proxy that tracks changes to the object.

If you want to track a number that changes over time, which Vue API is best?

A ref

B reactive

C watch

D computed

ref is best for single reactive values like numbers.

Explain how to use ref and reactive in Vue with TypeScript typing.

Think about single values vs objects and how TypeScript knows their types.

Describe why you need to use .value with ref but not with reactive in Vue.

Consider how Vue tracks changes differently for single values and objects.

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