1. Options API (옵션스 API)

<aside> 💡

초기버전부터 기본적으로 사용되던 구성 방식으로, 컴포넌트를 여러 개의 옵션(data, methods, computed, watch, mounted, 등)으로 구분해서 정의하는 API 방식

</aside>

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

특징:

• 접근방식이 객체방식
• 코드가 옵션별로 구분되어 있음
• this 키워드를 많이 사용
• 초보자에게 직관적이지만, 로직이 많은 경우 응집력 낮고 유지보수 어려움

2. Composition API (컴포지션 API)

Vue 3에서 새롭게 도입된 방식으로, setup() 함수 안에서 로직 중심으로 컴포넌트를 구성하는 API입니다. reactive(), ref(), computed() 등 함수를 통해 상태 및 기능을 선언합니다.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
};

특징:

• 함수 기반 접근 방식
• 로직 기반 코드 구조 → 재사용성과 응집력↑
• this 대신 변수 사용 (ref, reactive 등)
• 코드가 길어지더라도 기능별로 정리 가능 → 가독성과 확장성↑

3. Options API vs Composition API 비교