What are the performance numbers next to components in the Vue dev tools?
P粉420868294
P粉420868294 2023-11-09 14:46:48
0
1
710

Does anyone have insights or resources for a feature in the Vue dev tools? On the components pane, it shows my component, and then these little red and yellow squares, and what I'm assuming is the performance of the component.

When I first load the app, they don't appear, but for example I updated a text input component that validates its own formatting when the user enters a new value. This updates the Vuex stored and/or computed properties, but what baffles me is why the whole thing lights up like an angry Christmas tree. These performance data are displayed for unrelated components.

When I check the Vuex history for mutations, I only update one item.

I searched as hard as I could before asking but couldn't find anything about this feature. There aren't a lot of good resources for Vue development tools in general, which is a bit surprising since they usually have great documentation.

P粉420868294
P粉420868294

reply all (1)
P粉231079976

Vue DevTools measures the duration of certain component lifecycle hooks (includingcreated,mounted, anddestroyed). If the duration exceeds a threshold, it displays a colored performance label next to the component to flag potential performance issues (Source):

duration color Example performance
green - good(?)
> 10ms yellow needs improvement
> 30ms red Difference
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!