Vue computedとwatchの違い｜watchEffect使い分け早見表

computedとwatchの違いとは、「値を作るためのもの（computed）か、値の変化をきっかけに処理を行うためのもの（watch）か」の違いです。 computed は元の状態から計算した値を返してキャッシュし、watch は変化を受けて API 呼び出しや保存などの副作用を実行します。watchEffect は watch の仲間で、監視対象を書かなくても中で読んだ値を自動で追跡します。

この記事では、3つの API を5つの軸で比べる早見表と、deep・immediate・once・flush の全オプション一覧を最初に置きました。さらに「reactive のプロパティを直接渡して監視が効かない」「deep で新旧の値が同じになる」といったつまずきやすい動きを、Vue 3.5.43 で実際に動かしたログつきで再現しています。Vue 3.5 で加わった onWatcherCleanup と数値指定の deep も扱います。

computed・watch・watchEffectの早見表

選び方は次の3行で足ります。

watchのオプション早見表

バージョンの条件は Vue 公式ガイドの Watchers のページ（今回参照）の記載です。watchEffect で使えるのは flush のみで、watchPostEffect・watchSyncEffect という別名の関数も用意されています。

検証した環境

コンポーネントを使う例（flush と自動停止）は、<script setup> の SFC を @vue/compiler-sfc でコンパイルし、Vue Test Utils で jsdom 上にマウントして動かしました。それ以外の例は、同じ watch・computed の呼び出しを Node.js のスクリプト（.mjs）として実行しています。vue パッケージさえ入っていれば、次のコマンドで同じ結果を得られます。

npm i vue
node demo.mjs

3つを同じデータで動かして違いを見る

税抜価格 price から税込価格を求める例で、3つを同時に動かします。

// demo.mjs
import { ref, computed, watch, watchEffect, nextTick } from 'vue'
const log = console.log

const price = ref(100)
const withTax = computed(() => { log('  computed 実行'); return price.value * 1.1 })
watch(price, (n, o) => log(`  watch: ${o} -> ${n}`))
watchEffect(() => log(`  watchEffect: price=${price.value}`))

log('-- 定義直後')
log('  withTax.value =', Math.round(withTax.value))
log('  withTax.value =', Math.round(withTax.value), '(2回目)')
price.value = 200
log('-- price=200 を代入した直後（同期）')
await nextTick()
log('-- nextTick 後')
log('  withTax.value =', Math.round(withTax.value))

実行結果：

  watchEffect: price=100
-- 定義直後
  computed 実行
  withTax.value = 110
  withTax.value = 110 (2回目)
-- price=200 を代入した直後（同期）
  watch: 100 -> 200
  watchEffect: price=200
-- nextTick 後
  computed 実行
  withTax.value = 220

このログから読み取れることを整理します。

computedの使い方と細かな動き

基本形とキャッシュ

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

const items = ref([
  { id: 1, name: 'ノート', price: 300, done: false },
  { id: 2, name: 'ペン', price: 120, done: true },
])
const keyword = ref('')

// 絞り込み
const filtered = computed(() =>
  items.value.filter(i => i.name.includes(keyword.value))
)
// 合計
const total = computed(() =>
  filtered.value.reduce((sum, i) => sum + i.price, 0)
)
</script>

<template>
  <input v-model="keyword" placeholder="検索" />
  <ul><li v-for="i in filtered" :key="i.id">{{ i.name }} {{ i.price }}円</li></ul>
  <p>合計 {{ total }}円</p>
</template>

computed は別の computed を依存にできます。テンプレートに関数呼び出しを書くと再描画のたびに実行されますが、computed は依存が変わらない限り前回の結果を返すので、絞り込みや集計に向いています。

結果が同じなら、その先は動かない

computed を watch や watchEffect の監視対象にしたとき、再計算しても結果が同じなら、その先の処理は実行されません。

import { ref, computed, watch, watchEffect, nextTick } from 'vue'
const log = console.log

let calls = 0
const n = ref(1)
const isEven = computed(() => { calls++; return n.value % 2 === 0 })
watch(isEven, (v) => log('  watch(isEven):', v))
watchEffect(() => log('  effect isEven =', isEven.value))

n.value = 3; await nextTick(); log('  n=3 (奇数のまま) 計算回数', calls)
n.value = 4; await nextTick(); log('  n=4 計算回数', calls)

  effect isEven = false
  n=3 (奇数のまま) 計算回数 2
  watch(isEven): true
  effect isEven = true
  n=4 計算回数 3

n を 1 から 3 に変えると isEven は再計算されますが（計算回数 2）、結果は false のままなので watch も watchEffect も動いていません。「細かく変わる値を、変化の少ない値に変換してから監視する」と、無駄な処理を減らせます。

computedに代入するとどうなるか

[Vue warn] Write operation failed: computed value is readonly

computed は読み取り専用です。代入したい場合は、get と set を持つ書き込み可能な computed にします。

import { ref, computed } from 'vue'

const first = ref('Taro'), last = ref('Sato')
const full = computed({
  get: () => first.value + ' ' + last.value,
  set: (v) => { [first.value, last.value] = v.split(' ') },
})
full.value = 'Hana Kato'
console.log(first.value, '/', last.value)

  書き込み可能 computed: Hana / Kato

v-model に渡す値を加工したいときに便利な形です。

前回の結果を受け取る

computed のゲッターは、第1引数で前回の結果を受け取れます。「これまでの最大値」のような値を作れます。

const c = ref(0)
const maxSeen = computed((prev) => Math.max(prev ?? 0, c.value))
c.value = 5; maxSeen.value
c.value = 2
console.log(maxSeen.value)   // 5

  computed(prev):  5

computedに書かないほうがよいこと

computed は「同じ入力なら同じ結果を返す計算」に絞ると、いつ実行されても困らない読みやすいコードになります。

watchの第1引数に渡せるものと渡せないもの

reactiveのプロパティを直接渡すと監視が効かない

import { reactive, watch, nextTick } from 'vue'
const log = console.log

const state = reactive({ count: 0 })
watch(state.count, (n) => log('  A 直接渡し:', n))               // 数値 0 を渡している
watch(() => state.count, (n, o) => log(`  B getter: ${o} -> ${n}`))
state.count++
await nextTick()

実行結果：

[Vue warn]: Invalid watch source:  0 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.
  B getter: 0 -> 1

state.count と書いた時点で数値の 0 が取り出され、watch には「0」というただの値が渡ります。A は一度も呼ばれず、開発時には上の警告が出ます。プロパティを監視するときはゲッター関数で包む、と覚えておくと確実です。

複数の値をまとめて監視する

const first = ref('Taro'), last = ref('Sato')
watch([first, last], ([f, l], [of, ol]) => log(`  ${of} ${ol} -> ${f} ${l}`))
first.value = 'Jiro'; last.value = 'Kato'
await nextTick()

  Taro Sato -> Jiro Kato

同じタイミングで2つを変更しても、コールバックは1回にまとめられています。

deepの動きと「新旧の値が同じになる」理由

5つの書き方を同時に比べる

import { reactive, watch, nextTick } from 'vue'
const log = console.log

const state = reactive({ user: { name: 'Sato', tags: ['a'] } })

watch(state, (n, o) =>
  log('  A reactiveそのもの: new===old', n === o, '/ new.user.name', n.user.name, '/ old.user.name', o.user.name))
watch(() => state.user, () => log('  B getter(deepなし) 呼ばれた'))
watch(() => state.user, (n, o) =>
  log('  C getter+deep: new===old', n === o, '/ old.name', o.name), { deep: true })
watch(() => JSON.parse(JSON.stringify(state.user)), (n, o) =>
  log(`  D コピーを返すgetter: ${o.name} -> ${n.name}`))
watch(() => state.user.name, (n, o) => log(`  E プロパティのgetter: ${o} -> ${n}`))

state.user.name = 'Tanaka'
await nextTick()
log('-- state.user を丸ごと置き換え')
state.user = { name: 'Kato', tags: [] }
await nextTick()

実行結果：

  A reactiveそのもの: new===old true / new.user.name Tanaka / old.user.name Tanaka
  C getter+deep: new===old true / old.name Tanaka
  D コピーを返すgetter: Sato -> Tanaka
  E プロパティのgetter: Sato -> Tanaka
-- state.user を丸ごと置き換え
  A reactiveそのもの: new===old true / new.user.name Kato / old.user.name Kato
  B getter(deepなし) 呼ばれた
  C getter+deep: new===old false / old.name Tanaka
  D コピーを返すgetter: Tanaka -> Kato
  E プロパティのgetter: Tanaka -> Kato

deep で新旧の値が同じになるのは、オブジェクトの中身を書き換えただけでは「同じオブジェクト」のままだからです。watch は変更前のコピーを取っておくわけではなく、参照を渡しているため、コールバックが呼ばれた時点ではどちらも変更後の姿になっています。C の2回目のように、オブジェクトを丸ごと置き換えたときだけ新旧が別物になります。

変更前の値が必要なときは、次のどちらかにします。

D は変更のたびに全体を複製するので、大きなデータには E のように対象を絞る書き方が向いています。

refにオブジェクトを入れたときはdeepが必要

const user = ref({ name: 'Sato' })
watch(user, () => log('  A watch(user) deepなし'))
watch(user, () => log('  B watch(user, {deep:true})'), { deep: true })
watch(() => user.value.name, (n) => log('  C getter:', n))

user.value.name = 'Tanaka'; await nextTick()
log('-- user.value = {...} 置き換え')
user.value = { name: 'Kato' }; await nextTick()

  B watch(user, {deep:true})
  C getter: Tanaka
-- user.value = {...} 置き換え
  A watch(user) deepなし
  B watch(user, {deep:true})
  C getter: Kato

「ref に入れたオブジェクトのプロパティを変えたのに watch が動かない」ときは、A の状態になっています。deep: true を付けるか、C のようにプロパティのゲッターにします。

数値指定のdeepで探索する深さを決める（Vue 3.5）

Vue 3.5 以降は、deep に数値を渡して探索する階層を制限できます。

const s = reactive({ l1: { l2: { l3: { v: 0 } } }, top: 0 })
for (const d of [1, 2, 3, true]) {
  watch(() => s, () => log(`  deep:${d} が反応`), { deep: d })
}
log('-- s.top++ (1階層目)');                 s.top++;               await nextTick()
log('-- s.l1.l2 を置き換え (2階層目)');       s.l1.l2 = { l3: { v: 0 } }; await nextTick()
log('-- s.l1.l2.l3 を置き換え (3階層目)');    s.l1.l2.l3 = { v: 1 };  await nextTick()
log('-- s.l1.l2.l3.v++ (4階層目)');          s.l1.l2.l3.v++;        await nextTick()

-- s.top++ (1階層目)
  deep:1 が反応
  deep:2 が反応
  deep:3 が反応
  deep:true が反応
-- s.l1.l2 を置き換え (2階層目)
  deep:2 が反応
  deep:3 が反応
  deep:true が反応
-- s.l1.l2.l3 を置き換え (3階層目)
  deep:3 が反応
  deep:true が反応
-- s.l1.l2.l3.v++ (4階層目)
  deep:true が反応

deep: N は「N 階層目のプロパティまで」を監視していることがログからわかります。deep: true は全階層をたどるため、大きなオブジェクトでは探索に時間がかかります。「一覧の各行の直下の項目までで十分」のように範囲が決まっているなら、数値指定が合っています。

immediate・onceの動き

const q = ref('a')
watch(q, (n, o) => log(`  immediate: ${o} -> ${n}`), { immediate: true })
watch(q, (n, o) => log(`  once: ${o} -> ${n}`), { once: true })
watch(q, (n, o) => log(`  通常: ${o} -> ${n}`))
log('-- 定義直後')
q.value = 'b'; await nextTick()
q.value = 'c'; await nextTick()

  immediate: undefined -> a
-- 定義直後
  immediate: a -> b
  once: a -> b
  通常: a -> b
  immediate: b -> c
  通常: b -> c

immediate を付けたコールバックで旧値を使うときは、初回の undefined を考えた書き方にします（o?.id のようにオプショナルチェーンを使う、など）。「画面を開いたときに取得し、検索条件が変わったら取り直す」という処理は、immediate: true の watch か watchEffect で1か所にまとめられます。

flushで実行タイミングを選ぶ

flush は「コールバックを DOM 更新の前に実行するか、後に実行するか」を決めます。次のコンポーネントで、コールバックの中から画面の文字を読んで確かめました。

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

const n = ref(0)
const p = ref(null)
const log = (s) => console.log('  ' + s + ' / 画面: ' + p.value.textContent)

watch(n, (v) => log('pre(既定)  n=' + v))
watch(n, (v) => log('post       n=' + v), { flush: 'post' })
watch(n, (v) => log('sync       n=' + v), { flush: 'sync' })

const add3 = () => { n.value++; n.value++; n.value++ }
</script>

<template>
  <button @click="add3">+3</button>
  <p ref="p">{{ n }}</p>
</template>

ボタンを1回クリックした実行結果：

  sync       n=1 / 画面: 0
  sync       n=2 / 画面: 0
  sync       n=3 / 画面: 0
  pre(既定)  n=3 / 画面: 0
  post       n=3 / 画面: 3

更新後の DOM（要素の高さ、スクロール位置など）を読みたいときは flush: 'post' を選びます。'sync' は変更のたびに実行されてまとめが効かないので、真偽値のような単純な値の監視にとどめるのが扱いやすい使い方です。

全オプションをまとめたコピペ用コード

<script setup> にそのまま貼れる形で、ここまでの書き方をまとめます。

<script setup>
import {
  ref, reactive, computed,
  watch, watchEffect, watchPostEffect, onWatcherCleanup,
} from 'vue'

const keyword = ref('')
const page = ref(1)
const form = reactive({ name: '', tags: [], address: { city: '' } })
const result = ref([])

// 1. computed：値を作る
const trimmed = computed(() => keyword.value.trim())

// 2. watch：ref を監視（旧値つき）
watch(keyword, (newVal, oldVal) => {
  console.log(oldVal, '->', newVal)
})

// 3. watch：reactive のプロパティはゲッターで
watch(() => form.name, (name) => { /* ... */ })

// 4. watch：複数ソース
watch([trimmed, page], ([kw, p]) => { /* ... */ })

// 5. immediate：定義時にも実行
watch(page, (p, old) => { /* old は初回 undefined */ }, { immediate: true })

// 6. deep：ネストした変更も検知（数値は 3.5 以降）
watch(() => form.address, () => { /* ... */ }, { deep: true })
watch(() => form, () => { /* ... */ }, { deep: 2 })

// 7. once：最初の1回だけ（3.4 以降）
watch(() => form.name, () => { /* 初めて入力されたとき */ }, { once: true })

// 8. flush：DOM 更新後に実行
watch(result, () => { /* 更新後の DOM を読む */ }, { flush: 'post' })
watchPostEffect(() => { /* watchEffect の post 版 */ })

// 9. watchEffect：中で読んだものを自動で追跡、初回も実行
watchEffect(() => {
  document.title = `${trimmed.value} (${page.value}ページ)`
})

// 10. 後始末つきの取得（3.5 以降の onWatcherCleanup）
watch([trimmed, page], async ([kw, p]) => {
  const controller = new AbortController()
  onWatcherCleanup(() => controller.abort())
  const res = await fetch(`/api/items?q=${encodeURIComponent(kw)}&page=${p}`, {
    signal: controller.signal,
  })
  result.value = await res.json()
}, { immediate: true })

// 11. 停止・一時停止
const handle = watch(keyword, () => {})
handle.pause()    // 一時停止
handle.resume()   // 再開
handle()          // 停止（handle.stop() でも同じ）
</script>

このブロックは書き方の一覧として用意したもので、ブロック全体をひとつのコンポーネントとして動かしたものではありません（10 の fetch を含む形は未実行です）。個々のオプションの動きは、この記事の各セクションのコードで確認しています。

停止・一時停止・後始末

停止と一時停止

const n = ref(0)
const h = watch(n, (v) => log('  watch n=', v))
n.value++; await nextTick()

h.pause()
n.value++; await nextTick()
log('  (pause中は反応なし n=' + n.value + ')')

h.resume(); await nextTick()
log('-- resume 後')
n.value++; await nextTick()

h()
n.value++; await nextTick()
log('  (stop後は反応なし n=' + n.value + ')')

  watch n= 1
  (pause中は反応なし n=2)
  watch n= 2
-- resume 後
  watch n= 3
  (stop後は反応なし n=4)

watch と watchEffect の戻り値は関数で、呼び出すと停止します。Vue 3.5.43 では、この関数に pause・resume・stop の3つのメソッドが付いていました。pause 中に起きた変更は、resume した時点で1回実行されることがログからわかります（resume の直後に「watch n= 2」が出ています）。

コンポーネント内で作ったwatcherは自動で止まる

<script setup>
import { watch } from 'vue'

const props = defineProps(['src'])   // 外から渡された ref

watch(() => props.src.value, (v) => console.log('  同期で作成: ', v))

setTimeout(() => {
  watch(() => props.src.value, (v) => console.log('  setTimeout内で作成: ', v))
}, 0)
</script>

<template><i /></template>

外側で src を 1 に変え、コンポーネントをアンマウントしてから 2 に変えた結果です。

  setTimeout内で作成:  1
  同期で作成:  1
-- アンマウント後
  setTimeout内で作成:  2

非同期の中で作る必要があるときは、戻り値のハンドルを変数に持っておき、onUnmounted で呼び出します。多くの場合は、watch 自体は同期的に作り、条件のほうを監視対象に含める書き方にすると自動停止に任せられます。

onWatcherCleanupで前回の処理を取り消す（Vue 3.5）

検索語が続けて変わったとき、先に始めた取得の結果が後から届いて表示を上書きしてしまうことがあります。onWatcherCleanup は、次の実行が始まる直前（と停止時）に呼ばれる後始末を登録する関数です。

import { ref, watch, onWatcherCleanup, nextTick } from 'vue'
const log = console.log
const sleep = (ms) => new Promise(r => setTimeout(r, ms))

const id = ref(1)
watch(id, async (newId) => {
  let cancelled = false
  onWatcherCleanup(() => {
    cancelled = true
    log(`  cleanup: id=${newId} の処理を取り消し`)
  })
  await sleep(30)            // 通信の代わり
  if (cancelled) return
  log(`  id=${newId} の結果を反映`)
})

id.value = 2; await nextTick()
id.value = 3; await nextTick()
await sleep(80)

  cleanup: id=2 の処理を取り消し
  id=3 の結果を反映

id=2 の処理は、id=3 の実行が始まる前に取り消されています。fetch を使う場合は、先ほどのコピペ用コードの 10 のように AbortController の abort を登録します。

公式ガイドには「同期的な実行中に呼ぶ必要があり、await の後では呼べない」とあります。実際に await の後で呼ぶと、次の警告が出ました。

[Vue warn] onWatcherCleanup() was called when there was no active watcher to associate with.

Vue 3.4 以前でも使える書き方として、コールバックの引数で受け取る onCleanup があります。

const id3 = ref(1)
watch(id3, (v, o, onCleanup) => {
  onCleanup(() => log('  第3引数 onCleanup: 旧', v))
})
watchEffect((onCleanup) => {
  const v = id3.value
  onCleanup(() => log('  watchEffect onCleanup: 旧', v))
})
id3.value = 2; await nextTick()
id3.value = 3; await nextTick()

  watchEffect onCleanup: 旧 1
  第3引数 onCleanup: 旧 2
  watchEffect onCleanup: 旧 2

watchEffectの使い方と注意点

依存を書かなくてよい

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

const keyword = ref('')
const page = ref(1)

watchEffect(() => {
  // keyword と page のどちらが変わっても実行される
  console.log(`検索: ${keyword.value} / ${page.value}ページ`)
})
</script>

watch で書くと watch([keyword, page], ..., { immediate: true }) になる処理を、短く書けます。

awaitの後で読んだ値は追跡されない

import { ref, watchEffect } from 'vue'
const log = console.log
const sleep = (ms) => new Promise(r => setTimeout(r, ms))

const a = ref(1), b = ref(1)
watchEffect(async () => {
  const x = a.value          // await の前：追跡される
  await sleep(1)
  const y = b.value          // await の後：追跡されない
  log(`  effect a=${x} b=${y}`)
})
await sleep(10); log('-- a++'); a.value++
await sleep(10); log('-- b++'); b.value++
await sleep(10); log('  (b の変更では再実行されない)')

  effect a=1 b=1
-- a++
  effect a=2 b=1
-- b++
  (b の変更では再実行されない)

watchEffect が追跡するのは、最初の await より前に同期的に読んだ値だけです。非同期処理の中で使う値は、await の前に変数へ取り出しておくか、依存を明示できる watch を選びます。

watchとwatchEffectの選び方

つまずきやすい点と直し方の一覧

よくある質問

Q. computedとwatchはどちらを使えばよいですか？ A. 表示や他の計算に使う「値」が欲しいなら computed、値が変わったことをきっかけに通信・保存・ログ出力などの「処理」をしたいなら watch です。watch の中で別の ref に計算結果を代入しているだけなら、computed に置き換えられることが多いです。

Q. watchとwatchEffectの違いは何ですか？ A. watch は監視対象を第1引数で明示し、旧値を受け取れて、既定では初回実行しません。watchEffect は中で読んだ値を自動で追跡し、定義した時点で1回実行され、旧値は受け取れません。今回の検証では、watchEffect は await の後で読んだ値を追跡しませんでした。

Q. deepを付けると新しい値と旧い値が同じになるのはなぜですか？ A. オブジェクトの中のプロパティを書き換えても、オブジェクト自体は同じものだからです。watch は変更前のコピーを保存しないため、新旧どちらの引数も同じオブジェクトを指します。変更前の値が必要なときは、プロパティをゲッターで監視するか、コピーを返すゲッターを使います。

Q. onWatcherCleanupはどのバージョンから使えますか？ A. 公式ガイドの Watchers のページによると Vue 3.5 以降です。3.4 以前では、watch のコールバックの第3引数、または watchEffect の第1引数として渡される onCleanup を使います。今回は 3.5.43 で両方の動作を確認しました。

まとめ

• computed は値を作る、watch と watchEffect は変化をきっかけに処理する
• 旧値が取れるのは watch。watchEffect は定義時に1回実行され、依存を自動で追跡する
• reactive のプロパティはゲッター関数で渡す。直接渡すと「Invalid watch source」の警告が出て監視されない
• deep で新旧の値が同じになるのは同じオブジェクトを指すため。プロパティのゲッターかコピーを返すゲッターで解決できる
• deep は数値で階層を指定できる（3.5 以降）。once は1回だけ、immediate は定義時にも実行
• flush: 'post' で更新後の DOM を読める。'sync' は変更のたびに実行される
• onWatcherCleanup で前回の処理を取り消す。同期的に作った watcher はアンマウントで自動停止する

株式会社RJCでは、Vueのcomputedとwatchの使い分けを仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。