스크립트 요소 순서

문득 순서가 개판이길래...

 

스크립트 요소의 순서를 정하는 것은 가독성과 유지보수에 도움이 된다는 지피티의 말..

공식적인 규칙은 없지만, 일반적으로 많이 사용되는 컨벤션이 있다고 함...

 

일관성을 유지하고 가독성을 높혀 협업에 도움이 된다고 함...

 

 

 

• name: 컴포넌트 이름
• components: 컴포넌트 등록
• directives: 커스텀 디렉티브 등록
• mixins: 재사용 가능한 로직을 포함
• extends: 다른 컴포넌트를 상속
• props: 부모로부터 전달받는 속성 정의
• emits: 컴포넌트에서 발생하는 이벤트 정의
• data: 컴포넌트의 상태 정의 (반환된 객체로 작성)
• computed: 계산된 속성 (종속성을 기반으로 데이터를 자동 업데이트)
• watch: 데이터 변경 시 특정 로직 실행
• lifecycle hooks: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 등 컴포넌트 라이프사이클에 따라 호출되는 메소드
• methods: 사용자 정의 메소드
• template refs 관련 메소드: DOM이나 자식 컴포넌트를 조작하는 메소드 (예: mounted()에서 사용되는 메소드)

 

 

export default {
  // 1. 컴포넌트 옵션 (정적)
  name: 'MyComponent',
  components: {
    // 다른 컴포넌트 등록
  },
  directives: {
    // 디렉티브 등록
  },

  // 2. 리액티브 데이터 관련
  props: {
    // 부모 컴포넌트로부터 전달받는 속성 정의
  },
  data() {
    return {
      // 반응형 상태
    };
  },
  computed: {
    // 계산된 속성
  },
  watch: {
    // 데이터 변경 감지
  },

  // 3. 생명 주기 관련 훅
  beforeCreate() {
    // 컴포넌트 생성 전
  },
  created() {
    // 컴포넌트 생성 후
  },
  mounted() {
    // 컴포넌트 DOM에 마운트 된 후
  },

  // 4. 메소드
  methods: {
    // 사용자 정의 메소드
  }
}

 

 

이렇게 하면 구조가 명확해지고, 컴포넌트에서 어떤 속성이 어디에 정의되어 있는지 쉽게 찾을 수 있어 가독성과 유지보수가 좋아진다고 함...

 

 

https://ko.vuejs.org/style-guide/rules-recommended 

Vue.js

여기도 잘 정리되어 있음...

 

 

여러 가지 동등하게 좋은 옵션이 존재할 때, 일관성을 유지하기 위해 임의적인 선택을 할 수 있습니다. 이 규칙에서는 각각의 허용 가능한 옵션을 설명하고 기본 선택을 제안합니다. 즉, 일관성을 유지하고 좋은 이유가 있다면 코드베이스에서 다른 선택을 자유롭게 할 수 있습니다. 하지만 좋은 이유가 있어야 합니다!
커뮤니티 표준에 적응함으로써 다음과 같은 이점이 있습니다:

대부분의 커뮤니티 코드를 더 쉽게 파악할 수 있도록 두뇌를 훈련시킵니다.
대부분의 커뮤니티 코드 예제를 수정 없이 복사 및 붙여넣을 수 있습니다.
새로운 직원이 이미 Vue에 관한 선호하는 코딩 스타일에 익숙할 가능성이 높습니다.

 

 

# 컴포넌트/인스턴스 옵션 순서

컴포넌트/인스턴스 옵션은 일관되게 정렬되어야 합니다.

이것은 컴포넌트 옵션에 대해 우리가 권장하는 기본 순서입니다. 그들은 카테고리로 나뉘어져 있어서 플러그인에서 새로운 속성을 추가할 위치를 알 수 있습니다.

 

1. 글로벌 인지도 (컴포넌트를 넘어서는 지식 필요)

name

 

2. 템플릿 컴파일러 옵션 (템플릿 컴파일 방식 변경)

compilerOptions

 

3. 템플릿 의존성 (템플릿에서 사용되는 자산)

components

directives

 

4. 구성 (옵션에 속성 결합)

extends

mixins

provide/inject

 

5. 인터페이스 (컴포넌트의 인터페이스)

inheritAttrs

props

emits

 

6. 구성 API (구성 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

 

 

 

 

 

...