Composable with reactive state in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive count variable inside a composable.

Vue

import { [1] } from 'vue';

export function useCounter() {
  const count = [1](0);
  return { count };
}

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

Aref

Bcomputed

Creactive

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a number

Using computed when no dependencies exist

Using watch which is for side effects

We use ref to create a reactive primitive value like a number.

2fill in blank

medium

Complete the code to define a function that increments the count in the composable.

Vue

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  function increment() {
    count[1]++;
  }
  return { count, increment };
}

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

A.count

B.value

C()

D[0]

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to increment the ref directly without .value

Using array or function syntax incorrectly

To change the value inside a ref, we use .value.

3fill in blank

hard

Fix the error in the composable by completing the code to return reactive state correctly.

Vue

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  return [1];
}

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

Acount.value

Bcount

C[count]

D{ count }

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the ref directly instead of an object

Returning the value instead of the ref

Returning an array instead of an object

The composable should return an object with the reactive properties so they can be used by components.

4fill in blank

hard

Fill both blanks to create a composable that doubles the count reactively using a computed property.

Vue

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

export function useCounter() {
  const count = ref(0);
  const double = [2](() => count.value * 2);
  return { count, double };
}

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

Acomputed

Bwatch

Creactive

DtoRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using watch instead of computed for derived reactive values

Using reactive which is for objects

Using toRef which creates a ref from a reactive object property

We import and use computed to create a reactive value based on count.

5fill in blank

hard

Fill all three blanks to create a composable that tracks count, increments it, and resets it to zero.

Vue

import { [1] } from 'vue';

export function useCounter() {
  const count = [2](0);
  function increment() {
    count.value++;
  }
  function reset() {
    count.value = [3];
  }
  return { count, increment, reset };
}

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

Aref

Breactive

C0

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a number

Resetting count to null instead of zero

We use ref to create the reactive count, and reset sets it back to zero.