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.