Composition API

- Composition API vs Option API

Option API 방식은 객체지향 중심의 접근 방식이고, Composition API 방식은 논리 중심의 접근 방식

 

- Option API

Vue.js 2.x 버전에서 사용

<script> 태그 내에서 Vue에서 사용하기 위한 하나의 Options 객체를 만들어서 export 시킴

Options 객체 내부에서는 data, methods 등 성격에 따라 미리 지정된 속성에 객체 또는 함수로 작성하고 내부에서 다른 요소를 참조할 때는 this를 이용

실질적인 data를 다루는 data(), 함수를 다루는 methods, 캐싱 처리된 computed 등의 객체를 사용하여 컴포넌트 로직을 정의

컴포넌트에 수많은 데이터가 공존한다면 methods, computed도 많아져 데이터가 어디서 어떤 함수에 의해 변하는지 분산되어 추적이 어려워짐 => 하나의 데이터가 어떻게 변화하고 사용되는지 그룹핑 하는 것이 어려워지고 그에 따라 유지보수가 어려워짐

 

- Composition API

옵션 선언을 하던 방식에서 함수 구성을 기반으로 하는 API 스타일로 작성하는 방식(하지만 Composition API는 Vue의 변경 가능하고 세분화된 반응성 패러다임을 기반으로 작성되기 때문에 불변성을 강조하는 함수형 프로그래밍은 아님)

라이프사이클 훅을 따로 사용할 수 있음(onMounted(), onCreated())

요소들을 성격에 따라 모아 놓지 않고 논리적인 동작에 따라 모아서 작성할 수 있음(setup() 내부에 구성 요소들을 선언)

기존 Option API의 로직 재사용 기술인 mixins의 단점을 해결하고 반응성 시스템에 쉽게 통합하기 위한 구조로 짜여져 있어 깨끗한 코드를 작성할 수 있는 프레임 워크 역할을 함

setup을 통하여 구성 요소의 템플릿이 코드의 동일한 범위에 인라인된 함수로 컴파일 되기에, 이전 Option API에서 this로 접근하는 과정을 줄여주기 때문에 변수 이름을 안전하게 단축할 수 있어 더 나은 코드를 작성할 수 있음

setup 함수에 데이터가 그룹핑 되어 보다 용이하게 데이터의 흐름을 파악하고 유지보수가 용이해짐

반복되는 코드(필터링 등)를 import하여 Composition API 내부에서 사용함으로 함수 재사용이 용이함

ref, reactive로 반응형 데이터 사용 가능: ref는 원시 값, reactive는 객체나 배열에 사용

computed, watch는 Vue2의 computed, watch와 동일

props(부모 컴포넌트에서 props를 내릴 경우): 상위에서 어떤 props를 받을 것인지 알려준 후 props.xxx로 접근

 

 

 

 

 

 

 

참고:

https://kyounghwan01.github.io/blog/Vue/vue3/composition-api/

vue3 composition api 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable

https://velog.io/@buddle6091/23.03.01-Vue3-Composition-API%EC%99%80-Option-API

📆 23.03.01 - Vue 3 Composition API와 Option API

https://goodteacher.tistory.com/527

[vue 3]코드 작성 방법