setup() 과 script setup의 차이

 

인터넷에 검색해보면 여러가지 글이 많이 나오고, 결론적으로 상위로부터 전달 받은 props들을 사용 할 때 보통의 경우 export default를 명시하여주고 어떤 내보내는지 이런거에 대한 명시가 필요한데 그 부분들을 편하게 사용 할 수 있도록 줄인것 같다.

간단하게 전달받은 props를 사용하는 모습만 봐도 편리함이나 구분에서 차이가 보여진다.

기존 export default를 사용하는 경우

export default {
	props:{
		userInfo: {
			type:Object
		}
	}
}

scrpit setup 내부에서 사용 하는 경우

import {defineProps} from "vue";
const props = defineProps({
	userInfo: {
		type: Object
	}
});

참고주소

[VueJS] Vue3 - setup() 과 <script setup>의 차이

[VueJS] Vue3 - setup() 과 <script setup>의 차이

해당 setup안에서 사용할때 명명하는 방법이 더 직관적으로 바뀐다.

• **created()**는 Vue 3에서 **onCreated()**로 바뀌었습니다.
• **mounted()**는 Vue 3에서 **onMounted()**로 바뀌었습니다.
• **updated()**는 Vue 3에서 **onUpdated()**로 바뀌었습니다.
• **beforeDestroy()**는 Vue 3에서 **onBeforeUnmount()**로 바뀌었습니다.

공식문서에서 사용을 권장하는 이유

공식문서에서 다루고 있는 <script setup>의 장점에는 다음이 있다.

• 더 적은 상용구로 더 간결한 코드 작성
• 타입 스크립트를 사용해 props와 emmited value 선언 가능
• 런타임 성능의 향상 (템플릿이 <script setup>과 같은 스코프에 있는 render 함수로 컴파일되므로 프록시가 필요 없다.)
• 더 뛰어난 IDE 타입 추론 성능 (language server가 코드로부터 타입을 추론해내는데 비용이 덜 든다.)

공식문서 주소

<script setup> | Vue.js

Vue.js

변경 예시코드

변경전

<script>
// @ is an alias to /src
import defaultAxios from '@/api/defaultAxios';

export default {
  name: 'AboutDetail',
  data() {
    return {
      asks: []
    }
  },
  mounted() {
    defaultAxios.api.test1()
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });

    defaultAxios.api.test2()
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });
  },
}
</script>

script setup 변경 후

<script setup>
import defaultAxios from '@/api/defaultAxios';
import { ref, onMounted } from 'vue';
const asks = ref([]);

  onMounted(() =>{
    defaultAxios.api.test1()
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });

    defaultAxios.api.test2()
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        })
  })

</script>