Vue Style Guide

개발자에게 코드는 얼굴이다!

• 개발할 때 코드 자체를 이해하는 것 만큼이나 중요한 건 일관된 스타일 가이드와 가독성이 높은 코드를 작성하는 것!
• 협업 가능성을 열어두고 읽기 편한 코드를 작성하자
• 다만 무조건 스타이가디를 따라가기 보단 경험, 기술스택 등을 충분히 고려하여 반영해야한다

---

• 우선순위A : 필수
• 우선순위B : 매우 추천
• 우선순위C : 추천
• 우선순위D : 주의

🔵 우선순위A : 필수

컴포넌트 이름에 합성어 사용!

루트 컴포넌트인 app과 <transition>, <compoenent> 등 Vue에서 제공되는 빌트인 컴포넌트를 제외하고 컴포넌트의 이름은 항상 합성어를 사용해야 합니다. (html 엘리먼트와의 충돌방지)

• 나쁨

Vue.component('todo',{
	//...
})
export default {
	name: 'Todo',
	/...
}

• 좋음

Vue.component('todo-item',{
	//...
})
export default {
	name: 'TodoItem',
	/...
}

컴포넌트 데이터

컴포넌트(new Vue를 제외한 모든곳)의 data프로퍼티의 값은 반드시 객체를 반환하는 함수여야합니다.

• 각 컴포넌트의 인스턴스 자체 data만을 관리하기를 윈해요. (오브젝트일 경우 컴포넌트의 모든 인스턴스가 공유하는 문제 발생을 방지)
• 나쁨

Vue.component('some-comp',{
  data:{
    foo:'bar'
  }
})

.export default {
  data:{
    foo:'bar'
  }
}

• 좋음

Vue.component('some-comp',{
  data: function() {
    return {
      foo:'bar'
    }
  }
})
export default {
  data() {
    return {
      foo:'bar'
    }
  }
}

Props 정의

prop 정의는 적어도 타입은 명시되도록 가능한 상세하게 정의되어야 합니다.

• 이 API는 컴포넌트의 API를 문서화하므로 컴포넌트의 사용 방법을 쉽게 알 수 있다.
• 개발중, Vue는 컴포넌트의 타입이 잘못 지정된 props를 전달하면 경고 메시지를 표시하여 디버깅을 쉽게 해준다.
• 나쁨

props:['status']

• 좋음

props:{
  status:String
}

• 매우좋음!

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

v-for에 key지정

필수!

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

v-if와 v-for를 동시에 사용하지 마세요

• 리스트 목록을 필더링할 때? (v-for="user in users" v-if="user.isActive") -> 이런 경우 users의 새로운 computed 속성으로 필터링된 목록을 만드세요
• 숨기기 위해 리스트의 렌더링을 피할 때? (v-for="user in users v-if="shouldShowUser) -> 이 경우 v-if를 컨테이너 엘리먼트로 옮기세요

Private 속성 이름

플러그인, mixin 등에서 커스텀 사용자 private 프로터피에는 항상 접두사 $_를 사용하라. 그 다음 다른 사람의 코드와 충돌을 피하려면 named scope를 포함하라. (e.g. $_yourPluginName_).

이후 가이드는 공식문서 참조