Reactive objects with reactive in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the reactive function do in Vue?

It creates a reactive object that Vue tracks for changes, so the UI updates automatically when the object's properties change.

beginner

How do you create a reactive object with Vue's Composition API?

Use <code>import { reactive } from 'vue'</code> and then call <code>const state = reactive({ key: value })</code>.

beginner

Why should you use reactive instead of a plain JavaScript object in Vue?

Because Vue can detect changes in reactive objects and update the UI automatically, while plain objects won't trigger updates.

intermediate

Can you add new properties to a reactive object after creation and have Vue track them?

Yes, Vue 3's reactive system tracks new properties added to reactive objects, so the UI updates when they change.

intermediate

What is the difference between reactive and ref in Vue?

reactive makes an entire object reactive, while ref makes a single value reactive and wraps it in an object with a .value property.

What does Vue's reactive function return?

A A plain JavaScript object

B A function to update state

C A reactive proxy object that tracks changes

D A string representation of the object

The reactive function returns a proxy object that Vue uses to track changes and update the UI.

Which Vue import is needed to use reactive?

A import reactive from 'vuex'

B import { ref } from 'vue'

C import { reactive } from 'vue-router'

D import { reactive } from 'vue'

The reactive function is part of Vue's core and imported from 'vue'.

If you change a property inside a reactive object, what happens?

A Vue updates the UI automatically

B Nothing, you must refresh manually

C Vue throws an error

D The object becomes non-reactive

Vue tracks changes in reactive objects and updates the UI automatically when properties change.

Can you use reactive with arrays?

A Yes, arrays become reactive objects

B No, only plain objects work

C Only if you convert arrays to objects first

D Only with special plugins

Vue's reactive can make arrays reactive, tracking changes like push or pop.

What is a key difference between reactive and ref?

A <code>reactive</code> is for strings only

B <code>ref</code> wraps a single value, <code>reactive</code> wraps an object

C <code>ref</code> cannot be used in templates

D <code>reactive</code> does not track changes

ref is for single values and uses a .value property, while reactive wraps whole objects.

Explain how Vue's reactive function helps keep the UI updated automatically.

Think about how Vue watches for changes in data.

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

Consider what kind of data each is best for.