우선 순위 C 규칙: 권장
여러 가지 동등하게 좋은 옵션이 존재할 때, 일관성을 유지하기 위해 임의적인 선택을 할 수 있습니다. 이 규칙에서는 각각의 허용 가능한 옵션을 설명하고 기본 선택을 제안합니다. 즉, 일관성을 유지하고 좋은 이유가 있다면 코드베이스에서 다른 선택을 자유롭게 할 수 있습니다. 하지만 좋은 이유가 있어야 합니다! 커뮤니티 표준에 적응함으로써 다음과 같은 이점이 있습니다:
- 대부분의 커뮤니티 코드를 더 쉽게 파악할 수 있도록 두뇌를 훈련시킵니다.
- 대부분의 커뮤니티 코드 예제를 수정 없이 복사 및 붙여넣을 수 있습니다.
- 새로운 직원이 이미 Vue에 관한 선호하는 코딩 스타일에 익숙할 가능성이 높습니다.
컴포넌트/인스턴스 옵션 순서
컴포넌트/인스턴스 옵션은 일관되게 정렬되어야 합니다.
이것은 컴포넌트 옵션에 대해 우리가 권장하는 기본 순서입니다. 그들은 카테고리로 나뉘어져 있어서 플러그인에서 새로운 속성을 추가할 위치를 알 수 있습니다.
- 글로벌 인지도 (컴포넌트를 넘어서는 지식 필요)
name
- 템플릿 컴파일러 옵션 (템플릿 컴파일 방식 변경)
compilerOptions
- 템플릿 의존성 (템플릿에서 사용되는 자산)
components
directives
- 구성 (옵션에 속성 결합)
extends
mixins
provide
/inject
- 인터페이스 (컴포넌트의 인터페이스)
inheritAttrs
props
emits
- 구성 API (구성 API 사용을 위한 진입점)
setup
- 로컬 상태 (로컬 반응형 속성)
data
computed
- 이벤트 (반응형 이벤트에 의해 트리거되는 콜백)
watch
- 라이프사이클 이벤트 (호출되는 순서대로)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeUnmount
unmounted
errorCaptured
renderTracked
renderTriggered
- 비반응형 속성 (반응형 시스템과 독립적인 인스턴스 속성)
methods
- 렌더링 (컴포넌트 출력의 선언적 설명)
template
/render
요소 속성 순서
요소(컴포넌트를 포함)의 속성은 일관되게 정렬되어야 합니다.
이것은 컴포넌트 옵션에 대해 우리가 권장하는 기본 순서입니다. 그들은 카테고리로 나뉘어져 있어서 사용자 정의 속성과 지시문을 어디에 추가할지 알 수 있습니다.
- 정의 (컴포넌트 옵션 제공)
is
- 목록 렌더링 (동일한 요소의 여러 변형 생성)
v-for
- 조건부 (요소가 렌더링/표시되는지 여부)
v-if
v-else-if
v-else
v-show
v-cloak
- 렌더링 수정자 (요소의 렌더링 방식 변경)
v-pre
v-once
- 글로벌 인지도 (컴포넌트를 넘어서는 지식 필요)
id
- 고유 속성 (고유한 값이 필요한 속성)
ref
key
- 양방향 바인딩 (바인딩과 이벤트 결합)
v-model
기타 속성 (모든 지정되지 않은 바인딩 및 바인딩되지 않은 속성)
이벤트 (컴포넌트 이벤트 리스너)
v-on
- 내용 (요소의 내용을 오버라이드함)
v-html
v-text
컴포넌트/인스턴스 옵션에서의 빈 줄
여러 줄로 된 속성 사이에 빈 줄을 추가하고 싶을 수도 있습니다. 특히 옵션이 화면에 스크롤 없이 맞지 않을 경우에는 더욱 그렇습니다.
컴포넌트가 읽기 어렵거나 혼잡해질 때, 여러 줄로 된 속성 사이에 공간을 추가하면 다시 살펴보기 쉬워질 수 있습니다. Vim과 같은 일부 편집기에서는 키보드로 탐색하기 쉽도록 이러한 형식의 옵션을 사용할 수도 있습니다.
잘못된 예
js
defineProps({
value: {
type: String,
required: true
},
focused: {
type: Boolean,
default: false
},
label: String,
icon: String
})
const formattedValue = computed(() => {
// ...
})
const inputClasses = computed(() => {
// ...
})
좋은 예
js
defineProps({
value: {
type: String,
required: true
},
focused: {
type: Boolean,
default: false
},
label: String,
icon: String
})
const formattedValue = computed(() => {
// ...
})
const inputClasses = computed(() => {
// ...
})
싱글 파일 컴포넌트 최상위 요소 순서
싱글 파일 컴포넌트는 항상 <script>
, <template>
, <style>
태그를 일관되게 정렬해야 하며, <style>
은 다른 두 태그 중 적어도 하나가 항상 필요하기 때문에 마지막에 와야 합니다.
잘못된 예
template
<style>/* ... */</style>
<script>/* ... */</script>
<template>...</template>
template
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
<!-- ComponentB.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
좋은 예
template
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
template
<!-- ComponentA.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
<!-- ComponentB.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>