Composition API

Composition API

Composition API는 옵션을 선언하는 대신 가져온 함수를 사용해 Vue 컴포넌트를 작성할 수 있는 API 세트를 말한다.

Composition API는 성격에 따라 3가지의 API로 나눌 수 있ek.

- 반응형 API(Reactivity API)

ref(), reactive()와 같은 API를 사용해 reactive state(반응 상태), computed state(계산 상태), watchers(감시자)와 같은 것들을 만들 수 있다.

- 라이프 사이클 훅(Lifecycle Hooks)

onMounted(), onUnmounted()와 같은 API를 사용해 프로그래밍 방식으로 컴포넌트 라이프 사이클에 접근할 수 있다.

- 종속성 주입(Dependency injection)

provide()와 inject()는 Reactivity API를 사용하는 동안 Vue의 의존성 주입 시스템을 활용할 수 있게 해준다.

반응형 API(Reactivity API)

반응하는 데이터와 관련된 API 세트
값이 변경되면 화면에 나타나는 값도 함께 변경되어 나타날 수 있게한다.

라이프 사이클 훅(Lifecycle Hooks)

Vue의 라이프 사이클 다이어그램
Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프 사이클이라고 한다.

쉽게 말하면, Vue 인스턴스가 생성된 후 우리 눈에 보이고, 사라지기까지의 과정이라고 생각하면 된다.

Vue의 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 이 4가지의 과정을 거치게된다.
create -> mount -> update -> destroy

그리고 라이프 사이클 훅이란, 라이프 사이클 단계에서 실행되는 함수를 뜻한다!

라이프 사이클 훅
Composition API 라이프 사이클 훅

처음 알았는데.. setup() 함수가 라이프 사이클 훅이 실행되기 전 제일 먼저 실행되는 것 같다...?

setup(), onBeforeMount(), onMounted() 실행되는 순서를 보니 setup() -> onBeforeMount() -> onMounted() 순서로 실행된다!!