onMounted and onUnmounted in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Vue component using onMounted runs?

Consider a Vue 3 component that uses onMounted to log a message. What will you see in the browser console when the component first appears?

Vue

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is now mounted');
    });
  }
}

A The message 'Component is now mounted' appears once in the console when the component is added to the page.

B The message appears repeatedly every second after the component mounts.

C The message appears before the component is rendered on the page.

D No message appears because onMounted only works with class components.

💡 Hint

Think about when onMounted runs in the component lifecycle.

onMounted runs once after the component is inserted into the DOM. It is perfect for running code that needs the component to be visible, like logging or fetching data.

❓ component_behavior

intermediate

What is the effect of onUnmounted in a Vue component?

In a Vue 3 component, onUnmounted is used to clean up resources. What happens when the component is removed from the page?

Vue

import { onUnmounted } from 'vue';

export default {
  setup() {
    onUnmounted(() => {
      console.log('Component is now unmounted');
    });
  }
}

A The message appears when the component is first created.

B The message appears every time the component updates.

C The message 'Component is now unmounted' appears once in the console when the component is removed from the page.

D No message appears because onUnmounted only works with class components.

💡 Hint

Remember when onUnmounted runs in the component lifecycle.

onUnmounted runs once when the component is removed from the DOM. It is used to clean up things like timers or event listeners.

❓ state_output

advanced

What is the console output when using both onMounted and onUnmounted in a Vue component?

Given this Vue 3 component, what will the console show when the component is mounted and then unmounted?

Vue

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('Mounted with count:', count.value);
    });

    onUnmounted(() => {
      console.log('Unmounted with count:', count.value);
    });

    return { count };
  }
}

A Console logs 'Mounted with count: 0' when mounted and 'Unmounted with count: 0' when unmounted.

B Console logs 'Mounted with count: 0' twice and no unmounted message.

C Console logs only 'Unmounted with count: 0' when unmounted.

D No console output because count is not updated.

💡 Hint

Think about when each lifecycle hook runs and the initial value of count.

The onMounted hook runs once after mounting and logs the initial count value 0. The onUnmounted hook runs once after unmounting and logs the same count value.

🔧 Debug

advanced

Why does this Vue component's onUnmounted callback never run?

Look at this Vue 3 component. Why does the message inside onUnmounted never appear in the console?

Vue

import { onUnmounted } from 'vue';

export default {
  setup() {
    onUnmounted(() => {
      console.log('Component unmounted');
    });
  },
  template: '<div>Test</div>'
};

A The component is missing a <code>name</code> property, so hooks don't run.

B <code>onUnmounted</code> must be used inside <code>mounted()</code> hook to work.

C The console.log is inside the wrong lifecycle hook; it should be <code>onBeforeUnmount</code>.

D The component is never removed from the DOM, so <code>onUnmounted</code> never runs.

💡 Hint

Think about when onUnmounted runs and what triggers it.

onUnmounted only runs when the component is removed from the DOM. If the component stays visible, the hook never triggers.

🧠 Conceptual

expert

How do onMounted and onUnmounted help manage side effects in Vue 3?

Which statement best explains the role of onMounted and onUnmounted in managing side effects like timers or event listeners?

A <code>onMounted</code> and <code>onUnmounted</code> only run once when the app starts and stops, not per component.

B <code>onMounted</code> sets up side effects after the component appears, and <code>onUnmounted</code> cleans them up when it disappears, preventing memory leaks.

C <code>onMounted</code> and <code>onUnmounted</code> are used only for updating the component's template, not for side effects.

D <code>onMounted</code> cleans up side effects before the component appears, and <code>onUnmounted</code> sets them up after it disappears.

💡 Hint

Think about how to avoid leftover timers or listeners after a component is gone.

onMounted is used to start side effects safely after the component is visible. onUnmounted stops or cleans up those side effects to avoid memory leaks or errors.