Vue3의 Composition API

 

 

Composition API

 

 

 

 

# <script setup>

SFC(Single-File Components)내에서 Composition API를 사용하기 위한 컴파일 타임 구문

setup()은 beforeCreate이전에 호출되는 것이며, this를 사용할 수 없다.

• 더 적은 상용구로 더 간결한 코드
• 순수 TypeScript를 사용하여 소품 및 방출된 이벤트를 선언하는 기능
• 런타임 성능 향상(템플릿이 중간 프록시 없이 동일한 범위의 렌더링 함수로 컴파일됨)

 

# reactive()

• 객체만 받을 수 있다.
• deep서치가 가능하다.
• 접근할 때 [.value]가 아니라 [변수명.key]로 접근한다.
• return시 ...refs(변수명)을 사용한다.

 

# ref()

• reactive와 달리 원시타입을 모두 받을 수 있다.
• 원시값을 value라는 key로 감싸 객체를 반환시킨다. 따라서 원본 값은 ref객체의 value속성을 통해 접근할 수 있으며, 값을 변경할 때에도 value속성에 접근하여 조작한다.
• ref()로 선어한 변수를 setup()안에서 사용할 때는 value프로퍼티에 접근해야하지만, return키워드로 반환할 때는 자동으로 래핑이 해제되어 value프로퍼티를 사용하지 않아도 된다. 

 

<template>
  // 여기서는 value를 붙이지 않아도 된다.
  <div>{{ count }}</div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
console.log(count.value)


</script>