Vue.js에서 getter 및/또는 계산된 속성을 사용하는 모범 사례

Question

저는 vue.js를 좋아하고 계산된 속성과 VueX getter도 정말 좋아합니다. 그러나 내가 사용하는 방식이 성능상의 단점을 가져올지 확신할 수 없는 지점에 도달했습니다.

이것은 내 코드의 일반적인 패턴입니다(로컬 구성 요소 데이터 및 계산된 속성에도 해당).

다음의 간단한 상태(진실의 출처)로 시작하세요:

으아아아

내 게터에서는 보통 다음과 같이 합니다:

으아아아

그래서 제 질문은

이 될 것입니다.

1. 다른 게터에 의존하는 게터를 사용하고 있기 때문에 이것이 나쁜 습관으로 간주됩니까? 이는 순환 종속성으로 간주됩니까?

2. 항상 진실의 소스에서 직접 게터를 파생해야 합니까? 예를 들어, 위의 내용을...

   로 변경하세요.

으아아아

3. 성능 문제나 이상한 반복 루프 등이 없는지 확인하기 위해 브라우저 콘솔을 사용하여 게터나 계산된 속성을 디버깅할 수 있는 방법이 있나요?

시간을 내어 답변해 주시면 정말 감사하겠습니다!

Answer 1

이것은 순환 종속성이 아닙니다. 순환 종속성은 getter A 依赖于getter B，而getter B 又依赖于getter A 경우에만 발생하므로 무한 재귀가 발생합니다.

getters는 괜찮지만, 내가 아는 한 Vue는 매 틱마다 이를 호출합니다(tick이 무엇인지에 대한 자세한 내용을 보려면 여기를 클릭하세요). 이는 대부분의 경우 낭비입니다. 따라서 거의 변경되지 않는 값의 경우 한 번만 호출되고 Vue가 실행 결과를 캐시하는 computed，因为computed를 사용하는 것이 좋습니다.