Vue3에서 새롭게 등장한 Composition API는 Options API를 단점을 보완해서 새롭게 등장한 API다.
Vue3 공식사이트에서 Compositon API로 개발하기를 권장하고 있다.
Composition API란
옵션 (data, methos, ...)를 선언하는 대신 가져온 함수 (ref, onMounted, ...)를 사용하여
vue 컴포넌트를 작성할 수 있는 API 세트를 말한다.
옵션 API에서는 함수 작성시 methos 영역에서만 가능했다면
Composition API는 script단 어디서든 함수 작성이 가능하다.
이것들이 다 compositionAPI다.
이것들은 OptionsAPI다
왜 compositonAPI 인가?
optionsAPI 에서는 논리적 관심사를 처리하는 코드가 파일안에서 분리 되어있다.
vue파일안에서 코드가 길어질 경우 코드를 분석하기가 힘들어진다.
하지만 CompositionAPI를 사용하면 이러한 문제점이 해결된다.
논리적 관심사가 같은 코드끼리 그룹화 할 수 있다.
그리고 이러한 코드를 다른곳에서 사용한다고 가정해보자.
이러한 코드를 utils 코드로 만들 수 있다.
Options API와 Composition API 코드이다. 같은 색깔이 논리적 관심사가 같은 코드이다.
Options API 같은 색상이 분산되어 있어서 코드 분석시에도 힘들고 utils 코드로 추출시에도 힘들다.
하지만 Composition API로 하면 그룹화 되어있어서 분석도 쉽고, utils 코드 추출도 쉬워진다.
CompositionAPI는 Options API가 가지고 있는 2가지 주요 제한 사항을 해결한다
hook을 사용하여 관련 코드 조각을 함께 그룹화한다
Composables을 사용하면 애플리케이션 전체에서 코드를 매우 쉽게 재사용할 수 있다.
composition API는 Options API의 기능을 모두 커버할수 있지만
필요하다면 props, emits, name 및 inheritAttrs는 사용할 수 있다.
Options API와 Composition API를 setup() 함수를 통해 둘 다 동시에 사용할 수 있지만
기존 Options API로 개발한 프로젝트에서 Composition API로 바꾸는 경우가 아니라면 추천하지 않는다.
새로 시작한 프로젝트라면 처음부터 Composition API로 개발하는걸 추천한다.
https://v3-docs.vuejs-korea.org/guide/introduction.html
소개 | Vue.js
v3-docs.vuejs-korea.org
vue.js 3 공식 사이트에서 Options API와 Composition API 를 비교한 가이드를 볼 수 있다.
'vue.js > Vue3 - 기본편' 카테고리의 다른 글
| 6. 템플릿 문법 (텍스트 보간법, v-once, v-html, v-bind) (0) | 2024.01.14 |
|---|---|
| 5. setup() (0) | 2024.01.14 |
| 4. Composition API (0) | 2024.01.14 |
| 2. Root 컴포넌트 렌더링 과정 + ESLint, Prettier (0) | 2024.01.07 |
| 1. Vue.js란 무엇인가? + 컴포넌트 이해하기 (0) | 2024.01.04 |