首页  >  问答  >  正文

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

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

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

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

在询问之前,我尽了最大努力进行搜索,但无法找到此功能的任何内容。一般来说,Vue 开发工具没有很多好的资源,这有点令人惊讶,因为它们通常都有很棒的文档。

P粉420868294P粉420868294366 天前843

全部回复(1)我来回复

  • P粉231079976

    P粉2310799762023-11-10 13:18:05

    Vue DevTools 测量某些组件生命周期挂钩的持续时间(包括 createdmounteddestroyed)。如果持续时间超过阈值,它会在组件旁边显示彩色性能标签以标记潜在的性能问题 (来源):

    持续时间 颜色 示例 性能
    <= 10ms 绿色 - 好(?)
    > 10ms 黄色 需要改进
    > 30ms 红色

    回复
    0
  • 取消回复