script setup VS setup() 차이

Composition API 를 기반으로 Vue 3 프로젝트를 진행하는 방법에는 아래의 두 가지 방식이 있음

1.script setup 방식

<script setup>
   //...
 </script>

2.setup() 방식

<script>
   export default{
       setup(){
           //...    
       }
   }
 </script>

script setup 방식 선호 이유

1. 더 적은 상용구로 더 간결한 코드 작성 가능
2. 순수 TypeScript 를 사용해 props 및 emit 이벤트를 선언하는 기능
3. 더 뛰어난 런타임 성능 ( 템플릿은 중간 프록시 없이 동일한 범위의 렌더 함수로 컴파일됨 )
4. 더 뛰어난 IDE 유형의 타입 추론 성능 ( 언어 서버가 코드에서 유형을 추출하는 작업 감소 )