0
0
Vueframework~10 mins

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

Choose your learning style9 modes available
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
StepTriggerActionConsole OutputComponent State
1Component SetupRegister onMounted and onUnmounted hooksNot rendered
2Component RenderRender component to DOMRendered
3onMounted TriggerRun onMounted callbackMountedRendered
4User navigates away or component removedStart unmount processUnmounting
5onUnmounted TriggerRun onUnmounted callbackUnmountedUnmounting
6Component RemovedRemove component from DOMRemoved
💡 Component is removed from DOM after onUnmounted runs
Variable Tracker
VariableStartAfter Step 3After Step 5Final
componentStateNot renderedRenderedUnmountingRemoved
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
Test your understanding
Look at the execution table, what is the componentState when onMounted runs?
AUnmounting
BNot rendered
CRendered
DRemoved
💡 Hint
Check the 'Component State' column at Step 3 in the execution_table.
At which step does the console output 'Unmounted' appear?
AStep 5
BStep 3
CStep 2
DStep 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'
CBoth 'Mounted' and 'Unmounted'
DNeither '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.