Vue Lifecycle Hooks

Component Lifecycle:

                createApp().mount()
                      │
              ┌───────▼────────┐
              │ setup() runs   │ ← onBeforeCreate (Options API only)
              │ refs created   │ ← onCreated (Options API only)
              └───────┬────────┘
                      │
              ┌───────▼────────┐
              │ onBeforeMount  │ ← Template compiled, not yet in DOM
              └───────┬────────┘
                      │
              ┌───────▼────────┐
              │  onMounted     │ ← Component in DOM ✅ Fetch data here!
              └───────┬────────┘
                      │
              [Data Changes?]
                      │
              ┌───────▼────────┐
              │ onBeforeUpdate │ ← Before DOM patches
              └───────┬────────┘
                      │
              ┌───────▼────────┐
              │   onUpdated    │ ← After DOM patches
              └───────┬────────┘
                      │
              [Component removed?]
                      │
              ┌───────▼────────┐
              │ onBeforeUnmount│ ← Component still accessible
              └───────┬────────┘
                      │
              ┌───────▼────────┐
              │  onUnmounted   │ ← Cleanup: timers, listeners ✅
              └────────────────┘

<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onActivated,
  onDeactivated
} from &#039;vue'

const count = ref(0)
const users = ref([])
const loading = ref(false)
let timer = null

// onBeforeMount: Called before component is mounted to DOM
// DOM not accessible yet
onBeforeMount(() => {
  console.log(&#039;Before mount — DOM not ready yet')
})

// onMounted: Called after component is mounted to DOM
// ✅ Best place for: API calls, DOM manipulation, 3rd party library init
onMounted(async () => {
  console.log(&#039;Component mounted — DOM ready!')

  // ✅ Fetch initial data
  loading.value = true
  try {
    const response = await fetch(&#039;https://jsonplaceholder.typicode.com/users?_limit=3')
    users.value = await response.json()
  } finally {
    loading.value = false
  }

  // ✅ Start intervals, subscriptions
  timer = setInterval(() => count.value++, 1000)

  // ✅ Access DOM elements
  const el = document.querySelector(&#039;#my-element')
  if (el) el.focus()
})

// onBeforeUpdate: Reactive data changed, DOM not yet updated
onBeforeUpdate(() => {
  console.log(&#039;Data changed — about to patch DOM')
})

// onUpdated: DOM has been updated
// ✅ Access updated DOM (but don't mutate state here — infinite loop!)
onUpdated(() => {
  console.log(&#039;DOM patched — count is now:', count.value)
})

// onBeforeUnmount: Component about to be removed
onBeforeUnmount(() => {
  console.log(&#039;About to unmount — save state, pause timers')
})

// onUnmounted: Component removed from DOM
// ✅ ALWAYS clean up here!
onUnmounted(() => {
  console.log(&#039;Component unmounted')
  clearInterval(timer)                     // Clear timer
  window.removeEventListener(&#039;resize', onResize)  // Remove listeners
})

// onErrorCaptured: Catch errors from child components
onErrorCaptured((err, component, info) => {
  console.error(&#039;Error caught:', err, info)
  return false  // Prevent propagation
})

// onActivated/onDeactivated: For <KeepAlive> wrapped components
onActivated(() => console.log(&#039;Component activated from cache'))
onDeactivated(() => console.log(&#039;Component deactivated to cache'))

function onResize() { console.log(&#039;Window resized') }
</script>

<template>
  <div>
    <div v-if="loading">Loading users...</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <p>Timer: {{ count }}s</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from &#039;vue'

// Pattern 1: Cleanup subscription
const mouseX = ref(0)
const mouseY = ref(0)

function trackMouse(e) {
  mouseX.value = e.clientX
  mouseY.value = e.clientY
}

onMounted(() => {
  window.addEventListener(&#039;mousemove', trackMouse)
})
onUnmounted(() => {
  window.removeEventListener(&#039;mousemove', trackMouse)
})

// Pattern 2: Third-party library
import { ref, onMounted, onUnmounted } from &#039;vue'

const chartEl = ref(null)  // Template ref
let chart = null

onMounted(() => {
  // Initialize Chart.js or any library
  // chart = new Chart(chartEl.value, { ... })
})
onUnmounted(() => {
  // chart?.destroy()
})
</script>

<template>
  <p>Mouse: {{ mouseX }}, {{ mouseY }}</p>
  <canvas ref="chartEl"></canvas>
</template>