Vue Lifecycle Hooks

<template>
  <div>
    <p>Users: {{ users.length }}</p>
    <p>Timer: {{ seconds }}s</p>
    <div ref="chartContainer"></div>
  </div>
</template>

<script setup>
import {
  ref, onBeforeMount, onMounted,
  onBeforeUpdate, onUpdated,
  onBeforeUnmount, onUnmounted,
  onErrorCaptured
} from 'vue'

const users = ref([])
const seconds = ref(0)
const chartContainer = ref(null)
let timer = null

// onBeforeMount — component not yet in DOM
onBeforeMount(() => {
  console.log('Before mount — DOM not ready yet')
})

// onMounted — component is in DOM, refs are available
onMounted(async () => {
  console.log('Mounted — DOM is ready')

  // 1. Fetch initial data
  const res = await fetch('/api/users')
  users.value = await res.json()

  // 2. Access DOM element via ref
  console.log('Chart container:', chartContainer.value)
  // initChart(chartContainer.value)  // init third-party library

  // 3. Start timer
  timer = setInterval(() => seconds.value++, 1000)

  // 4. Add event listener
  window.addEventListener('resize', handleResize)
})

// onBeforeUpdate — before DOM re-renders
onBeforeUpdate(() => {
  console.log('Before update — old DOM still accessible')
})

// onUpdated — after DOM re-renders
onUpdated(() => {
  console.log('Updated — DOM reflects new data')
  // Scroll to bottom of list after update
  // listEl.value.scrollTop = listEl.value.scrollHeight
})

// onBeforeUnmount — cleanup before destruction
onBeforeUnmount(() => {
  console.log('Before unmount — cleanup time')
  clearInterval(timer)
  window.removeEventListener('resize', handleResize)
})

// onUnmounted — component is gone
onUnmounted(() => {
  console.log('Unmounted — component destroyed')
})

// onErrorCaptured — catch errors from child components
onErrorCaptured((error, instance, info) => {
  console.error('Child error:', error, info)
  return false  // prevent error from propagating
})

function handleResize() {
  console.log('Window resized:', window.innerWidth)
}
</script>