컴포지션 API

관련된 내용을 한 덩어리를 만들 수 있는 API입니다.

예를 들면, 왼쪽은 여태까지 배워왔던 vue.js입니다.

자세히 보면, 빨간박스는 msg를 다루고, 노란박스는 count를 다룹니다.

아직 내용이 적어서 구분하기 편하지만,

나중에 데이터들 많아지면 보기 힘들 것 같습니다.

 

오른쪽은 컴포지션 api를 사용했습니다.

관련된 내용을 모두 한 묶음으로 처리해서

작업이나 수정, 분석할 때 모두 편리합니다.

 

반응형 데이터(반응성)

ref패키지를 통해 반응성을 추가합니다.

전에도 배웠듯이 ref는 객체 데이터를 반환해서

increase함수에 count.value를 명시해야 됩니다.

 

기본 옵션과 라이프사이클

ref 옵션

computed 옵션

watch 옵션

첫번째 변수는 감시하고 싶은 객체입니다.

 

mounted라이프사이클은 여기서 onMounted를 import해야 됩니다.

created라이프사이클은 여기서 setup이 같은 기능을 수행하고 있어서

별도로 import할 필요없이 바로 작성하면 됩니다.

 

라이프사이클들을 컴포지션 api를 적용하려면

beforeCreated, created빼고 기타 훅 앞에 on을 붙이면 됩니다.

 

props, context

왼쪽 내용을 api를 사용해 오른쪽으로 정리할 수 있습니다.

props와 context 두 변수를 자주 사용합니다.

props는 쉽게 말하면 정적인 것을 단일 표현할 때 사용하고,

context는 정적 객체 혹은 동적인 것을 표현할 때 사용합니다.

 

주의할 점은 context뒤에는 $표시 없습니다.