[TIL] Vue.js | Options API와 Component API

Vue에서 컴포넌트를 작성한다면 Options API와 Compotision API중 하나를 선택하게 된다.

각 스타일별 특징과 장단점은 다음과 같다.

 

Options API

data, methods, mounted 같은 객체를 사용하여 컴포넌트의 로직을 정의하는 방식이다.
옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출된다.

<script>
export default {
  // data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출
  data() {
    return {
      count: 0
    }
  },

  // methods는 속성 값을 변경하고 업데이트 할 수 있는 함수
  // 템플릿 내에서 이벤트 리스너로 바인딩 될 수 있음
  methods: {
    increment() {
      this.count++
    }
  },

  // 생명주기 훅(Lifecycle hooks) 중 하나인 mounted() 함수는 컴포넌트가 마운트 된 후 호출됨
  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

 

Composition API

Vue3에서 추가된 함수 기반의 API로, 컴포넌트 로직을 유연하게 구성할 수 있도록 하여 코드의 재사용성을 높인다. React를 주로 사용해왔다면 조금은 더 익숙할 스타일이다. import 해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의하는데, SFC(Single File Component)에서 컴포지션 API는 일반적으로 <script setup> 과 함께 사용된다. setup 속성은 보일러플레이트를 줄이며 컴파일시 의도한대로 코드를 변환하게 돕는 hint이다. 템플릿에서<script setup> 에 import 되어 가져온 객체와 선언된 최상위 변수 및 함수를 사용할 수 있다.

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

// ref 함수를 사용하여 반응형 상태를 생성하면 .value 속성이 기본으로 포함된다.
const count = ref(0)

// 속성 값을 변경하고 업데이트 할 수 있는 함수
// 값 변경시 Vue의 반응성 시스템에 의해 자동으로 감지되어 관련된 DOM 업데이트를 트리거한다.
function increment() {
  count.value++
}

// 컴포넌트가 마운트 된 후 호출될 생명주기 훅
onMounted(() => {
  console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

 

Options API와 Component API 중 무엇을 쓸까?

Options API는 this와 같은 component instance 개념을 중심으로 하므로 OOP 언어 배경을 가진 user와 class 기반 모델에 익숙한 사람에게 더 잘 맞는다. 반면, Composition API는 함수 범위에서 직접 반응형 변수를 선언하고, 복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성할 수 있기 때문에 Options보다 자유로운 로직 구성으로 재사용성을 향상시킬 수 있다.

 

공식 문서에서는 빌드 tools를 사용하지 않거나 낮은 복잡도의 서비스를 개발하고자 한다면 Options API를, Full Applications를 개발하고자 한다면 Compositions API와 SFC를 활용하는 것을 추천하고 있다. 

 

 

참고 링크 : https://vuejs.org/guide/introduction.html