・Vue.jsのwatchとwatchEffectの特徴は？
こんな疑問にお答えします。
「〇〇が変更されたら〇〇をする」みたいな処理を書きたいとき、watchやwatchEffectが使えますよね。
ただどっちを使えばよいか、どう違うのかがわからないかと。
今回自分用のメモとして、watchとwatchEffectの特徴や違いについてまとめてみました！
参考にどうぞ。
ということで、この記事では「Vue.jsのwatchとwatchEffectの特徴」について解説していきます！
・watchの特徴
・watchEffectの特徴
・watchとwatchEffectの違いや使い分け
目次
【解説】Vue.jsのwatchの特徴
まずwatchについて見ていきましょう。
主な特徴がこちら↓
- 監視する対象を定義する
- 古い値と最新の値を取得できる
- 初回の実行タイミング
順に解説してきます。
watchでは監視対象を定義して処理を書くのが、1つ目の特徴です。
watch( 監視対象, () => {
// 処理を書く
})リアクティブな変数を持つ監視対象の値が変わったときに、処理が実行されます。
例として下記コードを用意しました↓
<script setup lang="ts">
import { ref, watch } from 'vue';
const result = ref(0)
const count = ref(10)
let resultItem = 0
// resultを監視対象に
watch(result, () => {
resultItem = result.value + count.value
})
</script>
<template>
<p>resultItemの値は：{{ resultItem }}</p>
<button @click="count++">countの数値</button>
<button @click="result++">resultの数値</button>
</template>この場合「result」という値が監視対象になります。
「result」の値が変わると「resultItem = result.value + count.value」の処理が実行されるということですね。
ちなみに監視対象は、配列を用いれば複数指定が可能です。
watch([監視対象a,監視対象b], () => {
// 処理を書く
})先ほどの例だと、下記のようにすればcountの値が変更されたときでも処理を行うことができます。
watch([result,count], () => {
resultItem = result.value + count.value
})watchは監視対象に定義したものの「最新の値」と「古い値」を取得できるのが２つ目の特徴です。
書き方としてはこんな感じ↓
watch(監視対象, (最新の値, 古い値) => {
})やり方の例としてはこちら↓
watch(result, (newValue, oldValue) => {
console.log(newValue)
console.log(oldValue)
})監視対象にした「result」の値が変わるたびに、「result」の最新の値と古い値を取得することができます。
watchを使う場合、初回の実行タイミングは「監視対象が変更された時」となるのが３つ目の特徴です。
つまり定義した段階では、処理が実行しません。
そのため下記コードの「resultItem」は、「10」ではなく「0」が表示されます。
<script setup lang="ts">
import { ref, watch } from 'vue';
const result = ref(0)
const count = ref(10)
let resultItem = 0
// resultを監視対象に
watch(result, () => {
resultItem = result.value + count.value
})
</script>
<template>
<p>resultItemの値は：{{ resultItem }}</p>
<button @click="count++">countの数値</button>
<button @click="result++">resultの数値</button>
</template>監視対象となる「result」の値が変更されて、ようやく処理が実行され「resultItem」の値が変わるということです。
実は「immediate:true」オプションを変更すれば、定義時に処理を行うことが可能です。
{immediate: true}そんな書き方がこちら↓
<script setup lang="ts">
import { ref, watch } from 'vue';
const result = ref(0)
const count = ref(10)
let resultItem = 0
// resultを監視対象に
watch(result, () => {
resultItem = result.value + count.value
},
{immediate: true}
)
</script>
<template>
<p>resultItemの値は：{{ resultItem }}</p>
<button @click="count++">countの数値</button>
<button @click="result++">resultの数値</button>
</template>これで定義時に処理が行われるため、resultItemの値は最初から「10」が表示されます。
【解説】Vue.jsのwatchEffectの特徴
続いてwatchEffectについて見ていきましょう。
主な特徴がこちら↓
- 監視対象は処理中の中
- 初回の実行タイミング
順に解説してきます。
watchEffectは監視対象を定義しません。
処理中にあるリアクティブな変数が変わったら実行されるのが1つ目の特徴です。
watchEffect(() => {
// 処理内容を書く
// 処理内容にあるリアクティブ変数の値が監視対象
})例として下記コードを用意しました↓
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
const result = ref(0)
const count = ref(10)
let resultItem = 0
// この場合resultとcountが監視対象
watchEffect(() => {
resultItem = result.value + count.value
})
</script>
<template>
<p>resultItemの値は：{{ resultItem }}</p>
<button @click="count++">countの数値</button>
<button @click="result++">resultの数値</button>
</template>「resultItem = result.value + count.value」という処理内にあるリアクティブな変数が監視対象となります。
つまり「result」か「count」の値が変わったら、処理が実行されるということですね。
watchEffectの初回実行タイミングは、定義したときに実行されます。
つまり下記コードのresultItemは、最初から処理が実行するので「10」が表示されるということです。
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
const result = ref(0)
const count = ref(10)
let resultItem = 0
// この場合resultとcountが監視対象
watchEffect(() => {
resultItem = result.value + count.value
})
</script>
<template>
<p>resultItemの値は：{{ resultItem }}</p>
<button @click="count++">countの数値</button>
<button @click="result++">resultの数値</button>
</template>【解説】Vue.jsのwatchとwatchEffect【違い／使い分け】
最後にwatchとwatchEffectの違いや、使い分けについて見ていきましょう。
・監視対象を定義する
・古い値と最新の値を取得できる
・初回実行タイミングは「監視対象が変更された時」
ただしオプションを変えれば「定義した時」に変更可能
・監視対象を定義しない
処理内に書かれているリアクティブな変数の値が変わったら処理実行
・初回実行タイミングは「定義した時」
（※主な違いですので、他にも色々とあります）
先述した違いを考慮して、自分なりの使い分けは下記かなとなります。
・特定のデータやプロパティを監視したいとき
・変更前と変更後の値を利用したいとき
・コードをシンプルに書きたい時
・複数のリアクティブデータの依存関係を自動的に追跡したいとき
watchEffectのほうがコードをシンプルにかけるため、総合的に考えると便利なのかな？と思われます。
調べた感じwatchEffectを使う方のほうが多いらしいですね。
案件やその時の実装内容にあわせて、使い分けるのが良いかと。
【解説】Vue.jsのwatchとwatchEffectの特徴【違い／使い分け】：まとめ
- 監視対象の定義が異なる
- 古い値と最新の値を取得できるか否かが違う
- 初回実行タイミングが違う（watchはオプションで変更可）
watchやwatchEffectを使う時はためしてみてね！
