Vue 3 のライフサイクルとは？初心者向け解説

はじめに
Vue のライフサイクルとは？
主要なライフサイクルフックの解説
Composition API でのライフサイクルの書き方
1. onMounted(), onUpdated(), onUnmounted() の使い方
ライフサイクルフックの実践例
5. Vue のライフサイクルを活用するためのポイント

はじめに

Vue 3 では、コンポーネントの ライフサイクル を理解することで、適切なタイミングで処理を実行し、効率的なアプリ開発が可能になります。本記事では、Vue のライフサイクルの概念や主要なライフサイクルフックの使い方、実践的な活用方法について解説します。

Vue のライフサイクルとは？

Vue コンポーネントのライフサイクルの概念

Vue コンポーネントは、作成から破棄までの一連の流れ（ライフサイクル）を持ちます。ライフサイクルには各フェーズごとにフック（特定の処理を実行する関数）があり、適切なタイミングでコードを実行できます。

ライフサイクルフックの役割と重要性

ライフサイクルフックを使うことで、以下のような処理を適切なタイミングで実行できます。

データの初期化（created/mounted）
API からデータを取得（onMounted）
データ変更時の処理（onUpdated）
イベントリスナーの解除（onUnmounted）

Vue 2 と Vue 3 のライフサイクルの違い

Vue 2 では created() や mounted() などの オプション API を使用しましたが、Vue 3 では Composition API の onMounted() などを使用します。

Vue 2 のライフサイクルフック（オプション API）

export default {
  created() {
    console.log('コンポーネントが作成されました');
  },
  mounted() {
    console.log('コンポーネントがDOMに描画されました');
  }
};

Vue 3 のライフサイクルフック（Composition API）

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

onMounted(() => {
  console.log('コンポーネントがDOMに描画されました');
});
</script>

Composition API では setup() 内で onMounted() などのフックを使う形になります。

主要なライフサイクルフックの解説

created（コンポーネント作成時）

データの初期化 に使用
DOM にはまだアクセスできない

Vue 2 の例

export default {
  created() {
    console.log('コンポーネントが作成されました');
  }
};

Vue 3 の例（Composition API では不要）

Composition API では onMounted() を使うのが一般的です。

mounted（DOM 描画完了後）

DOM が利用可能になる
API からデータを取得する処理 などに適用

Vue 2 の例

export default {
  mounted() {
    console.log('コンポーネントがDOMに描画されました');
  }
};

Vue 3 の例

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

onMounted(() => {
  console.log('コンポーネントがDOMに描画されました');
});
</script>

updated（データ変更時）

データが変更され、DOM が更新されるたびに実行

Vue 2 の例

export default {
  data() {
    return {
      count: 0
    };
  },
  updated() {
    console.log(`count が ${this.count} に更新されました`);
  }
};

Vue 3 の例

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

const count = ref(0);

onUpdated(() => {
  console.log(`count が ${count.value} に更新されました`);
});
</script>

beforeUnmount / unmounted（コンポーネント破棄時）

beforeUnmount: 削除前の処理
unmounted: 削除後の処理
イベントリスナーやタイマーの解除 に使用

Vue 2の例

export default {
  data() {
    return {
      intervalId: null
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      console.log('タイマー実行中');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
    console.log('コンポーネントが削除される前にタイマーを解除しました');
  },
  destroyed() {
    console.log('コンポーネントが破棄されました');
  }
};

Vue 3 の例

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

let intervalId = setInterval(() => {
  console.log('タイマー実行中');
}, 1000);

onBeforeUnmount(() => {
  clearInterval(intervalId);
  console.log('コンポーネントが削除される前にタイマーを解除しました');
});
</script>

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

const cleanup = () => {
  console.log('コンポーネントが破棄されました');
};

onUnmounted(cleanup);
</script>

Composition API でのライフサイクルの書き方

onMounted(), onUpdated(), onUnmounted() の使い方

Vue 3 では setup() 内で以下のようにライフサイクルフックを使用します。

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

const message = ref('初期メッセージ');

onMounted(() => {
  console.log('コンポーネントがマウントされました');
});

onUpdated(() => {
  console.log('データが変更されました');
});

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

ライフサイクルフックの実践例

onMounted() を使って API からデータを取得する

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

const data = ref(null);

onMounted(async () => {
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
  data.value = response.data;
});
</script>

onUpdated() を使ってデータ変更時にログを出力する

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

const count = ref(0);

onUpdated(() => {
  console.log(`カウントが ${count.value} に更新されました`);
});
</script>

onUnmounted() を使って不要なイベントリスナーを解除する

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

const handleResize = () => {
  console.log('ウィンドウサイズが変更されました');
};

window.addEventListener('resize', handleResize);

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>