Vue 3で整理するライフサイクルとwatchの基本〜動くタイミングを理解して開発をスムーズに〜

Vue 3で整理するライフサイクルとwatchの基本

Vueで開発してると、「この処理、どのタイミングで書けばいいんだっけ？」って
ちょっと迷うこと、あると思うんだよね。

特にComposition APIを使ってると、onMountedとかwatchとか
似たようなタイミングのフックがいくつもあって、整理が難しくなりがち。

この記事では、Vueのライフサイクルとwatchの動きをざっくり整理して、
制作中に迷わないようにしていこうと思います。

---

Vue 3のライフサイクルざっくり整理

Vue 3では、コンポーネントの「生まれてから消えるまで」を
ライフサイクルフックで管理することができる。

ざっくり流れを追うと👇こんな感じ。

タイミング	フック名	よく使う用途
コンポーネントが作られる前	setup()	初期化処理（reactive定義など）
DOMに触る前	onBeforeMount	マウント前の準備
DOMが生成された後	onMounted	DOM操作・API取得など
データ更新前	onBeforeUpdate	更新直前の処理
データ更新後	onUpdated	再描画後の確認など
コンポーネントが破棄される前	onBeforeUnmount	イベント解除など
破棄後	onUnmounted	クリーンアップ処理

たとえばonMountedは「画面が表示されたあとに動かしたい処理」に使う。
APIでデータを取得したり、DOM要素の高さを取ったりする時に便利。

---

watchの動きと使い方

watchは、リアクティブな値（refやreactiveなど）が
変化したタイミングで処理を実行したいときに使う。

基本形はこんな感じ👇

<script setup>
import { ref, watch } from 'vue'
const count = ref(0);
const message = ref('');

function countUp() {
  count.value++;
}

watch(count, (newVal, oldVal)=> {
  message.value = `countが変わった！ ${newVal} → ${oldVal}`;
});
</script>

<template>
  <button @click="countUp">カウントアップ</button>
  <p>count: {{ count }}</p>
  <p>{{ message }}</p>
</template>
})

この例だと、countの値が変わるたびに
コールバックの中の処理が呼ばれます。

• よくある使い方
  • 入力フォームの値を監視してバリデーションを走らせる
  • ルートパラメータが変わった時にAPIを再取得する
  • 条件によって別の値を更新する

watchEffectとの違い

似たようなものでwatchEffectもあるけど、
こっちは「依存してる値を自動で検知してくれる」タイプ。

<script setup>
import { ref, watchEffect } from 'vue'

const count = ref(0)
const double = ref(0)

function countUp () {
  count.value++;
}

watchEffect(() => {
  double.value = count.value * 2
})

</script>

<template>
  <p>count: {{ count }}</p>
  <p>double: {{ double }}</p>
  <button @click="countUp">増やす</button>
</template>

countを監視対象に明示しなくても、
内部で参照してるから勝手に反応してくれる。

軽く依存関係を追いたい時はwatchEffect、
しっかり対象をコントロールしたい時はwatchが向いている。

どんな時にどれを使う？

よく使うonMountedやwatchをざっくり整理すると

処理の目的	使うフック
コンポーネントの初期化	setup()
DOMを触りたい	onMounted
値の変化を監視したい	watch or watchEffect
クリーンアップ処理	onUnmounted

基本的に、
「一度だけ動かす」→ onMounted
「何かが変わったら動かす」→ watch

まとめ

Vueのライフサイクルやwatchは、
使い分けを意識するだけでコードがかなりスッキリする。

特にComposition APIでは「どこで動くか」を自分で管理することになるから、
このあたりを押さえておくとチーム開発でも迷わず書けるようになるかなと思います。