Composition API vs Options API

Vue2의 Options API

<template>
  <div>
      <button v-on:click="increment">Counter: {{ counter }}</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        counter: 0,
      };
    },
    methods: {
      increment() {
        this.counter++;
      },
    },
    mounted() {
      console.log('컴포넌트가 마운트 되었습니다')
    },
  }
</script>

<style lang="scss" scoped>

</style>

Vue3의 Composition API

<template>
  <div>
    <button v-on:click="increment">Counter: {{ counter }}</button>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";

export default {
  setup () {
    const counter = ref(0)

    const increment = () => counter.value++;

    onMounted(() => {
      console.log("컴포넌트가 마운트 되었습니다!")
    })
    return {
      counter,
      increment
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

Composition API란, 위와 같이 옵션(data, methods, ..)를 선언하는데 Options API와는 달리, 가져온 함수(ref, onMounted, ...)를 사용해 Vue의 컴포넌트를 작성하는 API 세트를 말한다.

Composition API의 장점은, 논리적 관심사를 그룹핑할 수 있다는 것이다.
예를 들면,

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

const books = reactive([]);
const addBook = (title, author) => {
	books.push({title, author});
};

위의 코드같이 관련된 데이터와 함수를 한데 묶어놓을 수 있어, 가독성이 올라간다!
또한, 해당 코드들을 다른 파일에서도 사용하려고 할 때 util 파일로 빼서 여러 파일에서 재사용할 수도 있다!

이를 이미지로 쉽게 비교해보자면,

이런 느낌인거다!

Composition API 쪽이 같은 그룹끼리 묶여있고 보기가 훨씬 편한것을 알 수 있다.

이러한 방식을 Composition API에서는 Composable 함수라고 한다.

참고자료

Vue.js 공식홈페이지로 가면, Composition과 Options를 비교해서 볼 수 있다고 하니 필요할 때 사용하면 좋을 것 같다.
Vue.js 공식 홈페이지