Vue 開発ツールのコンポーネントの横にあるパフォーマンスの数値は何ですか?

Question

Vue 開発ツールの機能に関する洞察やリソースを持っている人はいますか?コンポーネント ペインには、コンポーネントが表示され、次にこれらの小さな赤と黄色の四角形が表示され、コンポーネントのパフォーマンスが表示されます。

最初にアプリをロードしたときは表示されませんが、たとえば、ユーザーが新しい値を入力したときに独自の書式設定を検証するテキスト入力コンポーネントを更新しました。これにより、Vuex の保存プロパティや計算プロパティが更新されますが、私を困惑させたのは、なぜ全体が怒ったクリスマス ツリーのように点灯するのかということです。これらのパフォーマンス データは、無関係なコンポーネントに対して表示されます。

Vuex 履歴でミューテーションを確認するとき、更新される項目は 1 つだけです。

質問する前に一生懸命検索しましたが、この機能については何も見つかりませんでした。一般に、Vue 開発ツールには優れたドキュメントが用意されていることが多いため、これは少し驚くべきことですが、Vue 開発ツールに関する優れたリソースはあまりありません。

Answer 1

Vue DevTools は、特定のコンポーネントのライフサイクル フック (created、mounted、destroyed を含む) の期間を測定します。継続時間がしきい値を超えた場合、コンポーネントの横に色付きのパフォーマンス ラベルが表示され、潜在的なパフォーマンスの問題にフラグが立てられます (ソース):

＃＃＃間隔＃＃＃ ＃＃＃色＃＃＃ ＃＃＃例＃＃＃ ＃＃＃パフォーマンス＃＃＃ ＃＃＃緑＃＃＃ ＃＃＃良い（？）＃＃＃ > 10ms ＃＃＃黄色＃＃＃ ＃＃＃改善が必要＃＃＃ ＃＃＃赤＃＃＃ ＃＃＃違い＃＃＃

			-
			> 30ms