Vue3 Composition API / Options API 란?

vue의 컴포넌트 로직 구성 방식

vue의 컴포넌트 로직 구성방식으로 Vue의 컴포넌트에서 데이터, 메서드, 계산된 속성 등의 기능들을 어떻게 조직하고 관리할지 정의하는 방식입니다. Composition API 와 Options API 두 가지 방식이 있습니다.

Composition API란?

주요 특징

 

• setup() 함수 내에서 컴포넌트 로직 정의
• ref(), reactive()로 반응형 상태 생성
• computed, watch로 파생 상태 관리
• 생명주기 훅 사용 (onMounted, onUnmounted 등)
• <script setup> - (Script setup syntax 또는 Composition API With <script setup>) 방식과 setup() - (Option-style Composition API) 함수 방식 두가지로 사용할 수 있다.

장점

• 대규모 애플리케이션에서 코드 구성이 용이
• 로직 재사용이 편리 (composables)
• 더 나은 타입 추론
• 번들 크기 최적화 가능
• TypeScript 지원이 우수
• 코드 재사용성이 높음
• 보일러플레이트 코드 감소
• 논리적으로 연관된 코드를 함께 그룹화 가능

단점

• 학습 곡선이 높음
• React 스타일에 익숙해야 함
• 작은 컴포넌트에선 오히려 복잡할 수 있음

사용 추천 케이스

• 대규모/복잡한 애플리케이션
• TypeScript 사용 시
• 로직 재사용이 많은 경우
• 성능 최적화가 중요한 경우

case1) Option-style Composition API

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    function increment() {
      count.value++
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
}

 

case2) Composition API With script

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

 

Options API 란?

주요특징

• Vue2 스타일의 전통적인 방식
• this로 속성 접근
• 옵션별로 코드 구성

장점

• 초보자가 이해하기 쉬움
• 직관적인 코드 구조
• 작은 컴포넌트에 적합
• Vue2에서 마이그레이션이 쉬움

단점

• 큰 컴포넌트에서 코드가 분산됨
• TypeScript 지원이 상대적으로 부족
• 로직 재사용이 어려움

사용 추천 케이스

 

• 소규모/단순한 애플리케이션
• Vue 입문자
• Vue2에서 마이그레이션 시
• 빠른 프로토타이핑

 

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}