[Vue3] 2와 3의 script 문법 차이점

vue2와 vue3에서 script 문법 차이를 정리하는 글~!

다만, 실무하면서 처음 접하는 거라 많이 부족한 점이 많으니 성장하면서 살을 붙여나가겠습니다.

template 공통

<template>
  <div>
    <button @click="openModalConfirm">ModalConfirm 열기</button>
    <button @click="openModalBottomClose">ModalBottomClose 열기</button>

    <ModalConfirm v-if="isModalConfirmOpen" @close="isModalConfirmOpen = false" />
    <ModalBottomClose v-if="isModalBottomCloseOpen" @close="isModalBottomCloseOpen = false" />
  </div>
</template>

vue2

<script>
import ModalConfirm from './ModalConfirm.vue'
import ModalBottomClose from './ModalBottomClose.vue'

export default {
  components: {
    ModalConfirm,
    ModalBottomClose
  },
  data() {
    return {
      isModalConfirmOpen: false,
      isModalBottomCloseOpen: false
    }
  },
  methods: {
    openModalConfirm() {
      this.isModalConfirmOpen = true;
      this.isModalBottomCloseOpen = false;
    },
    openModalBottomClose() {
      this.isModalConfirmOpen = false;
      this.isModalBottomCloseOpen = true;
    }
  }
}
</script>

1. export default {} 안에서 스크립트를 작성한다.

2. 전체적으로 구조가 나뉘어져 있다.
   보통 크게 setup()과 computed, methods...등등으로 나뉘어서 사용하는 편이다.

3. this를 사용한다.

4. 스크립트 끝에 return을 사용해서 function, state, router 등을 반환시켜준다.

vue3

<script setup>
import { ref } from 'vue';
import ModalConfirm from './ModalConfirm.vue'
import ModalBottomClose from './ModalBottomClose.vue'

const isModalConfirmOpen = ref(false);
const isModalBottomCloseOpen = ref(false);

const openModalConfirm = () => {
  isModalConfirmOpen.value = true;
  isModalBottomCloseOpen.value = false;
}

const openModalBottomClose = () => {
  isModalConfirmOpen.value = false;
  isModalBottomCloseOpen.value = true;
}
</script>

1. script 태그에 setup을 붙여서 사용한다.
   이는 vue2에서 setup()을 작성안하고 간결하게 만들어 준다.

2. export default {} 없이 사용할 수 있다.

3. this를 사용하지 않고, variable.value로 사용한다.
   (this.isModalConfirmOpen == isModalConfirmOpen.value)

4. function, state, router에 대한 별도의 return 문을 작성하지 않아도 된다.

정리하며...🤔

vue2는 vuex 상태관리 라이브러리 같이 특정 구역 안에서 작성해야해서 코드가 많아지고 길어지면 왔다갔다 찾기가 점점 어려워지는 구조지만 vue3은 보다 자유롭게 선언할 수 있어서 조금 더 편리하다는 느낌이다.

그리고 react를 먼저 접한 나로써는 확실히 vue3 문법이 react와 유사해서 조금 더 내적 친밀감이 생기기도 했고...ㅎㅎ

위 내용 말고도 굉장히 많은 차이점이 있을텐데 차근차근 발견하면서 재미를 느껴가고 싶다~!