Maison  >  Questions et réponses  >  le corps du texte

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

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.

P粉420868294P粉420868294365 Il y a quelques jours839

répondre à tous(1)je répondrai

  • P粉231079976

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

    Vue DevTools mesure la durée de certains hooks du cycle de vie des composants (y compris createdmounteddestroyed). 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
    <= 10ms Vert - Bien(?)
    > 10ms Jaune Besoin d'amélioration
    > 30ms Rouge Pauvre

    répondre
    0
  • Annulerrépondre