effectScope() 副作用をスコープにまとめて管理する
最終更新：2026-10-22
effectScope() 副作用をスコープにまとめて管理する
effectScope() は複数のウォッチャーや算出プロパティを 1 つのスコープにまとめ、一括で開始・停止できます。個別の stop 関数を管理する手間がなくなります。
| グループ | リアクティビティ: 応用 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const scope = effectScope()
scope.run(() => {
watch(a, fn)
watchEffect(fn2)
})
scope.stop() // スコープ内の全副作用を一度に停止⚙️ 引数
| detached | true にすると親スコープから切り離します（デフォルトは false で親と一緒に停止） |
|---|
戻り値：スコープオブジェクト：run(cb) / stop() / on() / off() / pause() / resume()
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Both logs follow changes until stopAll() is clicked, then neither updates.💡 ポイント
💡 ヒント コンポーザブル内で使うと、呼び出し側は 1 つの stop（スコープのハンドル）だけで全体を破棄できます。
ℹ️ 補足 コンポーネント内ではデフォルトでコンポーネントのスコープに紐づきます。detached: true にすればコンポーネントを越えて独立して生存できます。
⚠️ 注意 スコープに収集されるのは、そのスコープが実行中に作成された computed / watch だけです。
🏷️ 関連応用
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q なくても済みますか？
A 1 つのウォッチャーなら返りの stop で十分です。複数の副作用をまとめて管理する場面では、ボイラープレートを大幅に減らせます。
Q detached はいつ使うのですか？
A コンポーネントのライフサイクルを越えて生存する状態管理（Pinia の内部など）で使われます。
Q 一時停止できますか？
A 3.4 以降は pause() / resume() が提供され、スコープ内の全副作用を一時的に停止・再開できます。
