Quels sont les chiffres de performances à côté des composants dans les outils de développement Vue ?

Question

Quelqu'un a-t-il des informations ou des ressources sur une fonctionnalité des outils de développement Vue ? Sur le volet des composants, il montre mon composant, puis ces petits carrés rouges et jaunes, et ce que je suppose être les performances du composant.

Lorsque je charge l'application pour la première fois, ils n'apparaissent pas, mais par exemple j'ai mis à jour un composant de saisie de texte qui valide son propre formatage lorsque l'utilisateur saisit une nouvelle valeur. Cela met à jour les propriétés stockées et/ou calculées de Vuex, mais ce qui me déroute, c'est pourquoi le tout s'illumine comme un arbre de Noël en colère. Ces données de performances sont affichées pour les composants non liés.

Lorsque je vérifie l'historique de Vuex pour les mutations, je n'en mets à jour qu'une seule.

J'ai cherché aussi fort que possible avant de demander, mais je n'ai rien trouvé sur cette fonctionnalité. Il n'existe pas beaucoup de bonnes ressources pour les outils de développement Vue en général, ce qui est un peu surprenant car ils disposent généralement d'une excellente documentation.

Answer 1

Vue DevTools mesure la durée de certains hooks du cycle de vie des composants (y compris created、mounted 和 destroyed). Si la durée dépasse un seuil, il affiche une étiquette de performance colorée à côté du composant pour signaler les problèmes de performances potentiels (Source) :

Durée	Couleur	Exemple	Performances
	Vert	-	Bien(?)
> 10ms	Jaune		Besoin d'amélioration
> 30ms	Rouge		Pauvre