ホームページ  >  に質問  >  本文

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

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

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

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

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

P粉420868294P粉420868294365日前840

全員に返信(1)返信します

  • P粉231079976

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

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

    ###間隔### ###色### ###例### ###パフォーマンス### ###緑### ###良い(?)### > 10ms ###黄色### ###改善が必要### ###赤### ###違い###
    -
    <= 10ms > 30ms

    返事
    0
  • キャンセル返事