onBeforeMount() マウント前フック
最終更新：2026-10-22
onBeforeMount() マウント前フック
onBeforeMount() は、コンポーネントが初めて DOM に描画される直前に呼ばれます。テンプレートはコンパイル済みですが、実際の DOM はまだ作られていません。
| グループ | ライフサイクルフック |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
onBeforeMount(() => {
// DOM はまだ存在しない。純粋なデータ準備に向く
})⚙️ 引数
| callback | マウント前に実行される関数 |
|---|
戻り値：なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Shows 'prepared before mount' — set before the first render.💡 ポイント
ℹ️ 補足 直接使うことは少ないです。多くの初期化ロジックは setup のトップレベルに書けばよく、タイミングもほぼ同じです。
⚠️ 注意 ここでは DOM を読めません。ref はまだマウントされておらず、要素の参照は null です。
🏷️ 関連ライフサイクルフック
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q setup のトップレベルコードとの違いは？
A ほぼ同じです。このフックは主にオプション式 API との対応関係のために存在し、Composition API の場面で単独で使うことは少ないです。
Q ここでリクエストを送れますか？
A 送れますが、通常は setup か onMounted に置くほうが読みやすいです。SSR 環境では実行タイミングに注意してください。
Q 何回実行されますか？
A 最初のマウントの前に 1 回だけ実行されます。
