onRenderTriggered() 调试：追踪重渲染原因

最后更新：2026-10-22

onRenderTriggered() 在某个依赖变化导致组件重新渲染时调用，直接告诉你“是谁触发了这次更新”。

📝 语法

onRenderTriggered((event) => {
  console.log('重渲染由', event.key, '触发')
})

event	调试事件：触发键、新旧值、target

返回值：无

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

输出：

控制台显示触发键 value 与新值，帮助定位意外更新来源。

⚠️ 注意 同样仅开发环境生效，用于临时排查。

💡 提示 与 onRenderTracked 配合：先看依赖集合，再看触发来源。

更多案例即将上线。

Q 能定位性能问题吗？

A 能：过度渲染是常见性能来源，它直接指出触发数据。

Q 会打印很多日志吗？

A 组件更新频繁时日志很多，建议只在目标组件上临时启用。

Q 和 Vue Devtools 的 performance 面板区别？

A Devtools 提供时间线视图；钩子适合脚本化记录与自定义上报。

Web-Tutorial 技术团队

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