onMounted() マウント後フック
最終更新：2026-10-22
onMounted() マウント後フック
onMounted() はコンポーネントと子コンポーネントが DOM にマウントされた後に呼ばれます。テンプレート ref の取得、サードパーティライブラリの初期化、リクエスト送信の標準的な場所です。
| グループ | ライフサイクルフック |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
onMounted(() => {
console.log(el.value.offsetWidth) // DOM が使える状態
})⚙️ 引数
| callback | マウント後に実行される関数 |
|---|
戻り値：なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Shows the paragraph's real pixel width.💡 ポイント
💡 ヒント サードパーティライブラリ（グラフ、エディタ）の初期化、DOM の計測、初回データの取得はここに書きます。
⚠️ 注意 SSR 環境ではサーバー側で onMounted は実行されません（ブラウザのみ）。DOM に依存する処理はここに置くとエラーを防げます。
ℹ️ 補足 親コンポーネントの onMounted は、すべての子コンポーネントのマウント完了より後に発火します。
🏷️ 関連ライフサイクルフック
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q ここで DOM にアクセスできるのに、setup ではできないのはなぜですか？
A setup は描画の前に実行されます。onMounted は DOM への描き込みが完了した後に発火します。
Q onUpdated との違いは？
A onMounted は 1 回だけ実行されますが、onUpdated はコンポーネントが更新されるたびに実行されます。
Q コールバックは async にできますか？
A async 関数にできますが、登録自体は同期的に呼ぶ必要があります。
