옵션 API와 컴포지션 API

https://ko.vuejs.org/guide/introduction.html

소개 | Vue.js

 

 

Vue 컴포넌트는 옵션 API와 컴포지션 API 두 가지 스타일로 작성할 수 있다.

 

옵션 API

• 옵션의 data, methods, mounted 같은 객체를 사용하여 컴포넌트의 로직을 정의한다. 
• data() 안에 작성된 속성들은 반응적인 상태가 되어 함수 내부에서 this를 붙여줘야한다.

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

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

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

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

 

 

컴포지션 API

• Vue3 버전에 추가된 함수 기반의 API이다.
• import해서 가져온 API 함수들을 사용한다.
• SFC(싱글 파일 컴포넌트)에서 컴포지션 API는 일반적으로 <script setup>과 함께 사용된다.
• setup 속성은 더 적은 코드 작성으로 컴포지션 API를 사용하고 컴파일 시 의도한대로 올바르게 동작할 수 있도록 코드를 변환을 도와준다.
• 예를 들어 setup에 import 되어 가져온 객체들과 선언된 최상이 변수 및 함수는 템플릿에서 직접 사용할 수 있다.
•  

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

 

 

두 예제는 완전히 동일한 템플릿을 사용하는 동일한 컴포넌트이지만 API 스타일을 다르게 구성된 예제이다.