Wie lauten die Leistungszahlen neben den Komponenten in den Vue-Entwicklungstools?

Question

Hat jemand Einblicke oder Ressourcen für eine Funktion in den Vue-Entwicklungstools? Im Komponentenbereich wird meine Komponente angezeigt, dann diese kleinen roten und gelben Quadrate und ich gehe davon aus, dass die Leistung der Komponente vorliegt.

Wenn ich die App zum ersten Mal lade, werden sie nicht angezeigt, aber ich habe beispielsweise eine Texteingabekomponente aktualisiert, die ihre eigene Formatierung überprüft, wenn der Benutzer einen neuen Wert eingibt. Dadurch werden die von Vuex gespeicherten und/oder berechneten Eigenschaften aktualisiert, aber was mich verblüfft, ist, warum das Ganze wie ein wütender Weihnachtsbaum aufleuchtet. Diese Leistungsdaten werden für unabhängige Komponenten angezeigt.

Wenn ich den Vuex-Verlauf auf Mutationen überprüfe, aktualisiere ich nur eine.

Ich habe so intensiv gesucht, wie ich konnte, bevor ich gefragt habe, konnte aber nichts über diese Funktion finden. Es gibt im Allgemeinen nicht viele gute Ressourcen für Vue-Entwicklungstools, was etwas überraschend ist, da sie normalerweise über eine hervorragende Dokumentation verfügen.

Answer 1

Vue DevTools 测量某些组件生命周期挂钩的持续时间（包括 created、mounted 和 destroyed）。如果持续时间超过阈值，它会在组件旁边显示彩色性能标签以标记潜在的性能问题 (来源):

持续时间	颜色	示例	性能
	绿色	-	好（？）
> 10ms	黄色		需要改进
> 30ms	红色		差