［Vue.js］watch（値の監視）

公開日：2026-02-24
更新日：2026-02-24

1. 概要

watch で値を監視して、変更があった場合に処理を実行します。

動作確認：Vite 7.3.1、Vue.js 3.5.25

2. サンプル１

2.1 コード

index.html と src/main.ts は、「Hello, World」で作成したものを使用します。

src/App.vue

コード

<script setup lang="ts">
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`old:${oldValue}  new:${newValue}`);
})
</script>

<template>
  {{ count }}<br />

  <button @click="count++">Count up</button>
</template>

実行結果

2.2 説明

count が変わると、watch() で指定した関数が実行されます。

3. サンプル２－複数

3.1 コード

src/App.vue

コード

<script setup lang="ts">
import { ref, watch } from 'vue';

const count1 = ref(0);
const count2 = ref(0);
const count3 = ref(0);

watch([count1, count2, count3], ([newValue1, newValue2, newValue3], [oldValue1, oldValue2, oldValue3]) => {
  console.log(`Value1 - old:${oldValue1}  new:${newValue1}`);
  console.log(`Value2 - old:${oldValue2}  new:${newValue2}`);
  console.log(`Value3 - old:${oldValue3}  new:${newValue3}`);
})
</script>

<template>
  {{ count1 }} {{ count2 }} {{ count3 }}<br />

  <button @click="count1++;">Count up 1</button>
  <button @click="count2++;">Count up 2</button>
  <button @click="count3++;">Count up 3</button>
</template>

実行結果

3.2 説明

watch で複数の ref を指定すると、指定した ref のうち 1 つでも変化があると、指定した関数が呼ばれます。
この時に呼ばれる関数の引数には、指定した ref の数だけ old と new が入ります。
また、今回変更された ref に対応する old と new には、今回の old と new の値が入っていますが、
変更されていない ref に対応する old と new には、前回の値が入っているので要注意です。

＜前の記事

v-model（双方向バインディング）

次の記事＞

watchDebounced（値の監視）