vue.js - 组件旁边的 Vue devtools 中的性能数字是多少？

Question

有没有人对 Vue 开发工具中的功能有深入的了解或资源？在组件 Pane 中，它显示了我的组件，然后是这些红色和黄色的小方 block ，我假设这些方 block 是组件的性能。

当我第一次加载应用程序时，它们不会出现，但例如我更新了一个文本输入组件，该组件在用户输入新值时验证其自身的格式。这会更新 Vuex 存储和/或计算属性，但令我困惑的是为什么整个事情像一棵愤怒的圣诞树一样亮起来。不相关的组件显示这些性能数字。

当我检查 Vuex 历史记录中的突变时，我只更新了一项。

在询问之前，我已尽力四处搜索，但找不到与此功能相关的任何信息。 Vue 开发工具一般没有很多好的资源，这有点令人惊讶，因为它们通常有很好的文档。

Answer 1

Vue DevTools 测量组件的某些生命周期钩子(Hook)(包括created、mounted 和destroyed)的持续时间。如果持续时间超过标记潜在性能问题的阈值 (source)，它会在组件旁边显示彩色性能标签:

<表类="s-表"><头>持续时间颜色例子性能<正文><= 10 毫秒绿色-好(？)> 10 毫秒黄色 需要改进> 30 毫秒红色 差

我无法重现绿色标签，但我认为它可能被故意隐藏以避免不必要的噪音。

将鼠标悬停在彩色标签上会显示一个工具提示，其中显示了与测量相关的生命周期 Hook 的名称:

并且一个工具提示中可以有多个测量值:

可以通过全局设置> 性能监控禁用这些标签(禁用后，您可能必须重新启动 Vue DevTools 才能清除标签):