【Vue3】ライフサイクルについて

そもそもライフサイクルとは

オブジェクトやコンポーネントの生まれてから消えるまでの流れ。考え方は他のフレームワークにも共通している。

Vueでは、コンポーネントが生まれてから消えるまでの流れの中で、好きなタイミングで処理を差し込める。

Vue3のライフサイクルの流れ

コンポーネントは 「作られる」 → 「表示される」 → 「更新される」 → 「消える」 という流れを持っている。

1. 作られる（beforeCreate → created）
2. 表示される（beforeMount → mounted）
3. 更新される（beforeUpdate → updated）
4. 消える（beforeUnmount → unmounted）

ライフサイクルフック	タイミング	使い所
beforeCreate	Vueインスタンスが作られる	ほぼ使わない
created	Vueのデータが準備される	初期データの取得（API通信など）
beforeMount	DOMに表示される前	ほぼ使わない
mounted	実際に画面に表示された後	DOM操作、API通信、タイマー設定など
beforeUpdate	データが変わったけど、画面が更新される前	更新前のデータをチェックしたい時
updated	データが変わり、画面が更新された後	更新後のDOMをチェックしたい時
beforeUnmount	コンポーネントが消える前	タイマーやイベントリスナーの解除
unmounted	コンポーネントが完全に削除された後	クリーンアップ処理

よく使うライフサイクル

1. mounted（画面に表示された後）

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('コンポーネントが表示された');
});
</script>

2. onUnmounted（コンポーネントが消えるとき）

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('コンポーネントが表示された');
});

onUnmounted(() => {
  console.log('コンポーネントが削除された');
});
</script>

ライフサイクルの使い道

ライフサイクルを使うと、Vueのコンポーネントが 「表示される前」「表示された後」「更新された時」「削除される前」 というタイミングで、特定の処理を実行できる。

例① mounted で 画面に表示された後にAPIからデータを取得する

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('');

onMounted(() => {
  console.log('✅ コンポーネントが表示された！（mounted）');
  // コンポーネントが表示されたらAPIを叩く
  setTimeout(() => {
    message.value = 'データを取得しました！';
  }, 2000);
});
</script>

<template>
  <div>
    <h2>ライフサイクルテスト</h2>
    <p>{{ message || 'データ取得中...' }}</p>
  </div>
</template>

例② onUnmounted でコンポーネントが削除された後にタイマーを止める

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

const count = ref(0);
let timer;

onMounted(() => {
  console.log('⏳ カウント開始！（mounted）');
  timer = setInterval(() => {
    count.value++;
  }, 1000);
});

onUnmounted(() => {
  console.log('⏹️ タイマー停止！（unmounted）');
  clearInterval(timer);
});
</script>

<template>
  <div>
    <h2>カウント: {{ count }}</h2>
  </div>
</template>

• onMounted で カウントを1秒ごとに増やすタイマーをセット
• onUnmounted で コンポーネントが消える時にタイマーを止める

こうすることで、無駄な処理が残らずメモリリークを防げる