Vue 개발 도구의 구성 요소 옆에 있는 성능 수치는 무엇입니까?

Question

Vue 개발 도구의 기능에 대한 통찰력이나 리소스가 있는 사람이 있나요? 구성 요소 창에는 구성 요소가 표시되고 작은 빨간색과 노란색 사각형이 표시되며 해당 구성 요소에 대한 가상 성능이 표시됩니다.

처음 앱을 로드하면 표시되지 않지만, 예를 들어 사용자가 새 값을 입력할 때 자체 형식을 확인하는 텍스트 입력 구성 요소를 업데이트했습니다. 이는 Vuex 저장 및/또는 계산된 속성을 업데이트하지만 나를 당황하게 만드는 것은 왜 모든 것이 화난 크리스마스 트리처럼 켜지는가입니다. 이러한 성능 데이터는 관련되지 않은 구성요소에 대해 표시됩니다.

Vuex 내역에서 돌연변이를 확인할 때 하나만 업데이트합니다.

질문하기 전에 최대한 열심히 검색했지만 이 기능에 대한 내용을 찾을 수 없었습니다. 일반적으로 Vue 개발 도구에 대한 좋은 리소스는 많지 않습니다. 이는 일반적으로 훌륭한 문서를 보유하고 있기 때문에 약간 놀라운 일입니다.

Answer 1

Vue DevTools는 특정 구성 요소 수명 주기 후크(created、mounted 和 destroyed 포함)의 기간을 측정합니다. 기간이 임계값을 초과하면 잠재적인 성능 문제를 표시하기 위해 구성 요소 옆에 색상이 지정된 성능 레이블이 표시됩니다(출처):

기간	색상	예	성능
<= 10ms	그린	-	좋아(?)
> 10ms	노란색		개선이 필요합니다
> 30ms	빨간색		불량