Vue3로 업데이트 되면서 어떤 부분이 변화했을까?

목차

· 성능 개선

· Composition API

· Fragments

· Global API

· 라이프 사이클의 변화

· 익스플로러 미지원

---

성능 개선

Vue3는 V-DOM과 렌더링 성능을 개선하였으며 스캐폴딩을 통해 어플리케이션을 생성 시에 기본적으로 Vite를 사용하여 빠른 렌더링 속도를 제공한다.

Composition API

Vue2와 Vue3의 가장 큰 변경점이라고 한다면, 바로 Composition API가 도입된 것이다. 이로 인해 스크립트 영역의 소스 코드 영역이 크게 변하게 되었다. Composition API는 Vue2에서도 플러그인과 같은 확장 기능으로 도입하는 것이 가능하기는하지만, Vue2에서 기본적으로 Options API를 이용하는 경우가 많다. Options API에서는 Component의 옵션을 Data, Methods, Computed, Watch로 구분하여 각 특징에 따라 구분되어 있어 프로젝트 초반에 직관적으로 사용할 수 있다. 오브젝트 속성으로 데이터 또는 메소드 등의 역할마다 정리하여 명시적으로 기재를 한다.

<script>
export default {
	data: () => ({
    	count: 0,
    })
    methods: {
    	increment() {
        	this.count++;
        },
        decrement() {
        	this.count--;
        }
    }
}
</script>

개인적으로는 위의 코드와 같이 명시적으로 보여주는 경우가 코드가 길어지더라도 영역 별로 구분을 지어 가독성 측면에서 보기 좋다고 생각을 하는데, Composition API를 사용하게 되면 구분 별 영역은 사라지고 일반적으로 사용하는 스크립트 형태에서 자유롭게 데이터를 전달하고, 수정할 수 있다. Composition API로 구성된 아래 코드를 살펴보면 코드 별 차이점을 확인할 수 있다.

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

const count = ref(0);
const increment = () => count.value++;
const decrement = () => count.value--;
</script>

Options API로 구성된 코드에서 Composition API로 구성된 코드로 확인을 해보면, 같은 기능을 바라보는 코드인데도 확연하게 코드의 양이 줄어든 것을 확인할 수 있다. <script setup>과 ref()를 통해 반응형을 구현하고, 영역 별로 데이터 또는 메소드 등을 나눠놓는 행위를 Vue3에서는 찾아보기 힘들다. 

Fragments

Vue2에서는 컴포넌트의 루트 요소가 1개일 필요가 있었다, 하지만 프래그먼트의 개념이 나오면서 굳이 명시를 하지 않아도 코드 내부적으로는 프래그먼트로 자동으로 래핑이 되는 형식으로 업데이트가 되었다. 물론, 프래그먼트를 명시해줘도 된다.

/** Vue2 */
<template>
	<div>
    	<p>...</p>
        <p>...</p>
    </div>
</template>

/** Vue3 */
<template>
	<p>...</p>
    <p>...</p>
</template>

 Global API

Vue 인스턴스의 생성 방법이 글로벌 API를 사용하는 방법으로 변경이 되었으며, CDN을 이용하는 경우와 그 외 Vue2에서 글로벌 API로서 정의되어있던 것들이 Vue3 부터는 인스턴스 API로 정의가 되어진다.

/** Vue2 */
new Vue({
	el: "#app",
    ...
})

/** Vue3 */
Vue.createApp({
	...
}).mount("#app")

라이프 사이클의 변화

Vue2에서는 Created, Mounted, Updated 등의 메서드를 사용했다. 하지만 이 메서드들이 Composition API의 Setup 메서드 안으로 들어가면서 명칭이나 과정 등이 많이 바뀌었다. Data, Method와 같은 게층 구조에서 선언하도록 되어있지만, Vue3는 setup() 안에 모두 넣어 관리한다.

/** Vue2 */
export default {
	mounted () {
    	...
    }
    data () {
    	return {
        	userName: '',
            password: ''
        }
    },
    method: {
    	...
    }
}

/** Vue3 */
export default {
	props: {
    	title: String,
    },
    
    setup() {
    	onBeforeMount(() => {
        	...
        })
        onMounted(() => {
        	...
        })
    }
}

익스플로러 미지원

Vue2는 익스플로러 지원을 했지만, Vue3로 버전 업데이트가 되면서 익스플로러 지원을 하지 않는다.

---

레퍼런스

Vue2와 Vue3의 차이

Vue2, Vue3 차이점

[Vue.js] vuex 를 이제 안쓴다고?(Pinia) vue2, vue3 차이점