onBeforeMount and onBeforeUnmount in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the onBeforeMount lifecycle hook in Vue?

onBeforeMount runs just before the component is added to the page. It lets you run code right before the component appears on screen.

beginner

When does onBeforeUnmount run in a Vue component?

onBeforeUnmount runs right before the component is removed from the page. It is useful to clean up things like timers or event listeners.

intermediate

How do onBeforeMount and onBeforeUnmount help manage resources in Vue components?

<p>They let you start or stop tasks at the right time. For example, start a timer before showing the component and stop it before removing the component to avoid memory leaks.</p>

beginner

Show a simple example of using onBeforeMount and onBeforeUnmount in Vue's <script setup>.

<pre>import { onBeforeMount, onBeforeUnmount } from 'vue'

onBeforeMount(() =&gt; {
  console.log('Component will mount soon')
})

onBeforeUnmount(() =&gt; {
  console.log('Component will unmount soon')
})</pre>

intermediate

Why is it important to use onBeforeUnmount to clean up in Vue components?

Cleaning up prevents problems like memory leaks or unwanted background tasks running after the component is gone. It keeps your app fast and stable.

When does onBeforeMount run in a Vue component?

A Right after the component is removed from the DOM

B Right before the component is added to the DOM

C After the component is mounted

D When the component is updated

onBeforeMount runs just before the component is added to the page (DOM).

What is a common use for onBeforeUnmount in Vue?

A To update the component's state

B To start a timer when the component loads

C To fetch data from an API

D To clean up event listeners before the component is removed

onBeforeUnmount is used to clean up things like event listeners before the component is removed.

Which Vue lifecycle hook runs after the component is mounted?

A onMounted

B onBeforeMount

C onBeforeUnmount

D onUpdated

onMounted runs after the component is added to the DOM.

What happens if you forget to clean up in onBeforeUnmount?

A Memory leaks or unwanted background tasks may occur

B The component will never unmount

C The component will mount twice

D Nothing, cleanup is optional

Not cleaning up can cause memory leaks or background tasks to keep running, slowing down your app.

Which of these is true about onBeforeMount and onBeforeUnmount?

A Both run after the component is mounted

B Both run before the component is added to the DOM

C <code>onBeforeMount</code> runs before mounting, <code>onBeforeUnmount</code> runs before unmounting

D They run only when the component updates

onBeforeMount runs before mounting, and onBeforeUnmount runs before unmounting the component.

Explain in your own words what onBeforeMount and onBeforeUnmount do in a Vue component.

Think about what happens right before a component shows or hides.

Describe a real-life example where you might use onBeforeUnmount in a Vue app.

Imagine turning off things when leaving a room.