onMounted and onUnmounted in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the onMounted lifecycle hook do in Vue 3?

It runs a function right after the component is added to the page (DOM). Think of it like saying "Hey, I am ready now!"

beginner

When is the onUnmounted hook called in a Vue component?

It runs a function just before the component is removed from the page. It's like cleaning up your desk before leaving.

beginner

How do you import <code>onMounted</code> and <code>onUnmounted</code> in Vue 3 Composition API?

You import them from 'vue' like this: <br><code>import { onMounted, onUnmounted } from 'vue'</code>

intermediate

Why is onUnmounted useful in Vue components?

It helps you stop timers, remove event listeners, or clean resources so your app stays fast and tidy.

intermediate

Show a simple example of using onMounted and onUnmounted in a Vue component.

Example:<br><pre>import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    let timer

    onMounted(() => {
      timer = setInterval(() => {
        count.value++
      }, 1000)
    })

    onUnmounted(() => {
      clearInterval(timer)
    })

    return { count }
  }
}</pre>

What is the main purpose of onMounted in Vue 3?

A Run code after the component appears on the page

B Run code before the component is created

C Run code when the component is destroyed

D Run code before the component appears on the page

onMounted runs after the component is added to the page (DOM), so option A is correct.

Which hook should you use to clean up timers or event listeners in Vue 3?

A onUnmounted

B onMounted

C onCreated

D onUpdated

onUnmounted is used to clean up before the component is removed, so A is correct.

How do you import onMounted in a Vue 3 component?

A import { onMounted } from 'vue-router'

B import { onMounted } from 'vue'

C import onMounted from 'vue'

D import onMounted from 'vue-router'

You import onMounted from 'vue' using curly braces, so C is correct.

When does onUnmounted run in the component lifecycle?

A Right after the component is mounted

B Before the component is mounted

C Before the component is removed from the DOM

D After the component updates

onUnmounted runs just before the component is removed from the DOM, so B is correct.

Which of these is a good use case for onMounted?

A Stopping a timer when the component disappears

B Removing event listeners

C Resetting component data before removal

D Starting a timer when the component appears

onMounted is perfect for starting things like timers when the component appears, so D is correct.

Explain in your own words what onMounted and onUnmounted hooks do in Vue 3.

Think about when you start and stop something when entering or leaving a room.

Describe a practical example where you would use both onMounted and onUnmounted in a Vue component.

Imagine turning on a light when you enter a room and turning it off when you leave.