watch() リアクティブなデータの変化を監視する

最終更新：2026-10-22

watch() は 1 つ以上のリアクティブなソースを監視し、変化があったときに新旧の値とともにコールバックを実行します。副作用を伴うリアクティブなロジックに適しています。

📝 構文

watch(source, (newVal, oldVal) => { ... }, { immediate: true, deep: true })

// 複数のソースを監視
watch([count, keyword], ([c, k], [oc, ok]) => { ... })

source	ref / getter 関数 / リアクティブなオブジェクト / 配列
callback	(newValue, oldValue, onCleanup) => void
options	immediate（即時実行）/ deep（深い監視）/ flush（pre\|post\|sync）

戻り値：監視を停止する関数 stop()

以下のコードを編集して結果を確認しましょう：

出力：

Editing the input shows 'old → new', e.g. '10 → 12'.

💡 ヒント デフォルトは遅延実行です。初回にも実行したい場合は immediate: true を追加します。

⚠️ 注意 deep: true は大きなオブジェクトを再帰的に走査するためパフォーマンスコストが大きくなります。特定のフィールドを監視するなら getter（() => obj.a）のほうが精密です。

⚠️ 注意 非同期の副作用（リクエストなど）は onCleanup / onWatcherCleanup で古いリクエストをキャンセルしましょう。放置するとレスポンスの順序が崩れます。

Q watch と computed にはどんな違いがありますか？

A computed はデータから値を導出します（戻り値があり、キャッシュされる）。watch は変化に応じて副作用（リクエスト送信、DOM 操作、ローカル保存など）を実行し、値を返しません。

Q watch で最初の 1 回を実行するには？

A { immediate: true } を渡します。setup のタイミングで 1 回実行され、そのとき oldValue は undefined になります。

Q watch で複数のデータを監視できますか？

A できます。配列を渡します：watch([a, b], ([newA, newB]) => ...)。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。