onWatcherCleanup() ウォッチャーのクリーンアップを登録する
最終更新：2026-10-22
onWatcherCleanup() ウォッチャーのクリーンアップを登録する
onWatcherCleanup() はクリーンアップ関数を登録します。ウォッチャーが無効になる（再実行または停止する）直前に呼ばれ、リクエストやタイマーのキャンセルなどに使います。
| グループ | リアクティビティ: 基本 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.5+ |
| SSR 対応 | 対応 |
📝 構文
watch(keyword, async () => {
const controller = new AbortController()
onWatcherCleanup(() => controller.abort())
const res = await fetch(url, { signal: controller.signal })
})⚙️ 引数
| cleanupFn | クリーンアップ関数。ウォッチャーが無効になる前に実行されます |
|---|
戻り値：なし（ウォッチャーのコールバック内で呼び出します）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Typing fast shows only the final result after a 600ms pause — earlier ones are cancelled.💡 ポイント
⚠️ 注意 ウォッチャーのコールバック内の同期的な実行段階でのみ呼び出せます。await の後で呼ぶとエラーになるため、事前に登録してください。
💡 ヒント watch コールバックの第 3 引数 onCleanup と同等の機能です。どちらの書き方もよく使われます。
ℹ️ 補足 典型的なシーン：検索のデバウンス、競合しないリクエストの実現、WebSocket 再接続時のクリーンアップなど。
🏷️ 関連基本
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q クリーンアップしないとどうなりますか？
A 古い処理が動き続けます。遅い旧リクエストのレスポンスが後から届いて新しい結果を上書きする——典型的な競合状態です。
Q onUnmounted との違いは何ですか？
A onWatcherCleanup はウォッチャーが再実行されるたびに呼ばれます。onUnmounted はコンポーネントのアンマウント時に 1 回だけ実行されます。
Q watchEffect の中でも使えますか？
A 使えます。watchEffect も対応しています（コールバックが onCleanup 引数を受け取れます）。
