どちらもリアクティブな変更に応じてサイドエフェクトを実行しますが、依存関係の指定方法と提供する情報が異なります。サイドエフェクト(API呼び出し、ログ、手動DOMの操作)に使用してください — 値の導出には使用しないでください(それはcomputedです)。
なぜ重要なのか
正しいツールを選択することで、リアクティブなサイドエフェクトをクリーンに保ちます: 導出値には**computed**を使用します。
watchwatchEffectwatcherを導出に誤用する(computedの代わりに)ことは一般的なアンチパターンです。
<script setup>
import { ref, watch } from "vue";
const searchQuery = ref("");
watch(searchQuery, (newVal, oldVal) => {
// runs ONLY when searchQuery changes; you get both values
console.log(`changed from ${oldVal} to ${newVal}`);
fetchResults(newVal);
});
</script>
watchは、指定した特定のソースを監視し、そのソースが変更されたときだけコールバックを実行し、old値とnew値を提供します — それらを比較したり、特定の状態に反応する必要がある場合に便利です。
<script setup>
import { ref, watchEffect } from "vue";
const userId = ref(1);
const includeposts = ref(false);
watchEffect(() => {
// runs IMMEDIATELY, and re-runs whenever ANY ref it reads changes
fetchUser(userId.value, includeposts.value); // auto-tracks userId AND includeposts
});
</script>
watchEffectは、その中で使用されるすべてのリアクティブ値を自動的に追跡し(ソースリストなし)、セットアップ時に即座に実行します(その後、依存関係の変更時に再実行)。old/new値はありません。
watch watchEffect
Dependencies explicit (you name them) automatic (tracked from usage)
Runs immediately? no (unless immediate:true) yes
Old + new values? yes no
Best for reacting to specific state, running an effect that depends
needing prev value on several values
watch(source, cb, {
immediate: true, // run once right away (like watchEffect)
deep: true, // watch nested object changes
});
watch([a, b], ([newA, newB]) => {}); // watch multiple sources