首頁  >  問答  >  主體

Vue 開發工具中元件旁邊的效能數字是多少?

有人對 Vue 開發工具中的某個功能有見解或資源嗎?在元件窗格上,它顯示了我的元件,然後是這些紅色和黃 色的小方塊,以及我假設的元件的效能。

當我第一次載入應用程式時,它們不會出現,但例如我更新了一個文字輸入元件,當使用者輸入新值時,該元件會驗證其自己的格式。這會更新 Vuex 儲存和/或計算屬性,但令我困惑的是為什麼整個事情像一棵憤怒的聖誕樹一樣亮起來。不相關的組件顯示這些性能數據。

當我檢查 Vuex 歷史記錄中的突變時,我只更新一項。

在詢問之前,我盡了最大努力進行搜索,但無法找到此功能的任何內容。一般來說,Vue 開發工具沒有很多好的資源,這有點令人驚訝,因為它們通常都有很棒的文件。

P粉420868294P粉420868294313 天前781

全部回覆(1)我來回復

  • P粉231079976

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

    Vue DevTools 測量某些元件生命週期掛鉤的持續時間(包括 createdmounteddestroyed)。如果持續時間超過閾值,它會在組件旁邊顯示彩色效能標籤以標記潛在的效能問題 (來源):

    持續時間 顏色 範例 效能
    <= 10ms 綠色 - 好(?)
    > 10ms 黃色 需要改進
    > 30ms 紅色

    回覆
    0
  • 取消回覆