💻 < script setup >

<script setup>은 Single-File-Component 내에서 Composition API를 사용하기 위한 syntactic-sugar(문법적 설탕) 입니다. SFC와 CompositionAPI를 사용하는 경우 <script setup>을 사용하는 것을 권장한다. 왜냐면 일반 <script> 구문보다 많은 장점을 제공해준다.

• 간결한 문법으로 사용구(boilerplate)를 줄일 수 있다.
• 타입스크립트를 사용한 props와 emits 선언 가능
• 런타임 성능의 향상(템플릿이 setup 스크립트와 같은 스코프(scope)에 있는 render 함수로 컴파일되므로 프록시가 필요없음)
• 더 뛰어난 IDE 타입 추론 성능 (language 서버가 코드로부터 타입을 추론해내는데 비용이 덜 든다)

📌 syntactic-sugar는 기능은 그대로인데 읽는 사람을 위해 직관적으로 쉽게 코드를 읽을 수 있게 만든다는 것이다.

<script setup>
  import { ref } from "vue";
  
  // script에 setup을 선언하면 된다.
  console.log('Hi!');
  
  //반응형 데이터 또한 잘 작동한다.
  const message = ref("");
  
  //따로 return을 하지 않더라도 사용할 수 있다. (상용구를 줄일 수 있다)
  const msg = 'hi';
</script>


<script>
  //위의 setup을 사용했을 때 아래처럼 컴파일된다.
  export default {
  	import { ref } from "vue";
  
  	setup() {
  		console.log('Hi!');
  				
  		const message = ref("");
  
  		const msg = 'hi';
  		return{ msg, message };
  	},
  }
</script>

1-1 defineProps() & defineEmits()

defineProps()와 defineEmits() API를 <script setup>내에 선언하여 props와 emits을 사용할 수 있다.

<script setup>
  const props = defineProps({
  	foo: String
  })
  
  const emit = defineEmits(['change', 'delete'])
</script>

• defineProps와 defineEmits는 <script setup> 내부에서만 사용할 수 있는 컴파일러 매크로다. 그렇기에 import할 필요가 없으면 <script setup>이 처리될 때 컴파일 된다.
• defineProps는 props옵션과 동일한 값을 허용한다. 그리고 defineEmits는 emits 옵션과 동일한 값을 허용한다.
• defineProps와 defineEmits는 전달된 옵션을 기반으로 타입 추론을 제공한다.
• defineProps와 defineEmits에 전달된 옵션은 setup()에서 모듈 영역(module scope)으로 호스팅된다. 따라서 옵션은 setup() 영역에 선언된 지역 변수를 참조할 수 없다. 만약 그렇게 하면 컴파일 오류가 발생한다. 하지만 import된 옵션은 사용할 수 있다. 왜냐면 import도 모듈 영역으로 호스트가 되기 때문이다.

1-2 defineExpose()

<script setup>을 사용하는 컴포넌트는 기본적으로 Template Refs나 $parent와 같이 컴포넌트간 통신이 닫혀 있다. <script setup>을 사용하는 컴포넌트의 내부 데이터나 메서드를 명시적으로 노출하려면 defineExpose()컴파일러 매크로를 사용할 수 있다.

<script setup>
  import { ref } from 'vue';
  
  const a = 1
  const b = ref(2)
  
  defineExpose({
  	a,
  	b
  })
</script>

expose는 일반 < script >에서도 사용할 수 있다.

<script>
  export default{
  	setup(props, context){
  	//Expose public properties (Function)
  	console.log(context.expose)
  	}
  }
</script>

1-3 useSlots() & useAttrs()

slots과 attrs는 <template> 내부에서 $slots과 $attrs로 직접 접근해서 사용할 수 있다. 만약 <script setup> 내부에서 slots과 attrs를 사용하고 싶다면 각각 useSlots(), useAttrs() helper 메서드를 사용할 수 있다.

<script setup>
  import { useSlots, useAttrs } from 'vue'
  
  const slots = useSlots()
  const attrs = useAttrs() // fallthrough 속성 접근
</script>

slots과 attrs는 일반 <script>에서도 사용할 수 있다.

<script>
  export default{
  	setup(props, context){
  		//Attributes (Non-reactive object, equivalent to $attrs)
  		console.log(context.attrs)
  
  		//Slots (Non-reactive object, equivalent to $slots)
  		console.log(context.slots)
  	}
  }
</script>
  

1-4 < script >와 < script setup>함께 사용

<script setup>은 nomal <script>와 함께 사용할 수 있다. 예를 들면 다음과 같은 경우에 nomal <script>가 필요할 수 있다.

• 예를 들어 <script setup>에서 표현할 수 없는 inheritAttrs옵션이나 Plugin을 통해 활성화된 Custom 옵션을 사용하고자 할때 nomal <script>를 함께 선언합니다.
• named export를 선언 했을 때(예: export const data)
• 한 번만 실행되어야 하는 로직이 있을 때

<script>
  //일반 스크립트, 모듈 범위에서 한 번만 실행
  runSideEffectOnce()
  
  //옵션 선언
  export default {
  	inheritAttrs : false,
  	customOptions: {}
  }
</script>

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

1-5 Top-level await

<script setup>내의 Top-level에서 await을 사용할 수 있습니다. 그리고 코드는 async setup()이렇게 컴파일 된다.

<script setup>
  const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>