vue 3 특징
2023-01-30
Vue는 페이스북의 React, 구글의 Angular와 더불어 대표적인 Single Page Application 프레임워크 입니다.
다른 프레임워크나 라이블러리에 비해 학습 곡선이 낮아 누구나 쉽고 빠르게 배울수 있는 프레임워크 입니다.
Evan You 라는 개발자에 의해 2014년에 발표가 되었습니다.
발표된 이후로 현재까지 꾸준히 릴리즈 되고 있습니다.
Vue 2.0은 2016년에 Ghost in the Shell 이라는 코드명으로, 2.6 2019년에 Macross 라는 코드명으로 그리고 3.0은 2020년 9월 19일에 One Piece라는 코드명으로 공개되었습니다.
기존 버전보다 성능이 개선되었고, 여러가지 기능이 업데이트 되었습니다.
Composition API 를 기본적으로 지원
주목할 부분 첫 번째는 Composition API 를 기본적으로 지원한다는 점입니다.
기존의 2.0 버전에서는 컴포넌트의 옵션을 Data, Computed, Methods, 그리고 Watch로 구분하였습니다.
전체적인 코드를 이해하기 어렵고 가독성이 떨어질 수 있었습니다.
이러한 문제를 해결하기 위해 등장하였습니다.
기존에 분산되어 담당했던 기능들을 Setup이라는 메서드 한 곳으로 모으는 것 입니다.
여러 코드를 서로의 관련성과 관심사에 따라 배치하여, 코드를 더 이해하기 쉽게 하는 것입니다.
Lifecycle의 변화
두 번째 주목할만한 변화는 Lifecycle의 변화입니다.
이전에는 Created, Mounted, Updated 등과 같은 메서드를 사용하였습니다.
이 메서드들이 Composition API 의 Setup 메서드 안으로 들어가면서 명칭 등이 다소 바뀌었습니다.
setup(porps) {
// created setup 메서드 안에서 실행하도록 바뀌었고,
state.tab = "first";
// mounted 는 onMounted로
onMounted(() => {
init();
});
// updated 는 onUpdated로
onUpdated(() => {
})
}
위치와 이름이 조금 바뀌었을 뿐 기능의 차이는 크게 없다고 보시면 됩니다.
이 외에도 BeforeUnmount, Unmounted 등의 내용이 바뀌었는데, 자세한 내용은 검색하시면 될 것 같습니다.
루트 엘리먼트를 여러개 가질수 있음
다음으로 주목할만한 변화 세번째는 템플릿을 생성할 때 루트 엘리먼트를 여러개 가질수 있다는 점입니다.
<template>
<h1>Title</h1>
<div>Content</div>
</template>
이전에는 하나만 가질수 있었습니다.
vue 3.0 부터는 템플릿 안에 여러개의 루트 엘리먼트를 만들 수 있습니다.
인터넷 익스플로러를 지원하지 않음
더 이상 인터넷 익스플로러를 지원하지 않기 때문에, 꼭 지원하려고 하신다면 이전 버전을 사용하셔야 합니다.