Vue 开发工具中组件旁边的性能数字是多少？

Question

有人对 Vue 开发工具中的某个功能有见解或资源吗？在组件窗格上，它显示了我的组件，然后显示了这些红色和黄色的小方块，以及我假设的组件的性能。

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

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

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

Answer 1

Vue DevTools 测量某些组件生命周期挂钩的持续时间（包括created、mounted和destroyed）。如果持续时间超过阈值，它会在组件旁边显示彩色性能标签以标记潜在的性能问题（来源）：

期间	颜色	例子	表现
<= 10 毫秒	绿色的	-	好的 （？）
> 10 毫秒	黄色的		需要改进
> 30 毫秒	红色的		贫穷的

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

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

一个工具提示中可以有多个测量值：

可以通过全局设置>性能监控禁用这些标签（禁用后，您可能需要重新启动 Vue DevTools 才能清除标签）：