onRenderTriggered() Debug: Track What Triggers Renders
Last updated: 2026-10-22
onRenderTriggered() Debug: Track What Triggers Renders
onRenderTriggered() fires when a dependency change schedules a re-render, telling you exactly what triggered it.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onRenderTriggered((event) => {
console.log('re-render triggered by', event.key)
})⚙️ Arguments
| event | Debug event: key, new/old value and target |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
Logs the key and new value so unexpected updates are traceable.💡 Key Points
⚠️ Warning Dev-only, intended for temporary investigation.
💡 Tip Use together with onRenderTracked: dependencies first, triggers next.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Can it locate performance issues?
A Yes — it names the data behind each render.
Q Will it spam the console?
A Busy components log a lot; enable it narrowly.
Q Versus Devtools performance?
A Devtools gives a timeline; the hook suits scripted logging.
