옵션 API , 컴포지션 API 비교

옵션 API 일때

<template lang="">
    <button @click="plus">
     플러스하기
    </button>
    <button @click="minus">
     마이너스하기
    </button>
    : {{count}}
</template>
<script>

export default {
    data(){
        return {count:0}
    },
    methods:{
        plus(){this.count++},
        minus(){this.count--}
    },
    mounted(){
        alert(`COUNT 초기값은 ${this.count}입니다.`)
    }
}
</script>
<style lang="">
    
</style>

---

컴포지션 API 일때

import해서 가져온 API함수들을 사용해 컴포넌트의 로직을 정의한다. 

SFC(Single File Component) 에서 컴포지션 API는 <script setup>과 함께 사용함.

setup은 더 적은 코드 문맥으로 컴포지션 API를 사용하게 한다.

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

const rawHtml = "raw HTML TEST지렁~";
const object = {
  name: "jay",
  age: 30,
};
// 반응적 상태 속성
const count = ref(0);

// 속성 값 변경, 업데이트
const plus = () => {
  count.value++;
};
const minus = () => {
  count.value--;
};

onMounted(() => {
  alert(`COMPOSITION API의 초기값은 ${count.value}`);
});
</script>

Vue2에서 data,methods,template,watch등이 유기적으로 동작하는데,

컴포넌트의 규모가 커지면서 가독성이 떨어지게 됨

-> Vue3에서는 Composition API를 제공하면서 setup 함수가 생기게 됨

---

ref : 반응형변수 data

methods: js 함수

onMounted, onUpdate : LifeCycle hooks

watch:  반응형변수 변경탐지

computed : wtach함수로 구현가능한 계산된 값에 사용.

 

---

setup함수 특징 : 컴포넌트 인스턴스가 생성되기전에 실행된다

-> 컴포넌트인스턴스에 접근이 필요한 기능은 사용할 수 없다.

setup안의 this를 통해 data,computed,methods에서 선언한 것들에 접근이 불가