onRenderTracked() 调试：追踪依赖收集

最后更新：2026-10-22

onRenderTracked() 在组件渲染期间每收集一个响应式依赖就调用一次，配合调试器可看清“谁让我重渲染”。

📝 语法

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

event	调试事件：target 对象、key 属性、type 类型

返回值：无

修改下面的代码，在预览区实时查看效果：

输出：

控制台打印渲染期间收集到的依赖键（如 value）。

⚠️ 注意 开发调试专用：生产构建中不生效，不要依赖它做业务逻辑。

💡 提示 排查“为什么这个组件反复重渲染”时，两者配合浏览器断点最有效。

更多案例即将上线。

Q 生产环境能看到吗？

A 不能，钩子只在开发构建中调用。

Q 和 Vue Devtools 的关系？

A Devtools 的组件检查面板内部就用了同类信息，手动钩子适合更精细的自定义日志。

Q 会显著影响性能吗？

A 每次渲染都会调用，日志量大时建议只在可疑组件上临时打开。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。