Vue Academy · レッスン

onMountedとonBeforeMount

onMountedでDOMにアクセスする方法、onBeforeMountを直接使う場面がほとんどない理由について学習します。

レッスン 2/413 ステップ

「onMountedとonBeforeMount」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

マウント前後のフック

マウントフェーズには2つのフックがあります。onBeforeMountはDOMが作成される直前に実行され、onMountedはDOMが挿入された直後に実行されます。似ているように見えますが、用途は大きく異なります。

onMounted：DOMの準備完了

onMountedが実行される時点では、コンポーネントのテンプレートがレンダリングされ、ページ内に配置されています。テンプレートrefは実際の要素を参照するため、DOM操作はここで行います。

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

ユースケース：チャートの初期化

DOM要素に描画するライブラリを使うには、まずその要素が存在していなければなりません。onMounted内でref要素を渡して初期化します。

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

ユースケース：DOMの測定

サイズ、位置、スクロール量を読み取るには、実際のDOMが必要です。onMountedは要素を測定できる最も早い安全なタイミングです。

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

ユースケース：初期データの取得

コンポーネントが表示されたときにデータを取得するのは、典型的なonMountedの用途です。結果をrefに保存すると、データが届いたときにテンプレートが更新されます。

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

onMountedは1回だけ実行される

onMountedは、コンポーネントの各インスタンスにつき1回だけ実行されます。コンポーネントがアンマウントされた後に再作成されると、新しいインスタンス自身のonMountedが実行されます。

onBeforeMount：挿入直前

onBeforeMountは、セットアップの後、DOMが作成される前に実行されます。リアクティブな状態は存在しますが、まだ何もレンダリングされていないため、テンプレートrefはnullのままです。

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

onBeforeMountがほとんど必要ない理由

ほとんどのセットアップ処理は<script setup>内で直接実行できます（ここはすでにマウント前に実行されます）。また、DOMに関係する処理はonMountedまで待つ必要があります。そのため、onBeforeMountの実用的な用途は多くありません。

よくある間違い

setup内やonBeforeMount内でテンプレートrefにアクセスしようとすると、nullになります。要素はマウントが完了するまで存在しません。DOMへのアクセスは必ずonMountedに移してください。

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

複数のフックを登録する

onMountedは複数回呼び出すことができ、すべてのコールバックが順番に実行されます。そのため、各コンポーザブルがそれぞれ独立してonMountedを登録できます。

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

使い分け

onMounted：DOMが利用可能 — チャートの初期化、測定、フォーカス、データ取得。
onBeforeMount：レンダリング前のフック。DOMは利用できず、必要になることはほとんどありません。

クイックチェック

マウントフックについての知識を確認しましょう。

対話的なレッスンで答える

まとめ

マウントフックのまとめ：

onMountedはDOMの挿入後に実行されます。チャートの初期化、測定、フォーカス、初期データの取得に使用します。
インスタンスごとに1回実行され、複数回登録することもできます。
onBeforeMountはDOMにアクセスできないレンダリング前に実行され、必要になることはほとんどありません。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「onMountedとonBeforeMount」レッスンは無料ですか？

はい。「onMountedとonBeforeMount」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「onMountedとonBeforeMount」で何を学びますか？

onMountedでDOMにアクセスする方法、onBeforeMountを直接使う場面がほとんどない理由について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「onMountedとonBeforeMount」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る