vue3가 vue의 정식 버전이 되었습니다.
vue3에서 달라진 점을 알아보겠습니다.

1.Composition API

Composition API는 복잡도가 높은 컴포넌트에서
함수와 데이터의 추적이나 재사용을 더 쉽게 하기 위해 나왔습니다.

기존에 Options API에서 사용하던 methods, computed, data 등의 api가
ref(), reactive(), onMounted(), onUnmounted(), provide(), inject() 등의 API로 변경되었습니다.
위 API를 포괄하는 세트를 Composition API라고 합니다.

둘의 차이를 이미지로 보면 데이터나 함수, 타컴포넌트와의 연결등이 파편화되어 있어
전체적인 구조를 파악하기 힘들다는것을 알 수 있습니다.

Options API(Vue2)

<template>
    <div>
        <input type="text" v-model="num1"> + <input type="text" v-model="num2">
        <button type="button" @click="getResult">Click</button>
        <p>
            {{ result }}
        </p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                num1 : 0,
                num2 : 0,
                result : 0
            }
        },
        methods : {
            getResult() {
                this.result =  parseInt(this.num1) + parseInt(this.num2);
            }
        }
    };
</script>

데이터가 얼마 없는 간단한 컴포넌트이지만,
데이터나 함수가 훨씬 더 많았다면 복잡도는 훨씬 높아지게 됩니다.
그에 따라 어떤 데이터가 어떤 함수에서 사용하는지 추적이 어렵습니다.
추가로 위 예제에서는 반응성이라는걸 감안하지 않고
data로 선언된 값들의 변경을 실시간으로 확인할 수 있었습니다.
그러나 composition API에서는 반응성을 위해 사용하는 API가 존재합니다.

Composition API – ref (Vue3)

<template>
    <div>
        <input type="text" v-model="numbers.num1"> + <input type="text" v-model="numbers.num2">
        <button type="button" @click="getResult">Click</button>
        <p>
            {{ numbers.result }}
        </p>
    </div>
</template>
<script>
    import { ref } from 'vue';

    export default {
        setup() {
            const numbers = ref({
                num1 : 0,
                num2 : 0,
                result : 0
            });

            function getResult() {
                numbers.value.result = parseInt(numbers.value.num1) + parseInt(numbers.value.num2);
            }

            return {
                numbers,
                getResult
            }
        }
    };
</script>

처음 보이는 함수인 setup 함수는 API 사용을 위한 진입점입니다.
vue 라이프사이클중 beforeCreate()와 created()가 setup()에 해당 됩니다.
setup 함수는 props과 context를 매개변수로 받을 수 있습니다.
mounted(), updated()와 같은 라이프사이클은 onMounted(), onUpdated() 함수로
정의하여 사용할 수 있습니다.
ref API 데이터의 반응성을 주입하기 위해 사용합니다.
데이터가 변할때마다 바로 컴포넌트에 적용됩니다.
ref를 사용할시 가장 주의해야 할 점은 .value로 접근해야 한다는 것입니다.
기존 vue2 소스코드에서 ref로 데이터를 선언하고 함수를 선언한 뒤 리턴을 하면 끝이 납니다.

Composition API – reactive (Vue3)

<template>
    <div>
        <input type="text" v-model="numbers.num1"> + <input type="text" v-model="numbers.num2">
        <p>
            {{ numbers.result }}
        </p>
    </div>
</template>
<script>
    import { reactive, computed } from 'vue';

    export default {
        setup() {
            const numbers = reactive({
                num1 : 0,
                num2 : 0,
                result : computed(() => parseInt(numbers.num1) + parseInt(numbers.num2))
            });

            return {
                numbers
            }
        }
    };
</script>

ref와 비슷한 용법으로 쓰이는 reactive 입니다.
역시 반응성을 주입할때 쓰입니다.
ref와 크게 다른점은 computed 함수를 이용해 계산식을 사용할 수 있다는 점과
무조건 object 형태로 선언되어야 한다는 점입니다.