组件旁边的 Vue devtools 中的性能数字是多少？
What are the performance numbers in the Vue devtools next to the components?
是否有人对 Vue Dev Tools 中的功能有见解或资源？在组件窗格中，它显示了我的组件，然后是这些红色和黄色的小方块，我假设是组件的性能。
当我第一次加载应用程序时，它们不会出现，但例如我更新了一个文本输入组件，当用户输入新值时，该组件会验证其自身的格式。这更新了一个 Vuex 存储 and/or 一个计算 属性 但让我困惑的是为什么整个事情像一棵愤怒的圣诞树一样亮起来。不相关的组件显示这些性能数字。
当我检查 Vuex 历史记录中的突变时，我只更新了一项。
我在询问之前已尽力四处搜索，但找不到有关此功能的任何信息。 Vue 开发工具一般没有很多好的资源，这有点令人惊讶，因为它们通常有很好的文档。
Vue DevTools 测量某些组件的生命周期挂钩（包括 created、mounted 和 destroyed）的持续时间。如果持续时间超过标记潜在性能问题的阈值 (source)，它会在组件旁边显示彩色性能标签：
Duration
Color
Example
Performance
<= 10ms
green
-
Good (?)
> 10ms
yellow
Needs improvement
> 30ms
red
Poor
我无法重现绿色标签，但我认为这可能是有意隐藏以避免不必要的噪音。
将鼠标悬停在彩色标签上会显示一个工具提示，其中显示了测量的关联生命周期挂钩的名称：
并且一个工具提示中可以有多个测量值：
可以通过全局设置 > 性能监控禁用这些标签（禁用后，您可能需要重新启动 Vue DevTools 以清除标签):
是否有人对 Vue Dev Tools 中的功能有见解或资源？在组件窗格中，它显示了我的组件，然后是这些红色和黄色的小方块，我假设是组件的性能。
当我第一次加载应用程序时，它们不会出现，但例如我更新了一个文本输入组件，当用户输入新值时，该组件会验证其自身的格式。这更新了一个 Vuex 存储 and/or 一个计算 属性 但让我困惑的是为什么整个事情像一棵愤怒的圣诞树一样亮起来。不相关的组件显示这些性能数字。
当我检查 Vuex 历史记录中的突变时，我只更新了一项。
我在询问之前已尽力四处搜索，但找不到有关此功能的任何信息。 Vue 开发工具一般没有很多好的资源，这有点令人惊讶，因为它们通常有很好的文档。
Vue DevTools 测量某些组件的生命周期挂钩（包括 created、mounted 和 destroyed）的持续时间。如果持续时间超过标记潜在性能问题的阈值 (source)，它会在组件旁边显示彩色性能标签：
| Duration | Color | Example | Performance |
|---|---|---|---|
| <= 10ms | green | - | Good (?) |
| > 10ms | yellow | Needs improvement | |
| > 30ms | red | Poor |
我无法重现绿色标签，但我认为这可能是有意隐藏以避免不必要的噪音。
将鼠标悬停在彩色标签上会显示一个工具提示，其中显示了测量的关联生命周期挂钩的名称：
并且一个工具提示中可以有多个测量值：
可以通过全局设置 > 性能监控禁用这些标签（禁用后，您可能需要重新启动 Vue DevTools 以清除标签):