Vue 3 Composition API 완벽 가이드

Vue 3 Composition API란?

Vue 3에서 도입된 Composition API는 컴포넌트 로직을 더 유연하게 구성할 수 있게 해주는 새로운 방식입니다.

setup() 함수

import { ref, computed } from 'vue'

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

    function increment() {
      count.value++
    }

    return { count, double, increment }
  }
}

ref vs reactive

• ref: 단일 값 (primitive) 반응형 데이터
• reactive: 객체 형태의 반응형 데이터