VueJS 3 ) <script setup> 과 setup() 의 차이

script setup 과 setup() 이용의 차이

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

1. script setup

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

2. setup()

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

Vue 3 공식 가이드를 보면 <script setup> 문법을 더 선호한다는 것을 확인할 수 있습니다.

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

등이 있었습니다.

---

그렇기에 기존에 <script> 방식으로 제작한 News-Web-App 을
다시 <script setup> 방식으로 변형해보았습니다.

setup(), components => X

• <script> 방식의 Item.vue

<template>
    <UserProfile/>
      <!-- 생략 -->
</template>

<script>
import UserProfile from "../components/UserProfile.vue";
import { defineComponent, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
export default defineComponent({
  components: { UserProfile },
  setup() {
    const store = useStore();
    const route = useRoute();
    onMounted(() => {
      const itemId = route.params.id;
      store.dispatch("FETCH_ITEM", itemId);
    });

    const askItem = computed(() => {
      return store.state.item;
    });

    return { askItem };
  },
});
</script>

• <script setup> 방식의 Item.vue

<template>
  <UserProfile/>
  <!-- 생략 -->
</template>
<script setup>
import UserProfile from "../components/UserProfile.vue";
import { onMounted, computed } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
const store = useStore();
const route = useRoute();
onMounted(() => {
  const itemId = route.params.id;
  store.dispatch("FETCH_ITEM", itemId);
});
const askItem = computed(() => {
  return store.state.item;
});
</script>

• export default 구문이 필요가 없어졌습니다.
  또한 setup() 함수를 정의하는 부분도 필요가 없어졌습니다.
  그러므로 return 문 또한 필요가 없습니다.

• import 한 컴포넌트를 정의하지 않고 바로 템플릿 태그에서 사용이 가능합니다.

props 사용

상위 컴포넌트로부터 받은 props 를 사용하기 위해 defineProps 를 사용해야합니다.

• <script> 방식

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

• <script setup> 방식

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

• 템플릿에서의 사용

  <div>
    {{ props.userInfo.name }}
  </div>

두 가지 방식을 실행했을 때 모두 같은 결과가 실행됩니다.