onRenderTriggered() デバッグ：再レンダリングの原因を追跡する

最終更新：2026-10-22

onRenderTriggered() は、ある依存の変更がコンポーネントの再レンダリングを引き起こしたときに呼ばれ、「何が今回の更新をトリガーしたか」を直接教えてくれます。

📝 構文

onRenderTriggered((event) => {
  console.log('再レンダリングの原因', event.key)
})

event	デバッグイベント：トリガーしたキー、新旧の値、target

戻り値：なし

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

出力：

Logs the key and new value so unexpected updates are traceable.

⚠️ 注意 同じく開発環境でのみ有効で、一時的な調査用です。

💡 ヒント onRenderTracked と組み合わせます。まず依存の集合を見て、次にトリガー元を確認します。

Q パフォーマンス問題を特定できますか？

A 特定できます。過剰なレンダリングはよくある性能問題の原因で、このフックはトリガーしたデータを直接指し示します。

Q コンソールに大量のログが出ますか？

A 更新頻度の高いコンポーネントではログが大量に出ます。対象のコンポーネントにだけ一時的に有効化してください。

Q Vue Devtools の performance パネルとの違いは？

A Devtools はタイムライン表示を提供します。フックはスクリプトによる記録やカスタムレポートに向いています。

Web-Tutorial 技術チーム

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