onRenderTracked() Debug: Track Dependency Collection
Last updated: 2026-10-22
onRenderTracked() Debug: Track Dependency Collection
onRenderTracked() fires for every reactive dependency collected during render — a devtool hook to see what the component depends on.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onRenderTracked((event) => {
console.log(event.type, event.key, event.target)
})⚙️ Arguments
| event | Debug event: target, key and type |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
Logs the dependency keys collected during render.💡 Key Points
⚠️ Warning Dev-only — absent in production builds; never rely on it in business logic.
💡 Tip Pairs with breakpoints when diagnosing repeated re-renders.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Visible in production?
A No — dev builds only.
Q Relation to Vue Devtools?
A Devtools builds on the same data; the hooks allow custom logging.
Q Does it hurt performance?
A It fires on every render, so enable it only on suspects.
