[Vue] Style Guide

 

Vue Style Guide

 

• Vue의 스타일 가이드 규칙은 우선순위를 기준으로 4가지 범주를 설정
• 우선순위
  • A : 필수 (Essential)
    1. 오류를 방지하는 데 도움이 되므로 어떤 경우에도 규칙을 학습하고 준수
  • B : 적극 권장 (Strongly Recommended)
    1. 규칙을 어겨도 코드는 여전히 실행되겠지만, 규칙 위반은 드물어야 함
  • C : 권장 (Recommended)
    1. 일관성을 보장하도록 임의의 선택을 할 수 있음
  • D : 주의 필요 (Use with Caution)
    1. 잠재적 위험 특성을 고려함

 

이번 글에서 학습하고 지켜야 할 스타일 가이드 2개

 

우선순위 A

 

  1 . v-for는 항상 key와 함께 사용하기

• 내부 컴포넌트의 상태를 일관되게 유지하기 위해 v-for에 항상 key를 사용하기
• 데이터의 예측 가능한 행동을 유지 시키기 (객체 불변성)

 

  2. v-for를 쓴 엘리먼트에 절대 v-if를 사용하지 말기

• 함께 쓸 수 있다고 생각되는 2가지 경우
  1. 목록의 항목을 필터링할 때
     • (v-for="user in users" v-if="user.isActive")
     • v-if가 먼저 계산되고, 해당 처리 시점에 반복 변수인 user가 존재하지 않기 때문에 에러 발생
     • Vue가 티렉티브를 처리할 때, v-if가 v-for보다 높은 우선순위를 가짐 
  2. 숨긴 목록의 렌더링을 피할 때
     • (v-for="user in users" v-if="shouldShowUsers")
     • v-if를 컨테이너 엘리먼트로 옮기기 
       • 더 이상 목록의 모든 사용자에 대해 shouldShowUsers를 확인하지 않도록 함
     • 한 번 확인하고 sholdShowUsers가 false인 경우 v-for를 평가하지도 않음

 

 

목록의 항목 필터링1

목록의 항목 필터링 2

 

숨김 목록 렌더링 피할 때