watchSyncEffect() 同期的に実行される副作用

最終更新：2026-10-22

watchSyncEffect() は watchEffect に flush: 'sync' を付けたものと同等です。依存が変わるとバッチ処理を経ずに即座に同期的に実行されます。

📝 構文

watchSyncEffect(() => {
  console.log('即座に実行', count.value)
})

effect	副作用関数。オプションは watchEffect と同じ（flush は除く）

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

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

出力：

A +2 click logs twice (e.g. '2 2'); with default flush you would see the final value once.

⚠️ 注意 同期的に実行するとバッチ処理がスキップされるため、高頻度で変化する場面ではパフォーマンスリスクが顕著です。毎回の変化を正確に捉える必要がある場合のみ使いましょう。

ℹ️ 補足 典型的な用途：デバッグのトレースや、変化を厳密に順序どおり記録したい場面です。

💡 ヒント watch（デフォルトの pre）+ nextTick で解決できる場合は、sync を使わないようにしましょう。

Q sync モードとデフォルトモードの違いは何ですか？

A デフォルトは同じタイミング内の複数の変更を 1 回の実行にまとめます。sync は変更のたびに即座に 1 回実行します。

Q パフォーマンス問題が起きやすくなりますか？

A はい。代入のたびに同期的に副作用が走るため、ループ内で変更するとコストが線形に増大します。

Q 新旧の値は取得できますか？

A 取得できません。watchEffect 系です。新旧の値が必要な場合は watch に flush: 'sync' を付けてください。

Web-Tutorial 技術チーム

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