Vue3ライフサイクルをわかりやすく解説 -- 全フックの発火順序・使い分け・実装例

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

console.log('1. setup() -- リアクティブデータの初期化開始')

const count = ref(0)

onBeforeMount(() => {
  console.log('2. onBeforeMount -- DOM描画の直前')
})

onRenderTracked((e) => {
  console.log('   onRenderTracked -- 依存関係を追跡:', e.key)
})

onMounted(() => {
  console.log('3. onMounted -- DOMが挿入された')
})

onBeforeUpdate(() => {
  console.log('4. onBeforeUpdate -- データ変更後、DOM更新の直前')
})

onRenderTriggered((e) => {
  console.log('   onRenderTriggered -- 再レンダリングのトリガー:', e.key)
})

onUpdated(() => {
  console.log('5. onUpdated -- DOM更新が完了した')
})

onBeforeUnmount(() => {
  console.log('6. onBeforeUnmount -- 取り外しの直前')
})

onUnmounted(() => {
  console.log('7. onUnmounted -- 取り外し完了')
})

const increment = () => {
  count.value++
}
</script>

<template>
  <div>
    <p>カウント: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

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

// setup()のトップレベル = 旧beforeCreate + created相当
const userId = ref(1)
const displayName = computed(() => `User #${userId.value}`)

// ここではDOMにアクセスできない（まだ描画前）
console.log(document.querySelector('#app')) // null
</script>

<!-- この書き方はSuspenseが必要 -->
<script setup lang="ts">
const res = await fetch('/api/data')
const data = await res.json()
</script>

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

const containerRef = ref<HTMLDivElement | null>(null)
const items = ref<string[]>([])

onBeforeMount(() => {
  // DOMはまだ存在しない
  console.log(containerRef.value) // null
})

onMounted(async () => {
  // DOMにアクセスできる
  console.log(containerRef.value) // <div>...</div>

  // API呼び出しの典型パターン
  try {
    const res = await fetch('/api/items')
    items.value = await res.json()
  } catch (e) {
    console.error('データ取得に失敗しました:', e)
  }
})
</script>

<template>
  <div ref="containerRef">
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

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

const data = ref<Record<string, unknown> | null>(null)
let isMounted = true

onMounted(async () => {
  const res = await fetch('/api/data')
  const json = await res.json()
  // アンマウント後にstateを更新しない
  if (isMounted) {
    data.value = json
  }
})

onUnmounted(() => {
  isMounted = false
})
</script>

<script setup lang="ts">
import { ref, onBeforeUpdate, onUpdated, nextTick } from 'vue'

const messages = ref<string[]>(['初期メッセージ'])
const listRef = ref<HTMLUListElement | null>(null)
let prevScrollHeight = 0

onBeforeUpdate(() => {
  // DOM更新前のスクロール高さを保存
  if (listRef.value) {
    prevScrollHeight = listRef.value.scrollHeight
  }
})

onUpdated(() => {
  // DOM更新後にスクロール位置を調整
  if (listRef.value) {
    const newScrollHeight = listRef.value.scrollHeight
    if (newScrollHeight > prevScrollHeight) {
      listRef.value.scrollTop = listRef.value.scrollHeight
    }
  }
})

const addMessage = () => {
  messages.value.push(`メッセージ ${messages.value.length + 1}`)
}
</script>

<template>
  <ul ref="listRef" style="max-height: 200px; overflow-y: auto;">
    <li v-for="(msg, i) in messages" :key="i">{{ msg }}</li>
  </ul>
  <button @click="addMessage">メッセージ追加</button>
</template>

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

const count = ref(0)

const increment = async () => {
  count.value++
  // この時点ではDOMはまだ古い
  await nextTick()
  // nextTick後はDOMが最新の状態
  console.log(document.getElementById('count')?.textContent)
}
</script>

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

const position = ref({ x: 0, y: 0 })
let timerId: ReturnType<typeof setInterval> | null = null
let ws: WebSocket | null = null
let abortController: AbortController | null = null

// パターン1: イベントリスナーの登録と解除
const handleMouseMove = (e: MouseEvent) => {
  position.value = { x: e.clientX, y: e.clientY }
}

onMounted(() => {
  window.addEventListener('mousemove', handleMouseMove)

  // パターン2: タイマーの開始
  timerId = setInterval(() => {
    console.log('定期処理実行')
  }, 5000)

  // パターン3: WebSocket接続
  ws = new WebSocket('wss://example.com/ws')
  ws.onmessage = (e) => {
    console.log('受信:', e.data)
  }

  // パターン4: AbortControllerを使ったfetchの管理
  abortController = new AbortController()
})

onBeforeUnmount(() => {
  // 進行中のfetchをキャンセル
  abortController?.abort()
})

onUnmounted(() => {
  // イベントリスナーの解除
  window.removeEventListener('mousemove', handleMouseMove)

  // タイマーの停止
  if (timerId !== null) {
    clearInterval(timerId)
  }

  // WebSocket切断
  ws?.close()
})
</script>

<template>
  <p>マウス位置: ({{ position.x }}, {{ position.y }})</p>
</template>

<!-- 親コンポーネント -->
<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import TabA from './TabA.vue'
import TabB from './TabB.vue'

const currentTab = shallowRef(TabA)
</script>

<template>
  <button @click="currentTab = TabA">タブA</button>
  <button @click="currentTab = TabB">タブB</button>
  <KeepAlive>
    <component :is="currentTab" />
  </KeepAlive>
</template>

<!-- TabA.vue -->
<script setup lang="ts">
import {
  ref,
  onMounted,
  onUnmounted,
  onActivated,
  onDeactivated,
} from 'vue'

const lastActivatedAt = ref('')

onMounted(() => {
  console.log('TabA: onMounted（初回のみ）')
})

onActivated(() => {
  // タブが表示されるたびに呼ばれる（初回マウント時も含む）
  lastActivatedAt.value = new Date().toLocaleTimeString()
  console.log('TabA: onActivated')
})

onDeactivated(() => {
  // タブが非表示になるたびに呼ばれる
  console.log('TabA: onDeactivated')
})

onUnmounted(() => {
  // KeepAlive内では通常呼ばれない
  console.log('TabA: onUnmounted')
})
</script>

<template>
  <div>
    <p>タブA - 最終表示: {{ lastActivatedAt }}</p>
  </div>
</template>

<!-- ErrorBoundary.vue -->
<script setup lang="ts">
import { ref, onErrorCaptured } from 'vue'

const error = ref<Error | null>(null)
const errorInfo = ref('')

onErrorCaptured((err, instance, info) => {
  error.value = err instanceof Error ? err : new Error(String(err))
  errorInfo.value = info

  // falseを返すとエラーの親への伝播を停止する
  return false
})

const reset = () => {
  error.value = null
  errorInfo.value = ''
}
</script>

<template>
  <div v-if="error" class="error-fallback">
    <h3>エラーが発生しました</h3>
    <p>{{ error.message }}</p>
    <p>発生元: {{ errorInfo }}</p>
    <button @click="reset">再試行</button>
  </div>
  <slot v-else />
</template>

<!-- 使用側 -->
<template>
  <ErrorBoundary>
    <SomeUnstableComponent />
  </ErrorBoundary>
</template>

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

const count = ref(0)
const name = ref('Vue')

onRenderTracked((event) => {
  // 初回レンダリング時にcount, nameそれぞれについて呼ばれる
  console.log('追跡対象:', {
    target: event.target,
    type: event.type,  // 'get' | 'has' | 'iterate'
    key: event.key,
  })
})

onRenderTriggered((event) => {
  // countやnameが変更されて再レンダリングが発生した時
  console.log('再レンダリングのトリガー:', {
    type: event.type,  // 'set' | 'add' | 'delete' | 'clear'
    key: event.key,
    newValue: event.newValue,
    oldValue: event.oldValue,
  })
})
</script>

<template>
  <p>{{ count }} - {{ name }}</p>
  <button @click="count++">カウント+1</button>
</template>

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

const firstName = ref('太郎')
const lastName = ref('山田')

// firstNameまたはlastNameが変わった時に再計算される
// ただし実際にfullNameが参照されるまで計算は保留される
const fullName = computed(() => `${lastName.value} ${firstName.value}`)
</script>

<template>
  <p>{{ fullName }}</p>
</template>

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

const searchQuery = ref('')
const results = ref<string[]>([])

// searchQueryが変わるたびに実行される
watch(searchQuery, async (newQuery, oldQuery) => {
  if (newQuery.length < 2) {
    results.value = []
    return
  }
  const res = await fetch(`/api/search?q=${encodeURIComponent(newQuery)}`)
  results.value = await res.json()
})
</script>

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

const count = ref(0)

// DOM更新後に実行される
watch(count, (newVal) => {
  // この時点でDOMは更新済み
  console.log(document.getElementById('count')?.textContent)
}, { flush: 'post' })
</script>

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

const userId = ref(1)
const userData = ref<Record<string, unknown> | null>(null)

// 即座に実行され、userId.valueが変わるたびに再実行される
watchEffect(async () => {
  const res = await fetch(`/api/users/${userId.value}`)
  userData.value = await res.json()
})
</script>

// composables/useWindowSize.ts
import { ref, onMounted, onUnmounted } from 'vue'

export function useWindowSize() {
  const width = ref(0)
  const height = ref(0)

  const update = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  onMounted(() => {
    update()
    window.addEventListener('resize', update)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', update)
  })

  return { width, height }
}

<!-- 使用側 -->
<script setup lang="ts">
import { useWindowSize } from '@/composables/useWindowSize'

const { width, height } = useWindowSize()
</script>

<template>
  <p>ウィンドウサイズ: {{ width }} x {{ height }}</p>
</template>

// composables/useInterval.ts
import { onMounted, onUnmounted } from 'vue'

export function useInterval(callback: () => void, ms: number) {
  let id: ReturnType<typeof setInterval> | null = null

  onMounted(() => {
    id = setInterval(callback, ms)
  })

  onUnmounted(() => {
    if (id !== null) {
      clearInterval(id)
    }
  })
}

<script setup lang="ts">
import { ref } from 'vue'
import { useInterval } from '@/composables/useInterval'

const elapsed = ref(0)
useInterval(() => {
  elapsed.value++
}, 1000)
</script>

<template>
  <p>経過時間: {{ elapsed }}秒</p>
</template>

// composables/useIntersectionObserver.ts
import { ref, onMounted, onUnmounted, type Ref } from 'vue'

export function useIntersectionObserver(
  targetRef: Ref<HTMLElement | null>,
  options?: IntersectionObserverInit
) {
  const isVisible = ref(false)
  let observer: IntersectionObserver | null = null

  onMounted(() => {
    if (!targetRef.value) return

    observer = new IntersectionObserver(([entry]) => {
      isVisible.value = entry.isIntersecting
    }, options)

    observer.observe(targetRef.value)
  })

  onUnmounted(() => {
    observer?.disconnect()
  })

  return { isVisible }
}

<script setup lang="ts">
import { useWindowSize } from '@/composables/useWindowSize'

// OK: setup()の同期フロー内
const { width, height } = useWindowSize()

// NG: awaitの後では正しく動作しない可能性がある
// const data = await fetch('/api')
// const { width, height } = useWindowSize() // 紐付けが切れる
</script>

// Vue2
export default {
  created() {
    this.fetchData()
  }
}

// Vue3 Composition API
// setup()のトップレベルに書くとcreated相当のタイミングで実行される
// ただしAPI呼び出しはonMountedに書くのが一般的

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

interface Article {
  id: number
  title: string
  body: string
}

const article = ref<Article | null>(null)

// サーバー側: レンダリング前にデータ取得（高速）
onServerPrefetch(async () => {
  article.value = await fetchArticle()
})

// クライアント側: ハイドレーション時にデータがなければ取得
onMounted(async () => {
  if (!article.value) {
    article.value = await fetchArticle()
  }
})

async function fetchArticle(): Promise<Article> {
  const res = await fetch('https://api.example.com/articles/1')
  return res.json()
}
</script>

<template>
  <article v-if="article">
    <h1>{{ article.title }}</h1>
    <p>{{ article.body }}</p>
  </article>
  <p v-else>読み込み中...</p>
</template>

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

const isVisible = ref(false)
const elementRef = ref<HTMLDivElement | null>(null)

onMounted(() => {
  // isVisibleがfalseなら、elementRefはnull
  console.log(elementRef.value) // null
})

// v-ifの要素には、表示後にwatchで対応する
watch(isVisible, async (val) => {
  if (val) {
    await nextTick()
    console.log(elementRef.value) // <div>...</div>
  }
})
</script>

<template>
  <button @click="isVisible = !isVisible">切り替え</button>
  <div v-if="isVisible" ref="elementRef">条件付き要素</div>
</template>

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

const count = ref(0)

// NG: 無限ループになる
onUpdated(() => {
  count.value++ // この変更がさらにDOMを更新し、onUpdatedが再び呼ばれる
})

// OK: 条件付きで変更するか、nextTickを使う
onUpdated(() => {
  // 条件を設けてループを防止
  if (count.value < 10) {
    count.value++
  }
})
</script>

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

// OK: awaitの前に登録
onMounted(() => {
  console.log('マウント完了')
})

const data = await fetch('/api/data') // トップレベルawait

// NG: awaitの後に登録すると紐付けが失われる可能性がある
onUnmounted(() => {
  console.log('これは呼ばれない可能性がある')
})
</script>

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

const data = ref(null)

// すべてのフックをawaitの前に登録
onMounted(() => {
  console.log('マウント完了')
})

onUnmounted(() => {
  console.log('アンマウント完了')
})

// フック登録後にawaitを実行
const res = await fetch('/api/data')
data.value = await res.json()
</script>

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

const handleScroll = () => { /* ... */ }

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

onUnmounted(() => {
  // 解除を忘れるとコンポーネント破棄後もリスナーが残る
  window.removeEventListener('scroll', handleScroll)
})
</script>

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

const largeData = ref<ArrayBuffer | null>(null)

onMounted(() => {
  largeData.value = new ArrayBuffer(1024 * 1024 * 10) // 10MB
})

onUnmounted(() => {
  // 大きなデータへの参照を明示的に解放
  largeData.value = null
})
</script>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
// Chart.jsの例
import { Chart } from 'chart.js'

const canvasRef = ref<HTMLCanvasElement | null>(null)
let chartInstance: Chart | null = null

onMounted(() => {
  if (canvasRef.value) {
    chartInstance = new Chart(canvasRef.value, {
      type: 'bar',
      data: { /* ... */ },
    })
  }
})

onUnmounted(() => {
  // ライブラリ独自のdestroyメソッドを呼ぶ
  chartInstance?.destroy()
  chartInstance = null
})
</script>

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