Composition API는 로직을 함수 단위(composable) 로 묶어 재사용하고, 컴포넌트 안에서 선언 순서대로 실행되는 Vue 3 스타일입니다.

📘 기본 형태

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const count = ref(0);
const increment = () => {
  count.value += 1;
};

onMounted(() => {
  console.log('mounted');
});
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

• <script setup>: boilerplate 없이 top-level 선언이 template에 노출
• defineProps, defineEmits, defineExpose는 컴파일 매크로

🧩 composable

// useCounter.ts
import { ref } from 'vue';

export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => {
    count.value += 1;
  };
  return { count, increment };
}

• React custom hook과 비슷한 로직 공유 패턴
• 이름은 use 접두사 관례

⚖️ Options API와 비교

🔗 참고 자료

• Composition API FAQ — Options API와 Composition API의 차이를 설명한다.
• Composables — 로직 재사용 패턴을 설명한다.
• setup() — Composition API의 진입점 API다.