[Vue3] Composition API와 setup

Vue2의 지원기간이 23년 12월까지이므로,

신규 프로젝트에서 Vue3와 Composition API를 사용하게되어 배우기 시작하였다.

이번에 Vue2에서 Vue3로 넘어오면서 바뀐 부분은 크게 3가지다.

1. Option API => Composition API

2. Vuex => Pinia

3. Webpack => Vite

Composition API로 전환하면서 가장 눈에 띄는 변화는 <script>의 변화이다.

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

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

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

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

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

기존 Option API에서 export default의 data, computed, methods를 사용하여 componet를 선언하던 것에 비하여
Composition API에서는 <script setup> 또는 setup() 함수를 이용하여 반응성 데이터들을 선언해준다.