toRef and toRefs for destructuring in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does toRef do in Vue's Composition API?

toRef creates a reactive reference to a single property inside a reactive object. It lets you track and update that property reactively without losing reactivity.

beginner

How is toRefs different from toRef?

toRefs converts all properties of a reactive object into separate reactive references. It helps when you want to destructure an object but keep each property reactive.

intermediate

Why should you use toRefs when destructuring a reactive object?

Because normal destructuring breaks reactivity, toRefs keeps each property reactive by turning them into refs. This way, changes stay tracked by Vue.

beginner

What happens if you destructure a reactive object without toRefs?

You get plain values, not reactive ones. So, Vue won't track changes to those values, and your UI won't update when they change.

beginner

Show a simple example of using toRef to create a reactive reference to a property.

<pre>import { reactive, toRef } from 'vue'

const state = reactive({ count: 0 })
const countRef = toRef(state, 'count')

// Now countRef.value is reactive and linked to state.count</pre>

What does toRefs return when used on a reactive object?

A An object with each property as a reactive ref

B A plain copy of the object

C A deep clone of the object

D An array of property values

toRefs returns an object where each property is a reactive reference (ref) to the original reactive object's properties.

Why is destructuring a reactive object without toRefs problematic?

A It causes syntax errors

B It breaks reactivity and stops updates

C It makes the object immutable

D It slows down the app

Destructuring without toRefs extracts plain values, losing reactivity, so Vue can't track changes.

Which Vue Composition API function creates a reactive reference to a single property inside a reactive object?

A toRefs

B ref

C toRef

D reactive

toRef creates a reactive reference to one property of a reactive object.

If you want to keep all properties reactive after destructuring, which should you use?

A toRefs

B toRef

C reactive

D computed

toRefs converts all properties to refs, preserving reactivity after destructuring.

What is the main benefit of using toRef or toRefs?

A Prevents errors in templates

B Improves app performance

C Makes code shorter

D Keeps reactivity when destructuring

They keep reactivity intact when you want to destructure reactive objects.

Explain how toRef and toRefs help maintain reactivity when destructuring reactive objects in Vue.

Think about what happens to reactivity when you extract properties from a reactive object.

Describe a situation where you would use toRef instead of toRefs.

Consider if you want to work with just one property reactively.