Vue 開發工具中元件旁邊的效能數字是多少?
P粉420868294
P粉420868294 2023-11-09 14:46:48

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

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

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

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

P粉420868294
P粉420868294

全部回覆(1)
P粉231079976

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

持續時間 顏色 範例 效能
綠色 - 好(?)
> 10ms 黃色 需要改進
> 30ms 紅色
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!