【Vue】빠른 사용

<script setup>은

Vue v3.2부터 사용할 수 있는 문법.
요점은 다음과 같다.

SFC(Single File Component)에서 사용

일반적인 <script>보다 적은 설명으로 완성할 수 있다

서법

이전의 서법

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup(){
    console.log('hello');
  }
})
</script>

script setup 쓰기 사용

<script setup>
  console.log('hello');
</script>

이거 정말 시원하고 시원해요.defineComponent 읽을 필요도 없이 전체적인 기술량이 줄어든 것을 알 수 있다.

응용 프로그램

이렇게 하면 기술을 완전히 생략할 수 있다. "emits와props는 어디에 쓰입니까?"내 생각에도 이런 의문이 있다.

<script setup>
const props = defineProps({
  name: String
})
const emit = defineEmits(['onChange']);
</script>

에 관해서는 definePorps와defineEmits를 사용하면 OK.definePorps와defineEmits와defineComponent처럼 특별히 import할 필요가 없으며script setup내에서 기본적으로 사용할 수 있다.