onBeforeMount and onBeforeUnmount in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

When does onBeforeMount run in a Vue component?

Consider a Vue 3 component using the Composition API. When exactly does the onBeforeMount lifecycle hook execute?

A When the component is unmounted from the DOM.

B Right after the component is mounted to the DOM.

C Just before the component is mounted to the DOM.

D When the component is created but before setup runs.

💡 Hint

Think about the name: 'before mount' means before the component appears in the page.

The onBeforeMount hook runs just before the component is inserted into the DOM. It allows you to run code right before the component becomes visible.

❓ component_behavior

intermediate

What happens when onBeforeUnmount is triggered?

In a Vue 3 component, what is the purpose of the onBeforeUnmount lifecycle hook?

A It runs before the component is removed from the DOM.

B It runs after the component is removed from the DOM.

C It runs when the component is first created.

D It runs when the component is updated.

💡 Hint

The name suggests it runs just before unmounting.

onBeforeUnmount runs right before the component is removed from the DOM. It is useful for cleanup tasks like removing event listeners.

❓ state_output

advanced

What is the console output order for these hooks?

Given this Vue 3 component code, what is the order of console logs when the component mounts and then unmounts?

Vue

import { onBeforeMount, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => console.log('Before Mount'));
    onBeforeUnmount(() => console.log('Before Unmount'));
  }
}

A "Before Unmount" then "Before Mount"

B Only "Before Mount" is logged

C Only "Before Unmount" is logged

D "Before Mount" then "Before Unmount"

💡 Hint

Think about the lifecycle: mount happens before unmount.

The onBeforeMount hook runs before the component is added to the DOM, so its log appears first. Later, when the component is about to be removed, onBeforeUnmount runs, logging second.

🔧 Debug

advanced

Why does this onBeforeUnmount cleanup not work?

This Vue 3 component adds a window event listener but the cleanup in onBeforeUnmount does not remove it. Why?

import { onBeforeUnmount } from 'vue';

export default {
  setup() {
    function onResize() { console.log('resized'); }
    window.addEventListener('resize', onResize);

    onBeforeUnmount(() => {
      window.removeEventListener('resize', () => console.log('resized'));
    });
  }
}

A window.removeEventListener requires the event type to be uppercase.

B The function passed to removeEventListener is a new anonymous function, not the original listener.

C onBeforeUnmount runs too late to remove event listeners.

D The event listener was never added, so removal fails silently.

💡 Hint

Check if the function references match exactly.

Event listeners must be removed with the exact same function reference used when adding. Here, an anonymous function is passed to removeEventListener, which is different from the original onResize function, so the listener remains.

🧠 Conceptual

expert

How do onBeforeMount and onBeforeUnmount differ from onMounted and onUnmounted?

Choose the statement that best describes the difference between onBeforeMount/onBeforeUnmount and onMounted/onUnmounted hooks in Vue 3 Composition API.

A <code>onBeforeMount</code> and <code>onBeforeUnmount</code> run immediately before mounting and unmounting, while <code>onMounted</code> and <code>onUnmounted</code> run immediately after those events.

B <code>onBeforeMount</code> and <code>onBeforeUnmount</code> run only once, but <code>onMounted</code> and <code>onUnmounted</code> run multiple times during component updates.

C <code>onBeforeMount</code> and <code>onBeforeUnmount</code> are deprecated hooks replaced by <code>onMounted</code> and <code>onUnmounted</code>.

D <code>onBeforeMount</code> and <code>onBeforeUnmount</code> run only on server-side rendering, while <code>onMounted</code> and <code>onUnmounted</code> run on client-side.

💡 Hint

Focus on the timing of when these hooks run relative to mounting and unmounting.

onBeforeMount and onBeforeUnmount run just before the component is mounted or unmounted, respectively. In contrast, onMounted and onUnmounted run immediately after those lifecycle events.