🐕

Vue3の computed と watch、どう使い分ける？実務目線で整理する

に公開
Vue.js
frontend
Vue 3
tech

Vue3（Composition API）を使い始めたときに、
**「computed と watch、結局どう使い分けるの？」**と混乱しました。

この記事では、
実務での判断基準を軸に、computed と watch の使い分けを整理します。

結論（先に）

  • 値を作る → computed
  • 変更をきっかけに処理する → watch

迷ったらこの2つで考えると整理しやすいです。

computed とは？

computed は、
**他の状態から計算される「結果の値」**を表します。

例：価格の合計を計算する

const price = ref(100);
const count = ref(2);

const totalPrice = computed(() => {
  return price.value * count.value;
});
<p>{{ totalPrice }}</p>
  • price や count が変わると自動で再計算される
  • キャッシュされるので無駄な再計算が起きにくい
  • template でそのまま使える

「表示用の値」「派生した値」は基本 computed

watch とは？

watch は、
特定の値が変わったタイミングで処理を実行するための仕組みです。

例：値が変わったらログを出す
watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal);
});
  • 値そのものを返す用途ではない
  • 副作用（処理）を書く場所
  • API通信、ログ出力、別の状態更新などに使う

「変更をきっかけに何かしたい」ときは watch

よくある勘違い①

// 非推奨
const data = computed(async () => {
  return await fetchData();
});
  • 非同期処理
  • 副作用

これらはwatch側に寄せたほうが安全。

よくある勘違い②

watch(price, () => {
  total.value = price.value * count.value;
});

実務での判断基準

自分はこう考えています

その値は「結果」か？
YES → computed
変更をトリガーに処理したいか？
YES → watch

Discussion