watchEffect() 依存を自動追跡する副作用
最終更新：2026-10-22
watchEffect() 依存を自動追跡する副作用
watchEffect() は渡された関数を即座に実行し、その中で使われているリアクティブなデータを自動的に追跡します。依存が変化するたびに再実行されます。
| グループ | リアクティビティ: 基本 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
watchEffect(() => {
document.title = `${count.value} 回クリック` // count を自動追跡
})
// クリーンアップが必要なときは onCleanup 関数を受け取る
watchEffect((onCleanup) => { const t = setTimeout(fn, 500); onCleanup(() => clearTimeout(t)) })⚙️ 引数
| effect | 副作用関数。onCleanup を受け取り、クリーンアップ処理を登録できます |
|---|---|
| options | flush（pre|post|sync）/ onTrack / onTrigger |
戻り値：副作用を停止する関数 stop()
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The title becomes '0 clicks' on mount and updates after every click.💡 ポイント
💡 ヒント 依存リストを手書きする必要がありません。コードの書いた順序に関係なく、読み取ったデータがそのまま追跡されます。
ℹ️ 補足 旧値は取得できません。新旧の値を比較したい場合は、ソースを明示的に宣言する watch() を使いましょう。
⚠️ 注意 副作用内でリクエストを送る場合は onCleanup で古いリクエストをキャンセルしましょう。放置すると高速な変化の際に競合（レースコンディション）が発生します。
🏷️ 関連基本
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q watchEffect と watch、どう選べばいいですか？
A 依存がシンプルで旧値が不要なら → watchEffect（コードが短くなります）。旧値が必要、依存を正確に制御したい、遅延実行したいなら → watch です。
Q 関数内で使っていないデータの変化でも再実行されるのはなぜですか？
A 実際に読み取られたものだけが追跡されます。条件分岐の中で読み取った場合、依存は実行パスに応じて変化します。
Q watchEffect は停止できますか？
A できます。返された stop() を呼び出せば停止します。コンポーネントのアンマウント時にも自動的に停止します。
