[Vue3] Composition API(1)

Composition API ?

Vue의 버전이 3.x 버전으로 업데이트 되면서 등장한 새로운 기능입니다. 기존에 사용했던 data, methods, computed 등을 사용하는 Option API 의 경우 직관적으로 사용할 data를 작성하는 영역과, observer 역할을 하는 watch, 계산된 결과의 Cache 처리를 하는 computed, 복잡한 계산 또는 잦은 변경의 로직을 작성하는 methods 옵션이 있습니다.

하지만 해당 옵션들을 사용하다보면 한 파일 영역 내에 논리적으로 공통되지 않은 기능들이 뒤죽박죽 섞여있어 가독성이 떨어지는 문제가 있었는데요, 이에 대한 개선방안으로 Vue3.x 버전부터 Composition API 가 등장하게 됩니다.

 

Compostion API의 주요 구성

1. setup Function

import { reactive } from 'vue'

export default {
  // `setup`은 Composition API에서만 사용되는 훅입니다.
  setup() {

    return {
      state
    }
  }
}

기존 Option API에서 사용했떤 created() 대신 setup()이 비슷한 동작을 합니다. 최초 렌더링 이전에 setup()에서 정의된 변수, 함수 및 Options, props등의 초기 설정을 setup안에서 처리하고, 최초에 동작시킬 api까지 실행시킵니다. 이후 return으로 templete에서 사용할 변수, 함수등의 데이터를 내보내어 사용합니다.

 

 

2. 반응형 Function

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })
    const count = ref(0)
    
    console.log(state.count)
    console.log(count.value)

    return {
      state,
      count
    }
  }
}

Option API에서 data property에서 정의했던 반응형 변수들은 Composition API 에서는 ref와 reative함수로 이용하여 반응형을 유지할 수 있습니다. 추가로 각 반응형 함수는 ES6에 새로 등장한 Proxy객체를 이용합니다.

---

 

1) ref
 - ref는 number, string등의 리터럴 타입의 값을 value로 wrapping하여 ( ex : { value : 52 } ) 예시와 같이 사용 할때 .value로 접근하여 사용합니다. 다만 templete내에서는 자동으로 Unwrapping 되어 .value는 생략하여 사용할 수 있습니다.

2) reactive
- reative는 일반 객체형태로 정의하여 사용하며 객체 내부 property를 직접 접근하여 새로운 변수에 재정의할 경우 반응형 연결이 끊어집니다. 

const state = reactive({ count: 0 })

// n은 state.count에서 연결이 끊긴 로컬 변수입니다.
let n = state.count
// 원본의 상태(state.count)에 영향을 미치지 않습니다.
n++

// 로컬 변수 count는 state.count로부터 연결이 끊깁니다.
let { count } = state
// 원본의 상태(state.count)에 영향을 미치지 않습니다.
count++

// 함수는 일반적인 숫자를 수신하며,
// state.count의 변경 사항을 감지할 수 없습니다.
callSomeFunction(state.count)

 

참고사이트
https://v3-docs.vuejs-korea.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive