Legacy

Vue.js

Vue.js

초강력 슈퍼 스마트 권장사항

1. 컴포넌트

• 각 컴포넌트는 도메인에 해당하는 폴더 아래에 작성한다.
  • e.g. component/admin, component/kiosk, component/guest
• 컴포넌트명은 최소 두단어 이상의 조합으로 짓는다.
  • (예) <Item /> ㄴㄴ <todo-item >

2. props

• 타입을 반드시 명시해야하며, 자세히 작성할수록 좋다

  const props = defineProps(['status']) // 안돼
  
  //이렇게 작성하기 안하면 사형
  const props = defineProps({
    status: {
      type: String,
      required: true,
  
      validator: (value) => {
        return ['syncing', 'synced', 'version-conflict', 'error'].includes(
          value
        )
      }
    }
  })
  

  • 요약 Description

3. v-for에 key 사용하기

• 객체 일관성 유지를 위해 꼭 쓰라네요

//안좋음
<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

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

v-if 와 v-for를 함께 사용하지 말기