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.
Vue DevTools measures the duration of certain component lifecycle hooks (including
created
,mounted
, anddestroyed
). If the duration exceeds a threshold, it displays a colored performance label next to the component to flag potential performance issues (Source):