03. OptionAPI, CompositionAPI

vue에서 script를 작성하는 방식은 두가지가 있는 데 제목처럼 OptionAPI, CompositonAPI  두가지 방식이다. 

두 방식의 차이는 코드를 통해서 살펴보자

 

1. OptionAPI

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

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

  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
  // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

OptionAPI 방식은 코드에서 확인할 수 있듯이 export default 내부에 data, method, mounted등의 객체를 선언해서 컴포넌트의 로직을 정의하는 방식이다.

 

data에 정의된 count에 접근하기 위해서 method나 mounted 부분을 확인해보면 this 키워드를 사용해서 접근하는 것을 확인할 수 있다.

 

2. CompostionAPI

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

// 반응적인 상태의 속성
const count = ref(0)

// 속성 값을 변경하고 업데이트 할 수 있는 함수.
function increment() {
  count.value++
}

// 생명 주기 훅
onMounted(() => {
  console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>

OptionAPI와의 차이는 script 태그에서 setup이라는 키워드가 추가되어있는데

setup을 사용하게 되면 스크립트 내부에서 정의한 변수를 템플릿 내부에서 사용할 수 있게 된다.

그리고 OptionAPI에서 data 내부에 정의했던 count에 접근할 때는 increment 함수 내부에 있는 것 처럼 count.value를 사용해서 접근하는 것을 확인 할 수 있다.

3. 두 방식의 차이

Vue 공식문서에 따르면 OptionAPI는 초보자에게 친숙하며 일반적으로 객체지향 언어배경을 가진 사용자에게 사용하기 편하다고 한다.

그리고 CompositionAPI는 함수 범위에서 ref, reactive등을 통해 직접 반응형 변수를 선언하고 복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성하는데 중점을 둔다.

 

그리고 OptionAPI는 CompositionAPI 위에 구현이 된다고 한다.

 

컴포지션API의 장점은 다음 링크에서 더 확인할 수 있다.

https://v3-docs.vuejs-korea.org/guide/extras/composition-api-faq.html#what-is-composition-api