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

Question

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

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

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

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

Answer 1

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

持續時間	顏色	範例	效能
	綠色	-	好（？）
> 10ms	黃色		需要改進
> 30ms	紅色		差