[Vue3] API 스타일

Vue 컴포넌트는 옵션 API와 컴포지션 API 2가지 스타일로 작성 가능하다.

1. 옵션 API

• 옵션의 data, methods, mounted 같은 객체를 사용하여 컴포넌트 로직 정의
• data: data()에서 반환된 속성들은 this에 노출
• methods: 속성값을 변경하고 업데이트 할 수 있는 함수 (템플릿 내에서 이벤트 리스너로 바인딩 될 수 있다.)
• mounted: Lifecycle에서 mounted 단계 때 호출된다.

<script>
export default {
  data() {
    return {
      count: 0
    }
  },

  methods: {
    increment() {
      this.count++
    }
  },

  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

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

2. 컴포지션 API

• import해서 가져온 함수들을 사용
• 일반적으로 <script setup>과 함께 사용
• setup: Vue가 더 적은 코드 문맥으로 컴포지션 API를 사용하고, 컴파일 시 의도한대로 동작할 수 있게 코드를 변환하도록 하는 힌트

<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>