Vueのライフサイクルフックとは何ですか？

Question

Accepted Answer

**ライフサイクルフック**を使用すると、コンポーネントの人生における特定の時点でコードを実行できます — 作成、DOMへのマウント、更新、削除。Composition APIではこれらは`setup`内部で呼び出す関数です。 ## 主なフックの順序 ```vue ``` ## 完全なシーケンス ```text setup() runs → reactive state created (no DOM yet) onBeforeMount → just before first render onMounted → DOM ready ★ (fetch data, access $refs, init 3rd-party libs) ── component lives, reacting to changes ── onBeforeUpdate / onUpdated → around re-renders from reactive changes ── component removed ── onBeforeUnmount / onUnmounted → cleanup ★ (timers, listeners, subscriptions) ``` ## 最も使用する2つ - **`onMounted`** — 要素がDOMに存在します。実際のDOMが必要なことや、読み込み時に一度だけ実行すべきことを行います：初期データを取得、要素を測定、チャート/マップライブラリを初期化、イベントリスナーを追加します。 - **`onUnmounted`** — コンポーネントが去ります。メモリリークを防ぐために**クリーンアップ**します：インターバル/タイムアウトをクリア、`window`/`document`リスナーを削除、購読またはインフライトリクエストをキャンセルします。 ```vue ``` セットアップおよびティアダウンのための`onMounted`/`onUnmounted`ペアリングは最も重要なパターンの1つです — クリーンアップを忘れるとリークと「ゴースト」リスナーが発生します。 ## Options APIの同等物 ```text mounted(), updated(), unmounted(), created(), beforeUnmount() ... ``` ## なぜ重要なのかライフサイクルフックは、コンポーネントの存在と副作用を調整する方法です — 表示されたときにセットアップロジックを実行し（`onMounted`）、去るときにティアダウンします（`onUnmounted`）。特にこの2つをマスターし（常にセットアップしたものをクリーンアップして）メモリリークを防ぎ、Vueコンポーネントにデータフェッチ、タイマー、サードパーティライブラリを統合するために不可欠です。