Lifecycle Hooks

setup()
  ↓
onBeforeMount     → DOM 생성 직전
  ↓
onMounted         → DOM에 마운트 완료
  ↓
(반응형 데이터 변경 시)
onBeforeUpdate    → DOM 업데이트 직전
  ↓
onUpdated         → DOM 업데이트 완료
  ↓
(컴포넌트 제거 시)
onBeforeUnmount   → DOM에서 제거 직전
  ↓
onUnmounted       → DOM에서 제거 완료

<script setup lang="ts">
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'

const count = ref(0)
const containerRef = ref<HTMLDivElement>()

// --- 마운트 단계 ---

onBeforeMount(() => {
  // DOM이 아직 생성되지 않음
  // 서버사이드 렌더링에서도 호출됨
  console.log('마운트 직전 — DOM 없음')
  console.log(containerRef.value) // undefined
})

onMounted(() => {
  // DOM에 마운트 완료 — DOM 접근 가능
  // API 호출, 이벤트 리스너 등록, 타이머 설정
  console.log('마운트 완료 — DOM 접근 가능')
  console.log(containerRef.value) // <div>...</div>

  // 실전: API 호출
  // fetchData()

  // 실전: DOM 기반 라이브러리 초기화
  // initChart(containerRef.value)
})

// --- 업데이트 단계 ---

onBeforeUpdate(() => {
  // 반응형 데이터가 변경되어 DOM이 업데이트되기 직전
  console.log('업데이트 직전 — 이전 DOM 상태')
})

onUpdated(() => {
  // DOM 업데이트 완료
  // 주의: 여기서 상태를 변경하면 무한 루프 위험!
  console.log('업데이트 완료 — 새로운 DOM 상태')
})

// --- 언마운트 단계 ---

onBeforeUnmount(() => {
  // 컴포넌트가 DOM에서 제거되기 직전
  // 아직 DOM에 접근 가능
  console.log('언마운트 직전')
})

onUnmounted(() => {
  // 컴포넌트가 DOM에서 완전히 제거됨
  // 클린업: 이벤트 리스너 제거, 타이머 정리, 구독 해제
  console.log('언마운트 완료')
})
</script>

<template>
  <div ref="containerRef">
    <p>{{ count }}</p>
    <button @click="count++">증가</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const scrollY = ref(0)

const handleScroll = () => {
  scrollY.value = window.scrollY
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  // 메모리 누수 방지 — 반드시 해제
  window.removeEventListener('scroll', handleScroll)
})
</script>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const elapsed = ref(0)
let intervalId: ReturnType<typeof setInterval>

onMounted(() => {
  intervalId = setInterval(() => {
    elapsed.value++
  }, 1000)
})

onUnmounted(() => {
  // 타이머 정리 — 컴포넌트가 사라져도 타이머가 남아있으면 메모리 누수
  clearInterval(intervalId)
})
</script>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const chartRef = ref<HTMLCanvasElement>()
let chartInstance: any = null

onMounted(() => {
  if (chartRef.value) {
    // 차트 라이브러리 초기화 (DOM 필요)
    // chartInstance = new Chart(chartRef.value, config)
  }
})

onUnmounted(() => {
  // 차트 인스턴스 정리
  chartInstance?.destroy()
  chartInstance = null
})
</script>

<template>
  <canvas ref="chartRef"></canvas>
</template>

<script setup lang="ts">
import {
  onActivated,
  onDeactivated,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered
} from 'vue'

// KeepAlive 관련
onActivated(() => {
  // KeepAlive로 캐시된 컴포넌트가 다시 활성화될 때
  console.log('활성화됨')
})

onDeactivated(() => {
  // KeepAlive로 캐시된 컴포넌트가 비활성화될 때
  console.log('비활성화됨')
})

// 에러 처리
onErrorCaptured((error, instance, info) => {
  console.error('자식 컴포넌트 에러:', error)
  console.log('에러 발생 위치:', info)
  // false를 반환하면 에러 전파를 중단
  return false
})

// 디버깅 전용 (개발 모드에서만)
onRenderTracked((event) => {
  // 반응형 의존성이 추적될 때
  console.log('추적:', event)
})

onRenderTriggered((event) => {
  // 반응형 의존성이 변경되어 리렌더링이 트리거될 때
  console.log('트리거:', event)
})
</script>

<script setup lang="ts">
import { onMounted, onServerPrefetch } from 'vue'

// SSR 전용 훅 — 서버에서 컴포넌트 렌더링 전 데이터 프리페치
onServerPrefetch(async () => {
  // 서버에서만 실행됨
  // await fetchData()
})

onMounted(() => {
  // 클라이언트에서만 실행됨!
  // SSR 환경에서는 호출되지 않음
})
</script>