What are the performance numbers next to components in the Vue dev tools?

Question

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.

Answer 1

Vue DevTools measures the duration of certain component lifecycle hooks (including created, mounted, and destroyed). 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