onMounted and onUnmounted in Vue - Step-by-Step Execution

Concept Flow - onMounted and onUnmounted

Component Setup

↓

onMounted Hook Registered

↓

Component Renders

↓

onMounted Runs

↓

Component Active

↓

Component Unmount Triggered

↓

onUnmounted Runs

↓

Component Removed

This flow shows how Vue runs onMounted after the component appears, and onUnmounted just before it disappears.

Execution Sample

Vue

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => console.log('Mounted'))
    onUnmounted(() => console.log('Unmounted'))
  }
}

This code logs messages when the component mounts and unmounts.

Execution Table

Step	Trigger	Action	Console Output	Component State
1	Component Setup	Register onMounted and onUnmounted hooks		Not rendered
2	Component Render	Render component to DOM		Rendered
3	onMounted Trigger	Run onMounted callback	Mounted	Rendered
4	User navigates away or component removed	Start unmount process		Unmounting
5	onUnmounted Trigger	Run onUnmounted callback	Unmounted	Unmounting
6	Component Removed	Remove component from DOM		Removed

💡 Component is removed from DOM after onUnmounted runs

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
componentState	Not rendered	Rendered	Unmounting	Removed

Key Moments - 2 Insights

Why does onMounted run after the component renders, not before?

Because onMounted waits until the component is fully inserted in the DOM, as shown in execution_table step 3 where the componentState changes to Rendered before onMounted runs.

Does onUnmounted run before or after the component is removed from the DOM?

onUnmounted runs just before the component is removed, as seen in execution_table steps 5 and 6 where onUnmounted runs during Unmounting state before removal.

Visual Quiz - 3 Questions

Look at the execution table, what is the componentState when onMounted runs?

A Unmounting

B Not rendered

C Rendered

D Removed

💡 Hint

Check the 'Component State' column at Step 3 in the execution_table.

At which step does the console output 'Unmounted' appear?

A Step 5

B Step 3

C Step 2

D Step 6

💡 Hint

Look at the 'Console Output' column in the execution_table for 'Unmounted'.

If the component never unmounts, which console output will NOT appear?

A 'Mounted'

B 'Unmounted'

C Both 'Mounted' and 'Unmounted'

D Neither 'Mounted' nor 'Unmounted'

💡 Hint

Refer to the console outputs in execution_table steps 3 and 5.

Concept Snapshot

onMounted runs after the component is added to the DOM.
onUnmounted runs just before the component is removed.
Use them to start or clean up side effects.
They run inside the setup() function in Vue 3.
onMounted happens once after render.
onUnmounted happens once before removal.

Full Transcript

This visual trace shows how Vue's onMounted and onUnmounted hooks work. First, the component setup registers these hooks. Then the component renders and appears in the DOM. Right after rendering, onMounted runs, signaling the component is ready. Later, when the component is about to be removed, onUnmounted runs to clean up. Finally, the component is removed from the DOM. The variable componentState tracks these stages: Not rendered, Rendered, Unmounting, and Removed. This helps understand when each hook runs in the component lifecycle.

Practice

1. What is the main purpose of the onMounted lifecycle hook in Vue?

easy

A. To run code when the component is destroyed

B. To run code before the component is created

C. To update the component's data reactively

D. To run code right after the component appears on the screen

Solution

1. Step 1: Understand the lifecycle timing of onMounted

   The onMounted hook runs after the component is inserted into the DOM and visible to the user.

2. Step 2: Compare with other lifecycle hooks

   onUnmounted runs before removal, and creation hooks run earlier. Updating data is reactive and not tied to onMounted.

3. Final Answer:

   To run code right after the component appears on the screen -> Option D

4. Quick Check:

   onMounted = runs after component appears [OK]

Hint: onMounted runs code after component shows up [OK]

Common Mistakes:

• Confusing onMounted with onUnmounted
• Thinking onMounted runs before creation
• Assuming onMounted updates data reactively

2. Which of the following is the correct syntax to use onUnmounted in a Vue 3 component with Composition API?

easy

A. onUnmounted(() => { console.log('Component removed') })

B. onUnmounted = () => { console.log('Component removed') }

C. onUnmounted { console.log('Component removed') }

D. onUnmounted(function) { console.log('Component removed') }

Solution

1. Step 1: Recall the correct function call syntax

   onUnmounted is a function that takes a callback function as an argument, so it must be called with parentheses and a function inside.

2. Step 2: Check each option's syntax

   onUnmounted(() => { console.log('Component removed') }) correctly calls onUnmounted with an arrow function. Options B, C, and D have invalid syntax or missing parentheses.

3. Final Answer:

   onUnmounted(() => { console.log('Component removed') }) -> Option A

4. Quick Check:

   onUnmounted(callback) syntax correct [OK]

Hint: Use onUnmounted as a function with a callback [OK]

Common Mistakes:

• Missing parentheses when calling onUnmounted
• Assigning onUnmounted instead of calling it
• Using incorrect braces or keywords

3. Consider this Vue 3 component code snippet:

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 }
  }
}

What will happen to count when the component is removed from the page?

medium

A. count will keep increasing even after component removal

B. count will stop increasing because the timer is cleared on unmount

C. count will reset to zero automatically

D. An error will occur because timer is undefined

Solution

1. Step 1: Understand the timer setup in onMounted

   The code starts a timer that increments count every second when the component mounts.

2. Step 2: Understand the cleanup in onUnmounted

   The timer is cleared with clearInterval(timer) when the component unmounts, stopping the increments.

3. Final Answer:

   count will stop increasing because the timer is cleared on unmount -> Option B

4. Quick Check:

   onUnmounted clears timer stopping count increment [OK]

Hint: onUnmounted cleans timers to stop background tasks [OK]

Common Mistakes:

• Thinking count resets automatically on unmount
• Assuming timer keeps running after unmount
• Confusing onMounted and onUnmounted roles

4. Identify the error in this Vue 3 setup function:

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

export default {
  setup() {
    const message = ref('Hello')

    onMounted(() => {
      console.log(message.value)
    })

    onUnmounted(() => {
      console.log('Goodbye')
    })

    onMounted(() => {
      console.log('Another mount')
    })

    return { message }
  }
}

medium

A. No error; multiple onMounted hooks are allowed and run in order

B. Multiple onMounted hooks are not allowed in the same setup

C. onUnmounted must be called before onMounted

D. message ref must be declared inside onMounted

Solution

1. Step 1: Check Vue 3 Composition API rules for lifecycle hooks

   Vue 3 allows multiple onMounted hooks inside the same setup function; they run in the order declared.

2. Step 2: Verify other options

   There is no requirement for onUnmounted to be before onMounted, and message can be declared outside hooks.

3. Final Answer:

   No error; multiple onMounted hooks are allowed and run in order -> Option A

4. Quick Check:

   Multiple onMounted hooks allowed [OK]

Hint: Multiple onMounted hooks run fine in setup [OK]

Common Mistakes:

• Thinking only one onMounted hook is allowed
• Believing lifecycle hooks must be in specific order
• Assuming refs must be declared inside hooks

5. You want to create a Vue 3 component that starts a WebSocket connection when it appears and closes it when it disappears. Which is the best way to use onMounted and onUnmounted to achieve this?

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let socket

    // What should go here?

    return {}
  }
}

hard

A. Use onUnmounted to open the socket and onMounted to close it

B. Open the socket outside lifecycle hooks and close it inside onUnmounted

C. Use onMounted to open the socket and onUnmounted to close it

D. Open and close the socket both inside onMounted

Solution

1. Step 1: Understand lifecycle timing for resource management

   Resources like WebSocket should be opened when the component appears (onMounted) and cleaned up before it disappears (onUnmounted).

2. Step 2: Match options with correct lifecycle usage

   Use onMounted to open the socket and onUnmounted to close it correctly uses onMounted to open and onUnmounted to close the socket. Other options misuse lifecycle hooks or open/close at wrong times.

3. Final Answer:

   Use onMounted to open the socket and onUnmounted to close it -> Option C

4. Quick Check:

   Open onMounted, close onUnmounted for resources [OK]

Hint: Open resource onMounted, close onUnmounted [OK]

Common Mistakes:

• Opening resource outside lifecycle hooks
• Closing resource in onMounted instead of onUnmounted
• Reversing open and close lifecycle hooks