Vue Composition API vs Option API

Vue 컴포넌트는 Composition API와 Option API 방식으로 작성될 수 있다.

Option API란 ?

Option API는 객체 기반의 API이며 data, method, computed, mounted 등과 같은 객체 리터럴 형태로 정의하여 컴포넌트를 구성한다.

객체 리터럴이라는 말이 갑자기 생소한데 위의 이미지처럼 사실 우리가 줄곧 사용해왔던 형태이다.

아래의 이미지는 data, method, computed, mounted 등 컴포넌트의 속성, 메서드, 라이프사이클 훅을 객체 리터럴 형태로 정의한 Option API의 간단한 예시이다.

data 객체에서는 데이터 속성을 관리,
methods 객체에서는 메서드를 관리한다.
mounted는 vue에서 사용하는 라이프사이클 중의 하나를 사용한 것이다.

위에서 Option API의 형태를 간단한 예시로 확인할 수 있었는데
만약 관리하는 data와 그에 해당하는 methods가 여러개가 있다면 어떤 모습일까 ?

정말 간단한 예시지만 이런 형태일 것이다.
이처럼 점점 더 코드의 양이 많아 진다면 특정 data의 해당하는 methods를 한 눈에 확인하기가 어려울 것이다.

이를 보완하기 위해 탄생한 것이 Composition API이다.

Composition API란 ?

Composition API는 Vue 3에 내장된 기능이다. Vue 2까지 사용되었던 Option API 보다 더 나은 로직 재사용성과 보다 유연한 코드 구성, 가독성을 높여 Vue 3 공식문서에서는 Composition API를 사용할 것을 권장한다.

비교를 위해 예시부터 확인하는 게 좋을 듯 ?

data와 methods를 setup함수 안에 모두 포함시켜 특정 data의 해당하는 methods를 한 눈에 확인할 수 있게 되었다.

이를 Vue 공식문서에서 제공하는 이미지로 확인해보면

색상별로 동일한 논리적 문제와 관련된 코드가 어떻게 그룹화되었는지를 보여주는 예시이다. 확실히 내 기준 훨씬 가독성이 좋다고 보여진다.

SFC(Single-File-Components) 포맷을 사용하는 Vue에서 Composition API는 일반적으로
< script setup > 과 함께 사용된다.
공식문서도 권장함!

아, SFC는 쉽게 말해 JS, HTML, CSS가 하나의 파일에 공존(캡슐화)하는 형태라고 생각하면 쉽다.

< script setup >에서는 마크업 시 return 값을 적어주지 않아도 된다.