Ref and reactive in Composition API in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is ref in Vue's Composition API?

ref creates a reactive reference to a simple value like a number, string, or boolean. It wraps the value so Vue can track changes and update the UI.

beginner

How does reactive differ from ref?

reactive makes an entire object reactive, tracking changes to its properties, while ref is for single primitive values or objects wrapped in a reference.

beginner

How do you access the value inside a ref?

You access or update the value inside a ref using the .value property, for example: count.value = 5.

intermediate

Can you use reactive with arrays and objects?

Yes, reactive works with objects and arrays, making all nested properties reactive so Vue tracks changes deeply.

intermediate

Why might you choose ref over reactive for a single value?

ref is simpler and clearer for single primitive values. It also works better with template syntax and when you want to track a single piece of data.

Which Vue Composition API function creates a reactive object?

A reactive

B ref

C computed

D watch

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

How do you update the value inside a ref variable named count?

A count.update(newValue)

B count = newValue

C count.value = newValue

D count.set(newValue)

You must use .value to access or update the value inside a ref.

Which is true about reactive in Vue?

A It only works with primitive values

B It creates a reactive wrapper for objects and arrays

C It requires manual updates to trigger reactivity

D It cannot track nested properties

reactive tracks changes deeply in objects and arrays automatically.

When should you prefer ref over reactive?

A For large objects with many properties

B When you want to disable reactivity

C When you want to track arrays deeply

D For single primitive values

ref is best for single primitive values like numbers or strings.

What happens if you forget to use .value with a ref in your template?

A Vue automatically unwraps <code>ref</code> in templates

B The template will not update reactively

C The value will update but not render

D Vue will throw an error

Vue automatically unwraps ref in templates, so you don't need .value there.

Explain the difference between ref and reactive in Vue's Composition API.

Think about when you want to track one value versus many properties.

Describe how you would make a number reactive and update it in a Vue component using Composition API.

Remember the syntax: const count = ref(0); count.value = 5;