toRef and toRefs for destructuring in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive reference to the 'count' property in the state object.

Vue

import { reactive, [1] } from 'vue';
const state = reactive({ count: 0 });
const countRef = [1](state, 'count');

Drag options to blanks, or click blank then click option'

AtoRefs

BtoRef

Cref

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using toRefs instead of toRef when only one property is needed.

Using ref directly on a reactive object property.

Use toRef to create a reactive reference to a single property inside a reactive object.

2fill in blank

medium

Complete the code to destructure all properties from the reactive state object using the correct Vue function.

Vue

import { reactive, [1] } from 'vue';
const state = reactive({ name: 'Alice', age: 30 });
const { name, age } = [1](state);

Drag options to blanks, or click blank then click option'

AtoRefs

BtoRef

Cref

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using toRef instead of toRefs for multiple properties.

Destructuring reactive object directly without toRefs, losing reactivity.

toRefs converts all properties of a reactive object into refs, allowing destructuring while keeping reactivity.

3fill in blank

hard

Fix the error in the code by choosing the correct function to keep reactivity when destructuring.

Vue

import { reactive, [1] } from 'vue';
const state = reactive({ score: 100 });
const { score } = state; // This breaks reactivity
const reactiveScore = [1](state).score;

Drag options to blanks, or click blank then click option'

AtoRefs

BtoRef

Cref

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Destructuring reactive object directly without toRefs.

Using toRef which only works for single properties.

Using toRefs on the reactive object allows destructuring while preserving reactivity.

4fill in blank

hard

Fill both blanks to create a reactive reference to 'title' and destructure 'author' and 'year' from the reactive book object.

Vue

import { reactive, [1], [2] } from 'vue';
const book = reactive({ title: 'Vue Guide', author: 'Evan', year: 2024 });
const titleRef = [1](book, 'title');
const { author, year } = [2](book);

Drag options to blanks, or click blank then click option'

AtoRef

BtoRefs

Cref

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up toRef and toRefs usage.

Using ref or reactive incorrectly here.

Use toRef for a single property and toRefs to destructure multiple properties reactively.

5fill in blank

hard

Fill all three blanks to create reactive references for 'firstName', destructure 'lastName', and create a reactive reference for 'age' from the user object.

Vue

import { reactive, [1], [2], [3] } from 'vue';
const user = reactive({ firstName: 'John', lastName: 'Doe', age: 25 });
const firstNameRef = [1](user, 'firstName');
const { lastName } = [2](user);
const ageRef = [3](user, 'age');

Drag options to blanks, or click blank then click option'

AtoRef

BtoRefs

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of toRef or toRefs.

Using toRefs for single properties.

Use toRef for single properties and toRefs for destructuring multiple properties reactively.