Vue3 script setup 간단 정리

vue3 <script setup>의 기본적인 사용법

🍬 script setup이란?

script setup은 싱글파일컴포넌트(SFC)내에서 Composition API 를 사용하기 위한 syntacic sugar 이다.

※ syntacic sugar : 문법적 설탕 ... 즉, 기능은 그대로인데 읽는 사람을 위해 직관적으로 쉽게 코드를 읽을 수 있게 만들었다는 뜻

SFC와 Composition API를 사용하는 경우 일반 script보다 많은 장점을 제공하기 때문에 script setup을 권장하고 있다.

 

 

🍬 script setup의 장점

(1) 간결한 문법

(2) 타입스크립트를 사용한 props와 emit 선언이 가능

(3) 런타임 성능 향상

※ template이 setup script와 같은 scope에 있는 render 함수로 컴파일되므로 프록시가 필요없기 때문에 런타임 성능이 향상된다.

(4) 뛰어난 IDE 타입 추론 성능

 

 

🍬 scripte setup 에서의 props와 emits

props와 emits은 defineProps()와 defineEmits() 를 통해서 사용한다.

※ defineProps()와 defineEmits()은 script setup 내부에서만 사용할 수 있는 컴파일러 매크로이기 때문에 따로 import를 안해도된다.

 

<script setup>
const props = defineProps({
  show: Boolean
})

const emit = defineEmits(['close', 'delete'])
</script>

defineProps는 props 옵션과 동일한 값을 허용한다.

defineEmits는 emits 옵션과 동일한 값을 허용한다.

 

특징1. 전달된 옵션을 기반으로 타입 추론을 제공한다.

특징2. 전달된 옵션은 setup() 에서 모듈 영역으로 호이스팅된다. 따라서 옵션은 setup() 영역에 선언된 지역 변수를 참조할 수 없다. (컴파일 오류)

특징3. 하지만 import 된 옵션은 사용할 수 있다. (import도 모듈 영역이라 호이스팅 되기 때문에) .. 아 졸라 복잡하네

특징4. script setup 을 사용하는 컴포넌트는 기본적으로 Template refs나 $parent와 같은 컴포넌트간 통신이 닫힌다.

 

 

🍬  script setup 에서의 $slots와 $attrs

script setup 내부에서 slot와 attrs를 사용하고 싶다면 각각 useSlots()와 useAttrs() 메서드를 사용한다.

<script setup>

import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs() // fallthrough 속성 접근하기

</script>

 

 

🍬  defineExpose() 

script setup 을 사용하는 컴포넌트는 기본적으로 Template refs나 $parent와 같은 컴포넌트간 통신이 닫힌다.

컴포넌트의 내부 데이터나 메서드를 명시적으로 노출하려면 defineExpose() 컴파일러 매크로를 사용할 수 있다.

<script setup>

import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
	a, b
})

</script>

 

 

🍬  script setup과 script를 함께 사용하는 경우

(1) script setup에서 표현할 수 없는 inheritAttrs 옵션이나 plugin을 통해 활성화된 커스텀 옵션을 사용하고자 할 때

(2) named export 를 선언했을 때

(3) 한번만 실행되어야하는 로직이 있을 때

<script>

// 일반 스크립트, 모듈 범위에서 한 번만 실행
runSideEffectOnce()

// 옵션 선언
export default {
    inheritAttrs: false,
    customOptions: {}
}

</script>

<script setup>
// 각 인스턴스 생성시 setup() 범위에서 실행
</script>

 

 

🍬 Top-level await

script setup 내의 제일 위에서 await를 바로 사용할 수 있다.

<script setup>

// async setup() 으로 컴파일된다.
const post = await fetch(`어쩌구api`);

</script>

 

 

 

🍬 컴파일러 매크로 사용을 위한 eslint 설정

defineProps와 defineEmits 컴파일러 매크로를 사용하려면 elsint 설정을 해야한다. 안그러면 에러나더라 ㅅㅂ

'vue/setup-compiler-macros': true,