Why the Composition API exists in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Composition API function for reactive state.

Vue

import { [1] } from 'vue';

const count = [1](0);

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

Awatch

Breactive

Ccomputed

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' instead of 'ref' for a primitive value.

Trying to use 'computed' to create state.

Importing 'watch' which is for side effects, not state.

The ref function creates a reactive reference to a value, which is the basic way to hold reactive state in the Composition API.

2fill in blank

medium

Complete the code to define a reactive object using the Composition API.

Vue

import { [1] } from 'vue';

const state = [1]({ count: 0 });

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

Acomputed

Bref

Creactive

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ref' for an object instead of 'reactive'.

Trying to use 'computed' to create reactive state.

Confusing 'watch' with state creation.

The reactive function creates a reactive object, which is useful for grouping multiple reactive properties together.

3fill in blank

hard

Fix the error in the code by choosing the correct way to access a reactive ref's value.

Vue

import { ref } from 'vue';

const count = ref(0);
console.log(count[1]);

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

A.value

B.val

C[]

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access the ref like a normal variable without '.value'.

Using '.val' which is incorrect.

Using parentheses or brackets which cause errors.

To get the actual value inside a ref, you must use the .value property.

4fill in blank

hard

Fill both blanks to create a computed property that doubles a reactive count.

Vue

import { ref, [1] } from 'vue';

const count = ref(1);
const double = [2](() => count.value * 2);

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

Acomputed

Breactive

Cwatch

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ref' instead of 'computed' for derived values.

Trying to use 'reactive' or 'watch' here.

The computed function creates a reactive value that updates automatically based on other reactive values.

5fill in blank

hard

Fill all three blanks to create a reactive object, a computed property, and a watcher that logs changes.

Vue

import { [1], [2], [3] } from 'vue';

const state = [1]({ count: 0 });
const double = [2](() => state.count * 2);
[3](() => console.log('Count changed:', state.count));

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

Areactive

Bcomputed

Cwatch

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'ref' and 'reactive' for objects.

Using 'ref' instead of 'computed' for derived values.

Confusing 'watch' with 'computed'.

reactive creates a reactive object, computed creates a derived reactive value, and watch runs code when reactive data changes.