Composable with lifecycle hooks in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the lifecycle hook for setup.

Vue

import { [1] } from 'vue';

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

Amounted

BonMounted

CcomponentDidMount

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using React lifecycle hooks like useEffect in Vue code.

Trying to import 'mounted' which is not a function.

In Vue 3, onMounted is the lifecycle hook used inside composables or setup functions.

2fill in blank

medium

Complete the code to define a composable that logs a message when mounted.

Vue

export function useLogger() {
  [1](() => {
    console.log('Component mounted');
  });
}

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

AonCreated

BuseEffect

Cmounted

DonMounted

Attempts:

3 left

💡 Hint

Common Mistakes

Using mounted as a function instead of a hook.

Confusing Vue hooks with React hooks.

The onMounted hook runs the callback when the component using the composable is mounted.

3fill in blank

hard

Fix the error in the composable to clean up on unmount.

Vue

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

export function useTimer() {
  let timer;
  onMounted(() => {
    timer = setInterval(() => console.log('tick'), 1000);
  });
  [1](() => {
    clearInterval(timer);
  });
}

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

AonUnmounted

BonDestroy

CbeforeUnmount

DonCleanup

Attempts:

3 left

💡 Hint

Common Mistakes

Using onDestroy which is not a Vue hook.

Trying to use beforeUnmount without importing it.

onUnmounted is the Vue lifecycle hook to run cleanup code when the component is removed.

4fill in blank

hard

Fill both blanks to create a composable that tracks window width and cleans up on unmount.

Vue

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

export function useWindowWidth() {
  const width = ref(window.innerWidth);

  function updateWidth() {
    width.value = window.innerWidth;
  }

  [1](() => {
    window.addEventListener('resize', updateWidth);
  });

  [2](() => {
    window.removeEventListener('resize', updateWidth);
  });

  return width;
}

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

AonMounted

BonUnmounted

Cwatch

DonUpdated

Attempts:

3 left

💡 Hint

Common Mistakes

Using watch instead of lifecycle hooks for event listeners.

Forgetting to remove the event listener on unmount.

onMounted adds the event listener when the component mounts, and onUnmounted removes it when the component unmounts.

5fill in blank

hard

Fill all three blanks to create a composable that logs on mount, updates a count on button click, and cleans up on unmount.

Vue

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

export function useCounter() {
  const count = ref(0);

  [1](() => {
    console.log('Counter mounted');
  });

  function increment() {
    count.value++;
  }

  [3](() => {
    console.log('Counter unmounted');
  });

  return { count, increment };
}

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

AonMounted

BonUpdated

ConUnmounted

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing all lifecycle hooks.

Using watch instead of onUpdated for update lifecycle.

onMounted logs when mounted, onUpdated can track updates (though not used here), and onUnmounted logs on unmount.

Practice

1. What is the main purpose of using lifecycle hooks inside a Vue composable?

easy

A. To run code automatically when a component starts or stops

B. To define the component's template structure

C. To style the component with CSS

D. To create new Vue components

Solution

1. Step 1: Understand lifecycle hooks role

   Lifecycle hooks let you run code at specific times in a component's life, like when it starts or stops.

2. Step 2: Connect lifecycle hooks with composables

   Using lifecycle hooks inside composables allows shared logic to run automatically when components use the composable.

3. Final Answer:

   To run code automatically when a component starts or stops -> Option A

4. Quick Check:

   Lifecycle hooks run code at component start/stop = A [OK]

Hint: Lifecycle hooks run code on component start or cleanup [OK]

Common Mistakes:

• Thinking lifecycle hooks define templates
• Confusing styling with lifecycle hooks
• Believing composables create components

2. Which of the following is the correct way to import and use the onMounted lifecycle hook inside a Vue 3 composable?

easy

A. import { onMounted } from 'vue'; onMounted = () => { /* code */ };

B. import onMounted from 'vue'; onMounted(() => { /* code */ });

C. import { onMounted } from 'vue'; onMounted(() => { /* code */ });

D. import { onMounted } from 'vue'; onMounted.function(() => { /* code */ });

Solution

1. Step 1: Check import syntax

   Vue lifecycle hooks like onMounted are named exports, so use curly braces in import.

2. Step 2: Check usage syntax

   onMounted is a function that takes a callback, so call it with a function argument.

3. Final Answer:

   import { onMounted } from 'vue'; onMounted(() => { /* code */ }); -> Option C

4. Quick Check:

   Correct import and call syntax = A [OK]

Hint: Use curly braces to import lifecycle hooks from 'vue' [OK]

Common Mistakes:

• Importing without curly braces
• Assigning onMounted to a function instead of calling it
• Using incorrect method like onMounted.function

3. Given this composable code, what will be logged when a component using it is mounted?

import { ref, onMounted } from 'vue';
export function useLogger() {
  const message = ref('Hello');
  onMounted(() => {
    console.log(message.value);
  });
  return { message };
}

medium

A. Hello

B. undefined

C. null

D. An error is thrown

Solution

1. Step 1: Understand ref initialization

   The message ref is initialized with the string 'Hello'.

2. Step 2: Check onMounted callback

   When the component mounts, the callback logs message.value, which is 'Hello'.

3. Final Answer:

   Hello -> Option A

4. Quick Check:

   Ref value logged on mount = B [OK]

Hint: Ref values accessed with .value inside lifecycle hooks [OK]

Common Mistakes:

• Logging ref without .value
• Expecting undefined before mount
• Thinking onMounted runs before ref initialization

4. Identify the error in this composable using lifecycle hooks:

import { onMounted, onUnmounted } from 'vue';
export function useTimer() {
  let timer = null;
  onMounted(() => {
    timer = setInterval(() => console.log('tick'), 1000);
  });
  onUnmounted(() => {
    clearInterval(timer);
  });
  return {};
}

medium

A. timer should be a ref to persist between hooks

B. onUnmounted should be onBeforeUnmount

C. setInterval callback syntax is wrong

D. No error, code works correctly

Solution

1. Step 1: Check variable scope and usage

   Variable timer is declared in composable scope and updated in onMounted, accessible in onUnmounted.

2. Step 2: Verify lifecycle hooks usage

   onMounted sets interval, onUnmounted clears it correctly to avoid memory leaks.

3. Final Answer:

   No error, code works correctly -> Option D

4. Quick Check:

   Proper timer setup and cleanup = D [OK]

Hint: Variables in composable scope persist across lifecycle hooks [OK]

Common Mistakes:

• Thinking timer must be a ref
• Confusing onUnmounted with onBeforeUnmount
• Misunderstanding setInterval callback syntax

5. You want to create a composable that fetches data when a component mounts and cancels the fetch if the component unmounts before completion. Which lifecycle hooks and pattern should you use inside the composable?

hard

A. Use onUnmounted to start fetch and onMounted to abort fetch

B. Use onMounted to start fetch and onUnmounted to abort fetch with an AbortController

C. Use onBeforeMount to start fetch and onMounted to abort fetch

D. Use onMounted to start fetch and no cleanup is needed

Solution

1. Step 1: Determine when to start fetch

   Fetching data should start when the component is fully mounted, so use onMounted.

2. Step 2: Handle cleanup on unmount

   To cancel fetch if component unmounts early, use onUnmounted to abort the fetch using an AbortController.

3. Final Answer:

   Use onMounted to start fetch and onUnmounted to abort fetch with an AbortController -> Option B

4. Quick Check:

   Fetch start on mount, abort on unmount = C [OK]

Hint: Start fetch on mount, abort on unmount with AbortController [OK]

Common Mistakes:

• Starting fetch too early or too late
• Not aborting fetch on unmount causing leaks
• Using wrong lifecycle hooks for cleanup