[VUE] Option API 방식과 Composition API 방식의 차이점

📌옵셔널 API (Option API)

옵셔널 API는 Vue 2에서 사용되던 기본 API 스타일로, 컴포넌트의 상태와 로직을 옵션 객체를 통해 정의합니다.

예를 들어, data, methods, computed, watch 등의 옵션을 사용하여 컴포넌트를 정의합니다.

<template>
    <div>{{ message }}</div>
    <button type="button" @click="updateMessage()">button</button>
</template>

<script>
    // Option API 방식
    export default {
        data() {
        return {
            message: 'Hello, Vue2!'
        };
        },
        methods: {
        updateMessage() {
            this.message = 'updated message!';
        }
        }
    }
</script>

 

 

✅ 장점

• 직관적이고 간단한 구조
• Vue 2와의 호환성
• 작은 프로젝트에서 적합

 

✅ 단점

• 대규모 애플리케이션에서 로직 분리가 어려울 수 있음
• 복잡한 컴포넌트에서 상태와 로직을 재사용하는 것이 불편

 

 

 

📌컴포지션 API (Composition API)

컴포지션 API는 Vue 3에서 도입된 새로운 API 스타일로, 로직을 함수로 구성하고, 이를 setup() 함수 안에서 정의합니다. ref, reactive, computed, watch와 같은 Composition API 기능을 사용하여 상태와 로직을 정의합니다.

<template>
    <div>{{ message }}</div>
    <button type="button" @click="updateMessage()">button</button>
</template>

<script>
    // Composition API 방식
    import { ref } from 'vue';

    export default {
        setup() {
            const message = ref('Hello, Vue3!');
            const updateMessage = () => {
                message.value = 'updated message!';
            };

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

 

✅ 장점

• 로직을 더 유연하고 재사용 가능하게 관리
• 복잡한 애플리케이션에서 코드가 잘 분리되고 유지보수 용이
• setup()을 사용하여 컴포지션에 필요한 모든 상태 및 메서드를 명확하게 정의 가능

 

✅ 단점

• 처음에는 다소 복잡하게 느껴질 수 있음
• Vue 2와 호환되지 않음 (Vue 3 이상에서만 사용 가능)

 

 

 

📌script setup

컴포지션 API 에서는 위와 같이 <script> 태그 안에 setup() 함수를 정의하는 방식이 아닌 <script setup>을 사용하게 되면 export default, return을 사용하지 않고 코드를 작성할 수 있어 더욱 간결합니다.

컴포넌트를 처음 가져올 때 한 번만 실행되는 일반적인 <script>와 달리, <script setup> 내부의 코드는 컴포넌트의 인스턴스가 생성될 때마다 실행합니다.

<template>
    <div>{{ message }}</div>
    <button type="button" @click="updateMessage()">button</button>
</template>

<!-- Composition API script setup 방식 -->
<script setup>
    import { ref } from 'vue';

    const message = ref('Hello, Vue3!');
    const updateMessage = () => {
        message.value = 'updated message!';
    };
</script>

 

 

 

📌결론

• 옵셔널 API :  간단하고 직관적인 코드 구조를 제공하지만, 복잡한 애플리케이션에서는 관리가 어려울 수 있습니다.
• 컴포지션 API :  더 많은 유연성과 재사용성을 제공하며, 특히 대규모 애플리케이션에서 코드의 유지보수와 확장이 용이합니다.