[Vue.js] <script setup>

<script setup> 은 싱글 파일 컴포넌트(SFC) 내에서 Composition API 를 더 쉽게 읽거나 사용하기 위한 컴파일 타임 문법.

 

<script> 문법과 비교한 장점

• 더 간결한 코드
• 순수 typescript 를 사용하여 props 및 emit 이벤트를 선언하는 기능
• 더 나은 런타임 성능 => template 은 중간 프록시 없이 동일한 범위의 렌더함수로 컴파일 됨
• 더 나은 IDE 타입 추론 성능 => 언어 서버가 코드에서 타입을 추출하는 작업 감소

 

---

기본 문법

 

# script 블록에 setup 속성 추가

<script setup>
	console.log('vue.js')
</script>

 

 🔎  <script> 컴포넌트를 처음 가져올 때 한번만 실행 되는 코드 </script>

<script setup >컴포넌트의 인스턴스가 생성될 때마다 실행되는 코드 </script>

 

 

 

 

 

# 템플릿에 노출되는 최상위 바인딩

내부에 선언된 모든 최상위 바인딩(변수, 함수 선언, import) 은 템플릿에서 직접 사용할 수 있다.

<script setup>
//import 함수
import { capitalize } from './helpers'

//변수
const msg = 'hi';

//함수
function log() {
	console.log(msg)
}

</script>

<template>
	<div>{{ capitalize('hello') }}</div>
    <button @click="log">{{ msg }}</button>
</template>

 

 

 

 

# 반응형

템플릿에서 참조될 때 ref 는 자동으로 언래핑

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

const count = ref(0)
</script>

<template>
  <!-- 템플릿에서 ref는 언래핑되어 .value 없이 접근 가능 -->
  <button @click="count++">{{ count }}</button>
</template>

 

 

 

 

 

# defineProps() & defineEmits()

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// ... setup 코드
</script>

 🔎 defineProps 및 defineEmits 는 <script setup> 내에서만 사용할 수 있는 컴파일러 매크로 이다.

import 할 필요 없으며, <script setup> 이 처리될 때 컴파일 된다.

- 전달된 옵션을 기반으로 적절한 타입 추론을 제공