EverGiver
Vue 3 본문
728x90
기존 Vue 2는 코드의 길이가 길어져 가독성이 떨어지고, 수많은 컴포넌트들이 공유하는 데이터의 상태 관리는 점차 감당이 되지 않기 시작하였다. 이러한 문제를 해결하고자 Vue 3가 출시되었다.
대표 신규 기능
- Composition API
- 말 그대로 하나의 객체를 변수와 메서드 등과 같은 특정한 옵션 기능으로 나눈 만큼, 하나의 변수와 연관된 수많은 기능들이 하나의 Single File Component에서 산포 되기 시작했고, 이는 결국 가독성을 떨어뜨리고 코드 요지 비용이 높아지는 문제점을 보이게 되었다.
- Vue 3의 가장 대표적인 기능인 컴포지션 API로 컴포넌트를 작성할 때 함수 기반의 방법을 제시한다. - Suspense
- Suspense는 컴포넌트가 데이터를 받아오기 전까지 기본 컨텐츠를 표시할 수 있는 기능
- 예를 들면, SNS에서 데이터를 불러올 때 로딩의 속도차이를 고려해 스켈레톤이라 불리는 UI를 먼저 띄우고, 데이터 로딩이 완료되면 실제 화면을 띄우는 것이다.
- 기존 Vue 2까지 이러한 구현을 위해 v-if와 같은 디렉티브를 이용하곤 했지만 Vue 3의 Suspense는 비동기적 컴포넌트의 로딩이 완료될 때까지 대체 컴포넌트를 그리는 방법을 제시했다.
<body>
<div id="app">{{msg}}</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data(){
return {
msg: '안녕하세요!'
}
}
}).mount('#app')
</script>
</body>728x90
'Front-End (웹) > VueJS' 카테고리의 다른 글
| Single File Component (0) | 2022.03.08 |
|---|---|
| Vue 3 Component (0) | 2022.03.03 |
| Vue 2 Template (0) | 2022.02.21 |
| Vue 2 Instance (0) | 2022.02.21 |
| Vue의 이해 (0) | 2022.02.20 |
'Front-End (웹)/VueJS' Related Articles
more
Comments