はじめに
こんにちは！KIYO Learningでスタディングの開発をしている @gawa32 です！
私はスタディングの開発で初めて本格的にVue.jsを触るようになりました。
そこでVue.jsではコンポーネントのライフサイクルを正しく理解することが重要だと感じました。
この記事では、Vue 3のComposition API を使ってライフサイクルの概要から、各ライフサイクルフックの詳細についてまとめます。
1. Vue.jsのライフサイクルとは？
Vueコンポーネントは、以下のような段階を経て動作します。
- 作成前（beforeCreate）
- 作成後（created）
- マウント前（beforeMount）
- マウント後（mounted）
- 更新前（beforeUpdate）
- 更新後（updated）
- アンマウント前（beforeUnmount）
- アンマウント後（unmounted）
Composition APIでは、これらに対応するライフサイクルフックとして onMounted や onUpdated などを利用します。
2. 各ライフサイクルフックの詳細（Composition API）
2.1 onBeforeMount
コンポーネントがDOMにマウントされる直前に実行
onBeforeMount(() => {
console.log('onBeforeMount: DOMが描画される前');
});
主な用途:
- DOMがまだ描画されていないため、DOM操作は不可
- データの準備が終わったかどうかのログを出力
2.2 onMounted
コンポーネントがDOMにマウントされた後に実行
onMounted(() => {
console.log('onMounted: DOMにアクセス可能');
});
主な用途:
- APIリクエストを発行し、データを取得する
- DOMの操作（スクロール位置の設定など）
- イベントリスナーの追加
2.3 onBeforeUpdate
データが変更され、DOMが再描画される直前に実行
onBeforeUpdate(() => {
console.log('onBeforeUpdate: データ更新前');
});
主な用途:
- 変更前のデータの状態を記録
- 更新前のデータと新しいデータを比較
- 特定の条件下で更新処理をスキップしたい場合のログ取得
2.4 onUpdated
データが変更され、DOMが更新された後に実行
onUpdated(() => {
console.log('onUpdated: データ更新後');
});
主な用途:
- 更新後のDOMの状態を確認
- フォーカスやスクロール位置をリセット
- データの変更をトリガーに追加の処理を実行
2.5 onBeforeUnmount
コンポーネントが破棄される直前に実行
onBeforeUnmount(() => {
console.log('onBeforeUnmount: コンポーネント削除前');
});
主な用途:
- イベントリスナーの削除
- タイマーのクリア
- データ保存や最終ログの記録
2.6 onUnmounted
コンポーネントが完全に破棄された後に実行
onUnmounted(() => {
console.log('onUnmounted: コンポーネント削除後');
});
主な用途:
- コンポーネントが完全に破棄されたことを確認
- メモリリークを防ぐ処理
3. 全体のサンプルコードとコンソールの出力例
以下は、各ライフサイクルフックの挙動を確認するためのサンプルコードです。
<template>
<div>
<h2>Vueライフサイクルのデモ</h2>
<p>{{ message }}</p>
<button @click="updateMessage">メッセージ更新</button>
</div>
</template>
<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue';
const message = ref('Hello, Vue!');
const updateMessage = () => {
message.value = 'Updated Vue!';
};
onBeforeMount(() => {
console.log('onBeforeMount: DOMが描画される前');
});
onMounted(() => {
console.log('onMounted: DOM描画完了');
});
onBeforeUpdate(() => {
console.log('onBeforeUpdate: データ更新前');
});
onUpdated(() => {
console.log('onUpdated: データ更新後');
});
onBeforeUnmount(() => {
console.log('onBeforeUnmount: コンポーネント削除前');
});
onUnmounted(() => {
console.log('onUnmounted: コンポーネント削除後');
});
</script>
コンソールの出力例
コンポーネントのマウント時
onBeforeMount: DOMが描画される前
onMounted: DOM描画完了
メッセージ更新ボタンをクリック
onBeforeUpdate: データ更新前
onUpdated: データ更新後
コンポーネントが破棄される時（ページ遷移など）
onBeforeUnmount: コンポーネント削除前
onUnmounted: コンポーネント削除後
まとめ
Vue.jsのライフサイクルは、コンポーネントの動作を理解し、適切に処理を行うために非常に重要です。
- onMounted でAPIデータを取得
- onUpdated でデータの変化を監視
- onBeforeUnmount でリソースの後処理
など、各フェーズに応じた処理を適切に実装することで、よりスムーズな開発が可能になると思います。
KIYOラーニング株式会社について
当社のビジョンは『世界一「学びやすく、分かりやすく、続けやすい」学習手段を提供する』ことです。革新的な教育サービスを作り成長させていく事で、オンライン教育分野でナンバーワンの存在となり、世界に展開していくことを目指しています。
プロダクト
- スタディング：「学びやすく・わかりやすく・続けやすい」オンライン資格対策講座
- スタディングキャリア：資格取得者の仕事探しやキャリア形成を支援する転職サービス
- AirCourse：受け放題の動画研修がついたeラーニングシステム（LMS）
KIYOラーニング株式会社では一緒に働く仲間を募集しています