onRenderTracked() デバッグ：依存の収集を追跡する

最終更新：2026-10-22

onRenderTracked() は、コンポーネントのレンダリング中にリアクティブな依存が 1 つ収集されるごとに呼ばれます。デバッガと組み合わせると「何が自分を再レンダリングさせているか」が見えます。

📝 構文

onRenderTracked((event) => {
  console.log(event.type, event.key, event.target)
})

event	デバッグイベント：target オブジェクト、key プロパティ、type タイプ

戻り値：なし

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

出力：

Logs the dependency keys collected during render.

⚠️ 注意 開発時のデバッグ専用です。本番ビルドでは機能しないため、ビジネスロジックで頼ってはいけません。

💡 ヒント 「なぜこのコンポーネントは何度も再レンダリングされるのか」を調べるとき、ブラウザのブレークポイントと組み合わせると最も効果的です。

Q 本番環境で見られますか？

A 見られません。このフックは開発ビルドでのみ呼ばれます。

Q Vue Devtools との関係は？

A Devtools のコンポーネントインスペクタは内部で同種の情報を使っています。手動のフックはより細かいカスタムログに向いています。

Q パフォーマンスに大きく影響しますか？

A 毎回のレンダリングで呼ばれます。ログ量が多くなるので、疑わしいコンポーネントにだけ一時的に有効化することをおすすめします。

Web-Tutorial 技術チーム

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