Vue 3, Options API vs Composition API

Options API 는 기존 Vue.js의 전통적인 방식으로

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

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

이런 식으로 data, methods, computed, watch 등의 정해진 구조 안에 작성하는 방식이다.

하지만 Vue 3 부터는 Composition API 라고 해서

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

const count = ref(0)
</script>

<template>
  <!-- 이 버튼이 작동하도록 만들어 봅시다 -->
  <button>숫자 세기: {{ count }}</button>
</template>

이런 식으로 함수를 import 하고 JavaScript 와 비슷하게 작성된다.

Composition API 의 장점은 정해진 틀 안에 작성하는게 아니라 유연하고 상태와 로직이 분리되지 않고 한 덩어리로 있어서 보기 편하다.

Vue 3 에서도 Options API 를 계속해서 지원하지만 본인은 Composition API 를 주로 사용 할 예정이다.