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

Vue3에서의 Composition API와 setup

Vue3의 등장 예고와 함께 사용되어진 Composition API, Vue2.7 버전 미만을 사용할 경우에는 따로 플러그인을 설치해서 사용할 수 있으며, Vue2.7 이상부터는 Vue3처럼 Composition API를 사용할 수 있다.

이 Composition API의 등장과 함께 setup 함수가 등장하였다.

이 setup함수를 사용하여 반응형 데이터를 만들고, 라이프 사이클을 제어하는 등 Vue2 버전에서부터 사용되어 왔던 optioins api에서 사용했던 그 모든것을 Composition API에서는 setup함수 안에서 처리해준다.

그런데 여기서 공식문서를 살펴보면 Composition API의 setup함수가 있고, <script setup>이 존재한다.

둘다 setup임에는 분명한데 무슨 차이가 있는지 한번 살펴보자.

setup()

<!-- MyBook.vue -->
<template>
  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
  <button @click="incresement">incresement</button>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  props: {
    collectionName: String,
  },
  setup(props) {
    const readersNumber = ref(0);
    const book = reactive({ title: "Vue 3 Guide" });
    const incresement = () => {
      readersNumber.value += 1;
    };
    // expose to template
    return {
      readersNumber,
      book,
      incresement,
    };
  },
};
</script>

setup()은 props를 사용하고, 반응형을 주입하는 ref, reactive를 사용한 변수를 가지고 return을 해 template에서 사용하는 방식이다. (더 자세한 건 공식문서를 확인해보도록 하자.)

이제 이 코드가 <script setup>을 사용하면 어떻게 변하는지 확인해보자.

<script setup>

공식문서에서도 SFC와 Composition API를 사용하는 경우 <script setup>을 사용하라고 권장하고 있다.

자 그럼 대충 설명을 보았으니 위 코드와 뭐가 다른지 확인해보자.

<!-- MyBook.vue -->
<template>
  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
  <button @click="incresement">incresement</button>
</template>

<script setup>
  import { ref, reactive } from "vue";
  const props = defineProps({
    collectionName: String,
  });

  const readersNumber = ref(0);
  const book = reactive({ title: "Vue 3 Guide" });
  const incresement = () => {
    readersNumber.value += 1;
  };
</script>

딱 그냥 보기만 해도 코드가 깔끔해진 것을 느낄 수 있는데, setup()과 다른 점은 props를 선언하는 부분이 달라졌으며, return 하는 부분이 사라졌다는 것이다.

심지어 위 예제에서는 다루고 있지 않지만 import를 한 것을 그대로 return 없이 사용할 수도 있다는 게 큰 장점이다.

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