vue2, vue3 차이점 Options API VS. Composition API

아래는 vue2와 vue3의 샘플코드다.

 

vue2 샘플 코드 (Options API)

<!-- Vue2Component.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue 2!",
    };
  },
  methods: {
    changeMessage() {
      this.message = "New Message!";
    },
  },
};
</script>

<style>
/* Add your styles here */
</style>

 

vue3 샘플코드 (Composition API)

<!-- Vue3CompositionComponent.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref("Hello, Vue 3!");

    const changeMessage = () => {
      message.value = "New Message!";
    };

    return {
      message,
      changeMessage,
    };
  },
};
</script>

<style>
/* Add your styles here */
</style>

 

Options API와 Composition API 가 도대체 뭘까?

정의를 읽어봤을때 딱히 와닿는 설명들이 크게 없었다. 

그래서 차이점을 한번 정리해보자.

	Options API	Composition API
구성	객체 중심의 접근방법 data, methods, computed 등의 옵션등을 통하여 컴포넌트를 구성한다.	함수 중심의 접근.  data 옵션 대신 바로 변수를 return{}한다. methods대신 바로 함수를 선언하고 mounted 옵션 대신 onMounted()함수로 바로 표현한다.
재사용성	제한적이다. mixins	더 높은 재사용성을 보인다. composables
라이프사이클	Lifecycle hooks options object에 직접 정의된다.	Lifecycle hooks는 setup 함수의 한 부분이다.
가독성		가독성이 더 좋음

 

 

vue3 프로젝트로 구성해서 vue2 문법으로 코딩을 해왔던 나... 

지금이라도 공부해서 다시 vue3 스타일로 조금씩 바꿔보자.