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.