Vue.js: Component Lifecycle

<script setup>
const { ref, onMounted } = Vue

const user = ref(null)

onMounted(async () => {
  // 1. Load the initial data
  const res = await fetch('/api/user')
  user.value = await res.json()
  
  // 2. DOM operations (touch the real DOM)
  document.title = `${user.value.name} - Dashboard`
  
  // 3. Register global event listeners
  const handleResize = () => { console.log('Window resized') }
window.addEventListener('resize', handleResize)
  
  // 4. Set up timers
  const timer = setInterval(() => {
    console.log('Tick')
  }, 1000)
  
  // ❌ Note: the timer and listener must be cleaned up in onUnmounted
})
</script>

<script setup>
const { onMounted, onUnmounted } = Vue

let timer = null

onMounted(() => {
  timer = setInterval(() => console.log('Tick'), 1000)
  const handleResize = () => { console.log('Window resized') }
window.addEventListener('resize', handleResize)
})

// ✅ Cleanup: avoid memory leaks
onUnmounted(() => {
  clearInterval(timer)
  window.removeEventListener('resize', handleResize)
})
</script>

<!-- Usage in App.vue -->
<ErrorBoundary>
  <UserProfile :user-id="123" />  <!-- If it throws, ErrorBoundary catches it -->
</ErrorBoundary>

Two buttons, a blue panel reading Props count: 0, and a grey hint.
On load the console prints 1. onBeforeMount: about to mount then 2.
onMounted: mounted (hooks 7–9 stay silent: no error occurred and there is no keep-alive).
Clicking count++ prints 3. onBeforeUpdate: about to update followed by 4.
onUpdated: updated and updates the panel; clicking Unmount prints 5.
onBeforeUnmount: about to unmount then 6. onUnmounted: unmounted and removes the panel.

count++ (0)   [Unmount]

Props count: 0

Check the console output

console:
1. onBeforeMount: about to mount
2. onMounted: mounted

The buggy child renders first and is then replaced after ~100ms by a light-red banner reading ⚠️ Error: Cannot read properties of null (reading 'foo'), while the console logs Caught: ...
and Info: ....
Because the handler returns false, the error does not bubble up to the app-level handler, and the rest of the page keeps working.

⚠️ Error: Cannot read properties of null (reading 'foo')

1. Parent setup()
2. Parent setup
3. Parent setup()
4. Parent onBeforeMount
5. Child setup()
6. Child setup
7. Child setup()
8. Child onBeforeMount
9. Child onMounted
10. Parent onMounted

1. Parent onBeforeUnmount
2. Child onBeforeUnmount
3. Child onUnmounted
4. Parent onUnmounted

A grey hint followed by a bordered parent box containing the text Parent component and a yellow child box reading Child component.
The console proves the ordering: 3. Child onMounted appears first and 4.
Parent onMounted (parent waits for child) second, because a parent only mounts after all of its children are mounted.

Check the console: Child first, then Parent
┌─────────────────────────────┐
│ Parent component            │
│ ┌─────────────────────────┐ │
│ │ Child component         │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

console:
3. Child onMounted
4. Parent onMounted (parent waits for child)

<!-- Child component: cached by keep-alive -->
<script setup>
const { onActivated, onDeactivated } = Vue

// When the component is activated (restored from the cache)
onActivated(() => {
  console.log('Component activated')
  // Reload data, restore the scroll position, etc.
})

// When the component is deactivated (switched away but kept in the cache)
onDeactivated(() => {
  console.log('Component deactivated')
  // Save state, pause timers, etc.
})
</script>

Three tab buttons (the active one is green) and a green Home panel with an increment button and the hint Switch away and back;
count is kept.
Clicking the counter a few times, switching to Profile and back leaves the count intact — onDeactivated / onActivated fire instead of unmount/mount.
Home mounted is logged only once, on the very first render.

[Home] [Profile] [Settings]

┌──────────────────────────────────────┐
│ Home                                 │
│ [Count: 3]                           │
│ Switch away and back; count is kept  │
└──────────────────────────────────────┘

console:
🏠 Home mounted
🏠 Home activated
🏠 Home deactivated
👤 Profile mounted
👤 Profile activated

A button labeled Unmount Component and, below it, a bordered card that first shows Loading...
for about 500ms.
Then the card switches to Alice 1 and alice1@example.com, and the console logs ✅ Mounted: data loaded.
Clicking the button unmounts the component (the label becomes Mount Component), which logs 🧹 Unmounted: timer cleared and stops the 5-second tick;
clicking again remounts it and reloads the data.

[Unmount Component]
┌──────────────────────────────┐
│ Loading...                   │
└──────────────────────────────┘
        ↓ after 500ms
┌──────────────────────────────┐
│ Alice 1                      │
│ alice1@example.com           │
└──────────────────────────────┘