[vue3] 코드 정렬 권장 순서

공식문서에는 아래와 같이 작성되어 있음 (번역본)

구성요소/인스턴스 옵션은 일관되게 주문되어야 합니다.

이는 구성 요소 옵션에 권장되는 기본 순서입니다. 카테고리로 분할되어 있으므로 플러그인에서 새 속성을 추가할 위치를 알 수 있습니다.

1. 글로벌 인식 (구성 요소 이상의 지식 필요)
   • name
2. 템플릿 컴파일러 옵션 (템플릿 컴파일 방식 변경)
   • compilerOptions
3. 템플릿 종속성 (템플릿에 사용되는 자산)
   • components
   • directives
4. 구성 (속성을 옵션에 병합)
   • extends
   • mixins
   • provide/inject
5. 인터페이스 (컴포넌트에 대한 인터페이스)
   • inheritAttrs
   • props
   • emits
6. Composition API (Composition API 사용을 위한 진입점)
   • setup
7. 로컬 상태 (로컬 반응 속성)
   • data
   • computed
8. 이벤트 (반응형 이벤트에 의해 트리거되는 콜백)
   • watch
   • 수명주기 이벤트(호출되는 순서대로)
     • beforeCreate
     • created
     • beforeMount
     • mounted
     • beforeUpdate
     • updated
     • activated
     • deactivated
     • beforeUnmount
     • unmounted
     • errorCaptured
     • renderTracked
     • renderTriggered
9. 비반응성 속성 (반응성 시스템과 독립적인 인스턴스 속성)
   • methods
10. 렌더링 (구성요소 출력에 대한 선언적 설명)
    • template/render

원본 [접은글] 참고

Component/instance options order​

Component/instance options should be ordered consistently.

This is the default order we recommend for component options. They're split into categories, so you'll know where to add new properties from plugins.

1. Global Awareness (requires knowledge beyond the component)
   • name
2. Template Compiler Options (changes the way templates are compiled)
   • compilerOptions
3. Template Dependencies (assets used in the template)
   • components
   • directives
4. Composition (merges properties into the options)
   • extends
   • mixins
   • provide/inject
5. Interface (the interface to the component)
   • inheritAttrs
   • props
   • emits
6. Composition API (the entry point for using the Composition API)
   • setup
7. Local State (local reactive properties)
   • data
   • computed
8. Events (callbacks triggered by reactive events)
   • watch
   • Lifecycle Events (in the order they are called)
     • beforeCreate
     • created
     • beforeMount
     • mounted
     • beforeUpdate
     • updated
     • activated
     • deactivated
     • beforeUnmount
     • unmounted
     • errorCaptured
     • renderTracked
     • renderTriggered
9. Non-Reactive Properties (instance properties independent of the reactivity system)
   • methods
10. Rendering (the declarative description of the component output)
    • template/render

 

공식 문서의 script, template, style 태그 관련 : 

모든 파일이 일관되게 작성하는 것을 권장하고 있고, script와 template은 필수적임으로 style이 마지막에 오는 것을 권고한다.

참고 : https://vuejs.org/style-guide/rules-recommended

---

gpt에게 물어보니 아래와 같은 답변을 주었다.

<script> 버전

1. 임포트: 외부 라이브러리 또는 내부 컴포넌트 임포트
2. 상태 변수 선언: ref, reactive 등으로 반응형 변수 선언
3. 컴포넌트 설정: defineComponent 또는 export default를 사용하여 컴포넌트 정의
4. Computed 속성: 종속된 데이터에 따라 자동으로 계산되는 속성
5. 라이프사이클 훅: 컴포넌트의 특정 시점에 수행할 작업 정의 ( onMounted, onUnmounted, onUpdated 등)
6. 사용자 정의 함수 및 메서드: 컴포넌트의 동작을 정의하는 함수 작성

Vue 컴포넌트의 `<script>` 섹션에 코드를 작성할 때, 일반적으로 권장되는 순서와 구조가 있습니다. 이는 가독성을 향상시키고, 코드의 일관성을 유지하는 데 도움이 됩니다. 코드 작성 순서는 Vue의 라이프사이클과 컴포넌트 구조에 따라 결정됩니다.

### 일반적인 코드 작성 순서
다음은 Vue 컴포넌트에서 `<script>` 섹션을 작성할 때 일반적으로 권장되는 순서입니다:

1. **라이브러리 및 모듈 임포트**: 외부 라이브러리 또는 내부 모듈을 임포트합니다. 이는 컴포넌트의 맨 위에 배치하여, 사용된 모든 종속성을 한눈에 볼 수 있게 합니다.
   ```javascript
   import { ref, computed, onMounted, onUnmounted } from 'vue';
   import MyComponent from './MyComponent.vue';
   ```

2. **상태 변수 선언**: `ref` 또는 `reactive`를 사용하여 컴포넌트에서 사용하는 반응형 변수 및 데이터를 선언합니다. 이는 컴포넌트의 상태를 정의하는 기본 요소입니다.
   ```javascript
   const myVar = ref(0);
   const myData = reactive({ count: 0 });
   ```

3. **컴포넌트 설정**: `defineComponent` 또는 `export default`를 사용하여 컴포넌트를 정의합니다. 여기에서 컴포넌트의 이름, 데이터, props, computed 속성, methods, 라이프사이클 훅 등을 설정합니다.
   ```javascript
   export default {
     name: 'MyComponent',
   };
   ```

4. **Computed 속성**: 계산된 속성을 정의합니다. 이는 종속된 데이터의 변경에 따라 자동으로 다시 계산되는 속성입니다.
   ```javascript
   const computedValue = computed(() => myVar.value + 10);
   ```

5. **라이프사이클 훅**: `onMounted`, `onUnmounted`, `onUpdated` 등의 라이프사이클 훅을 사용하여 컴포넌트의 특정 시점에 수행할 작업을 정의합니다.
   ```javascript
   onMounted(() => {
     console.log('컴포넌트가 마운트되었습니다.');
   });
   ```

6. **사용자 정의 함수 및 메서드**: 컴포넌트의 동작을 정의하는 사용자 정의 함수를 작성합니다. 이는 컴포넌트의 동작과 관련된 로직을 포함합니다.
   ```javascript
   const myFunction = () => {
     console.log('사용자 정의 함수가 실행되었습니다.');
   };
   ```

### 스크립트 섹션의 구조
전체적인 스크립트 섹션의 구조는 다음과 같은 흐름으로 작성할 수 있습니다:

1. **임포트**: 외부 라이브러리 또는 내부 컴포넌트 임포트
2. **상태 변수 선언**: `ref`, `reactive` 등으로 반응형 변수 선언
3. **컴포넌트 설정**: `defineComponent` 또는 `export default`를 사용하여 컴포넌트 정의
4. **Computed 속성**: 종속된 데이터에 따라 자동으로 계산되는 속성
5. **라이프사이클 훅**: 컴포넌트의 특정 시점에 수행할 작업 정의
6. **사용자 정의 함수 및 메서드**: 컴포넌트의 동작을 정의하는 함수 작성

이러한 구조는 Vue 컴포넌트의 일반적인 코드 작성 순서를 나타내며, 가독성과 일관성을 향상시키는 데 도움이 됩니다. 이 순서를 유지하면 코드의 구조와 흐름을 쉽게 이해하고, 팀 협업 시에도 코드 스타일의 일관성을 유지할 수 있습니다.

<script setup> 버전

1. 임포트: 외부 라이브러리 또는 내부 컴포넌트 임포트
2. 상태 변수 선언: ref, reactive 등으로 반응형 변수 선언
3. Computed 속성: 종속된 데이터에 따라 자동으로 계산되는 속성
4. 사용자 정의 함수 및 메서드: 컴포넌트의 동작을 정의하는 함수 작성
5. 라이프사이클 훅: 컴포넌트의 특정 시점에 수행할 작업 정의 ( onMounted, onUnmounted, onUpdated 등)

* script setup은 컴포넌트 설정 필요 X

`<script setup>`은 Vue 3에서 컴포넌트 로직을 간결하고 효율적으로 작성할 수 있는 구조입니다. 이는 일반적인 `<script>` 섹션보다 코드의 가독성을 높이고, 불필요한 반복을 줄이는 데 도움을 줍니다. Vue 컴포넌트에서 `<script setup>`을 사용할 때, 일반적으로 권장되는 코드 작성 순서가 있습니다.

### `<script setup>`의 일반적인 코드 작성 순서
1. **라이브러리 및 모듈 임포트**: 컴포넌트에 필요한 외부 라이브러리나 내부 컴포넌트를 임포트합니다. 일반적으로 코드의 맨 위에 위치하여 필요한 모든 종속성을 한 번에 확인할 수 있습니다.
   ```vue
   <script setup>
   import { ref, computed, onMounted, onUnmounted } from 'vue';
   import MyComponent from './MyComponent.vue';
   ```

2. **상태 변수 선언**: `ref` 또는 `reactive`를 사용하여 반응형 변수 및 컴포넌트의 상태를 정의합니다.
   ```vue
   const count = ref(0);
   const user = reactive({ name: 'John', age: 30 });
   ```

3. **Computed 속성**: `computed`를 사용하여 종속 데이터의 변경에 따라 자동으로 계산되는 속성을 정의합니다.
   ```vue
   const doubled = computed(() => count.value * 2);
   ```

4. **사용자 정의 함수 및 메서드**: 컴포넌트의 동작을 정의하는 사용자 정의 함수를 작성합니다.
   ```vue
   const increment = () => {
     count.value++;
   };
   ```

5. **라이프사이클 훅**: `onMounted`, `onUnmounted` 등의 라이프사이클 훅을 사용하여 컴포넌트의 특정 시점에 수행할 작업을 정의합니다.
   ```vue
   onMounted(() => {
     console.log('컴포넌트가 마운트되었습니다.');
   });

   onUnmounted(() => {
     console.log('컴포넌트가 언마운트되었습니다.');
   });
   ```

6. **마지막으로**: `<script setup>` 블록을 닫습니다.
   ```vue
   </script>
   ```

### `<script setup>`의 구조
- **간결성**: `<script setup>`은 Vue 컴포넌트 로직을 간결하게 작성할 수 있습니다. 불필요한 `export default` 선언이나 `data`, `methods`, `computed` 등의 키워드를 사용할 필요가 없습니다.
- **변수 스코프**: `<script setup>`에서 선언된 변수와 함수는 해당 컴포넌트 내부에서만 유효하며, 다른 컴포넌트로 노출되지 않습니다.
- **라이프사이클 훅**: `onMounted`, `onUnmounted` 등의 훅을 직접 사용할 수 있습니다.
- **사용자 정의 함수**: 사용자 정의 함수를 직접 작성하고, 이를 컴포넌트 로직에 활용할 수 있습니다.

### 요약
`<script setup>`을 사용할 때, 일반적으로 필요한 라이브러리 및 모듈을 임포트하고, 컴포넌트의 상태 변수를 정의한 후, 사용자 정의 함수 및 라이프사이클 훅을 추가합니다. 이러한 순서는 코드의 가독성을 높이고, 컴포넌트 로직을 명확하게 유지하는 데 도움이 됩니다.

---

Q. <script>에서는 사용자 정의 함수 및 메서드가 마지막이였는데 <script setup>에서는 라이프 사이클 훅이 마지막인 이유가 있습니까?

 

A. `<script setup>`에서는 사용자 정의 함수와 라이프사이클 훅을 작성하는 순서에 특정 규칙이 있는 것은 아닙니다.

( Vue 컴포넌트의 일반적인 <script> 섹션에서는 코드 작성에 특정 규칙이 있습니다. 맨위의 글 참고)

다만, 라이프사이클 훅이 마지막에 오는 것이 일반적으로 권장되는 이유는 코드의 가독성과 라이프사이클의 흐름을 쉽게 파악할 수 있기 때문입니다.

### 라이프사이클 훅이 마지막에 위치하는 이유
- 코드 가독성: 라이프사이클 훅은 컴포넌트가 특정 상태에 도달할 때 실행되는 코드입니다. 코드를 읽을 때, 변수 선언 및 사용자 정의 함수와 구분하여 라이프사이클 관련 로직을 쉽게 파악할 수 있습니다.
- 라이프사이클의 흐름: 컴포넌트가 생성되고 파괴되는 시점에 따라 실행되는 로직을 이해하는 데 도움이 됩니다. 라이프사이클 훅이 코드의 마지막에 위치하면, 컴포넌트의 시작과 끝을 나타내는 로직을 명확하게 볼 수 있습니다.
- 명확한 구조: 사용자 정의 함수 및 메서드는 컴포넌트의 일반적인 동작을 정의합니다. 라이프사이클 훅은 컴포넌트의 라이프사이클에 특화된 로직을 처리합니다. 따라서, 일반 로직과 라이프사이클 로직을 구분하여 코드의 구조를 이해하기 쉽게 합니다.

### 순서에 대한 유연성
`<script setup>`에서는 사용자 정의 함수와 라이프사이클 훅의 순서를 자유롭게 선택할 수 있습니다. 중요한 것은 코드의 가독성과 이해하기 쉬운 구조를 유지하는 것입니다.

- 사용자 정의 함수가 먼저: 컴포넌트의 주요 동작을 정의하는 함수와 메서드를 먼저 작성하여, 컴포넌트 로직의 흐름을 쉽게 파악할 수 있습니다.
- 라이프사이클 훅이 나중에: 컴포넌트의 생명주기 동안 실행되는 로직을 코드의 마지막에 배치하여, 컴포넌트가 언제, 어떻게 동작하는지 명확하게 이해할 수 있습니다.

### 요약

라이프사이클 훅을 코드의 마지막에 배치하는 것은 코드 가독성과 라이프사이클의 흐름을 명확하게 하기 위한 일반적인 패턴입니다. 그러나, 사용자 정의 함수 및 라이프사이클 훅의 순서는 코드 구조와 가독성을 고려하여 유연하게 결정할 수 있습니다. 중요한 것은 코드가 읽기 쉽고, 컴포넌트 로직의 흐름을 이해하기 쉽게 유지하는 것입니다.