Vue.js - 두개의 API Styles

 

Vue 컴퍼넌트들은 두개의 다른 API 스타일로 사용 될 수 있습니다.

 

1. Options API

2. Composition API

 

* Options API

 

Options API에서는 콤포넌트의 logic을 option 객체 (ex. data, methods, mounted ) 를 사용하여 정의 합니다. Option에 의해 정의된 Properties들은 function 안의 this에 의해 사용 가능합니다. this는 component instance입니다.

 

<script>
export default{

//data()에 의해 return된 Properties는 reactive 상태
data() {
  ruturn {
  	count: 0
  }
},

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

// lifecycle의 mounted 단계에서 called
mounted() {
	console.log('the initial count is ${this.count}.')
}
}
</script>

<template>
	<button @click="increment">Count is: {{ count }} </button>
</template>

 

* Composition API

 

Composition API에서는 component의 로직을 import 된 API function을 사용하여 정의합니다. SFC에서 Component API는 <script setup> 태그와 함께 사용 됩니다. setup 속성은 Composition API가 boilerplate 없이 compile-time transforms 역할을 한다는 것을 의미합니다. 예를 들어 import된 최상위 변수와 함수가 <script setup> 태그 안에서 선언된다면 이들은 template에서 바로 사용 가능합니다.

 

위에서 본 tempalte를 Composition API와 <script setup>을 사용하면 다음과 같이 구현 가능합니다.

 

<script setup>

import { ref, onMounted } from 'vue'

const count = ref(0)

functon increment() {
	count.value++
}

onMounted( () => {
	console.log('The initial count is ${count.value}.')
})
</script>

<template>
	<button @click="increment">Count is: {{ count }} </button>
</template>

 

* 복잡한 구조에는 Composition API + SFC 구조가 좋다

--> 어플리케이션 제작이 목적이라면 Compositon API 구조를 사용