vue3 <script> vs <script setup> 차이

1. <script>는 기존 방법 export default를 사용하여 컴포넌트를 정의합니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
};
</script>

2. Vue 3에서 도입된 <script setup>은 컴포넌트를 더 간결하고 직관적으로 작성할 수 있게 해주는 문법, 이 방법은 컴포넌트 내의 스크립트를 setup 함수 안에 있는 것처럼 처리하여 코드가 더 짧아지고, 컴포넌트의 상태와 메소드를 직접 정의할 수 있습니다.

<template>
  <div>{{ message }}</div>
</template>

**<script setup>**
import { ref } from 'vue';

const message = ref('Hello Vue 3');

function greet() {
  console.log(message.value);
}
</script>

반응형 상태 관리:

• <script>: data 함수 안에서 상태를 정의하고, this 키워드를 사용하여 접근합니다.
• <script setup>: ref와 reactive를 사용하여 반응형 상태를 직접 정의합니다. this를 사용하지 않습니다.

코드 길이:

• <script>: 보일러플레이트 코드가 더 많습니다.
• <script setup>: 더 짧고 간결하게 작성할 수 있습니다.

변수 접근:

• <script>: this를 통해 상태와 메소드에 접근합니다.
• <script setup>: 정의한 변수에 직접 접근합니다.