Composables for reusable logic in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vue Composition API function needed to create a reactive reference.

Vue

import { [1] } from 'vue';

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 primitive values.

Confusing 'computed' with 'ref'.

The ref function creates a reactive reference to a value, which is essential for composables.

2fill in blank

medium

Complete the code to define a composable function that returns a reactive count.

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' which is for objects, not primitives.

Using 'computed' which is for derived values.

Inside a composable, ref(0) creates a reactive count starting at zero.

3fill in blank

hard

Fix the error in the composable by completing the missing reactive function.

Vue

import { [1] } from 'vue';

export function useToggle() {
  const state = [1](false);
  function toggle() {
    state.value = !state.value;
  }
  return { state, toggle };
}

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

Awatch

Breactive

Cref

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' which is for objects, not booleans.

Forgetting to import the function.

The ref function is needed to create a reactive boolean state that can be toggled.

4fill in blank

hard

Fill both blanks to create a composable that returns a reactive message and a function to update it.

Vue

import { [1] } from 'vue';

export function useMessage() {
  const message = [2]('Hello');
  function update(newMsg) {
    message.value = newMsg;
  }
  return { message, update };
}

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' for a string, which is not correct.

Using 'computed' when no derived value is needed.

Both importing and using ref is correct here to create a reactive string message.

5fill in blank

hard

Fill all three blanks to create a composable that tracks a number and provides increment and reset functions.

Vue

import { [1] } from 'vue';

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

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

Aref

Breactive

C0

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' for a primitive number.

Forgetting to reset to zero.

Use ref to create a reactive number starting at zero, and reset sets it back to 0.