ライフサイクルフェーズの概要
生成、マウント、更新、アンマウントの各フェーズで何が起こるかを学習します。
「ライフサイクルフェーズの概要」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
コンポーネントにもライフサイクルがある
すべての Vue コンポーネントは、予測可能なライフサイクルをたどります。作成され、ページにマウントされ、データの変更に応じて更新され、最後に削除されます。これがライフサイクルのフェーズであり、Vue では各フェーズにフックを設定できます。
4つのフェーズ
- 作成 — setup が実行され、リアクティビティが初期化されます。
- マウント — DOM が作成され、挿入されます。
- 更新 — リアクティブな変更によって再レンダリングが発生します。
- アンマウント — コンポーネントが削除され、後片付けが行われます。
フェーズ1：作成
まず、コンポーネントのインスタンスが作成され、リアクティビティが設定されます。Composition API では、<script setup>（または setup()）がこの段階で実行されます。DOM はまだ存在しないため、この時点で要素を読み取ることはできません。
作成中にできること
作成の段階は、リアクティブな状態を宣言したり、データ取得を開始したりするなど、DOM に依存しない処理を始めるのに適しています。ただし、テンプレートはまだレンダリングされていないため、DOM の ref は空のままです。
<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>フェーズ2：マウント
次に Vue は、テンプレートから実際の DOM ノードを作成し、ページに挿入します。マウント後はテンプレートの ref が実際の要素を指すため、DOM の測定や操作ができます。
マウントフック
onMounted は、コンポーネントが挿入された直後に1回実行されます。チャートの初期化や入力欄へのフォーカスなど、DOM に依存する初期処理を行う場所です。
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('in the DOM now')
})
</script>フェーズ3：更新
コンポーネントが依存するリアクティブなデータが変わると、Vue は DOM を効率的に再レンダリングして更新します。変更された部分だけが更新されます。この更新サイクルは、コンポーネントの存続中に何度も発生します。
更新フック
onBeforeUpdate は DOM が更新される直前に実行され、onUpdated は直後に実行されます。レンダリングに影響するリアクティブな変更があるたびに呼び出されます。
<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
console.log('DOM patched')
})
</script>フェーズ4：アンマウント
v-if、ルートの変更、リストからの削除などによってコンポーネントが削除されると、Vue はコンポーネントを破棄します。メモリリークを防ぐため、タイマー、リスナー、サブスクリプションを後片付けする機会です。
アンマウントフック
onUnmounted は、コンポーネントが削除された後に実行されます。ここでインターバルをキャンセルし、グローバルリスナーを削除し、実行中のリクエストを中止します。
<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>全体の順序
コンポーネントのライフサイクルでは、setup、onBeforeMount、onMounted の順にフックが実行されます。その後、onBeforeUpdate/onUpdated の組み合わせが繰り返され、最後に onBeforeUnmount/onUnmounted が実行されます。
クイックチェック
ライフサイクルを理解できているか確認しましょう。
まとめ
これで全体像が見えてきました。
- 作成：セットアップが実行され、リアクティビティの準備が整いますが、DOMはまだありません。
- マウント：DOMが作成されて挿入され、refが使用できるようになります。
- 更新：リアクティブな変更によって効率的なパッチ処理が実行されます。
- アンマウント：コンポーネントが削除されます。ここでクリーンアップを行います。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「ライフサイクルフェーズの概要」レッスンは無料ですか？
はい。「ライフサイクルフェーズの概要」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「ライフサイクルフェーズの概要」で何を学びますか？
生成、マウント、更新、アンマウントの各フェーズで何が起こるかを学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「ライフサイクルフェーズの概要」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。