mounted マウント完了（Options API）

最終更新：2026-10-22

mounted はコンポーネントがレンダリングされて DOM に挿入された後に呼ばれます。テンプレート参照の操作、サードパーティーの初期化、計測の標準的な場所です。

📝 構文

export default {
  mounted() {
    this.$refs.el.focus()   // DOM ready
  }
}

value	引数なし

戻り値：戻り値なし

以下のコードを編集して結果を確認しましょう：

出力：

Shows the paragraph's real width.

💡 ヒント ライブラリーの初期化、自動フォーカス、データ取得はここで行います。

ℹ️ 補足 子コンポーネントの mounted は親より先に実行されます。

⚠️ 注意 SSR では決して実行されず、DOM コードが自然に保護されます。

Q created との典型的な分担は？

A created はデータを準備し、mounted は DOM を操作します。

Q 複数回実行されますか？

A いいえ。初回マウントの後に1回だけ実行されます。

Q 子コンポーネントの ref を扱う前に待つのはなぜですか？

A その時点で子はマウント済みなので、$refs が解決されます。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。