Reactive data with ref in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is ref in Vue's Composition API?

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

beginner

How do you access the value inside a ref?

You access or change the value inside a ref by using the .value property.

Example: count.value = 5

beginner

Why use ref instead of a normal variable in Vue?

Normal variables are not reactive. ref makes the variable reactive so Vue knows when it changes and updates the UI automatically.

intermediate

Can ref hold objects or arrays?

Yes, ref can hold any type of value, including objects and arrays. Vue will track changes inside them reactively.

intermediate

What happens if you assign a new object to a ref?

When you assign a new object to a ref using .value, Vue updates the reactive reference and the UI updates accordingly.

How do you create a reactive number with ref in Vue?

A const count = ref(0)

B const count = reactive(0)

C const count = 0

D const count = ref.value(0)

ref(0) creates a reactive reference to the number 0.

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

A count = 5

B count.value = 5

C count.set(5)

D count.update(5)

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

Which of these is true about ref?

A It only works with primitive values

B It disables reactivity

C It is used to create components

D It makes variables reactive

ref makes variables reactive so Vue can track changes.

If you have const user = ref({ name: 'Anna' }), how do you change the name?

A user.setName('Bob')

B user.name = 'Bob'

C user.value.name = 'Bob'

D user.value = 'Bob'

You access the object inside ref with .value and then update its properties.

What happens if you assign a new array to a ref variable?

A Vue updates the reactive reference and UI

B The array becomes non-reactive

C Vue throws an error

D Vue ignores the change

Assigning a new value to .value updates the reactive reference and triggers UI updates.

Explain how ref works in Vue and why it is useful.

Think about how Vue tracks changes to variables.

Describe how you would update a property inside an object stored in a ref.

Remember .value holds the actual object.