FE CONF 2021의 네이버 FE 개발자 장기효님의 발표에서 소개된 Vue 3 특징을 정리함
https://joshua1988.github.io/web-development/vuejs/vue3-as-default/
- 컴포넌트 재사용을 도와주는 라이브러리
- https://v3.ko.vuejs.org/api/composition-api.html
- 관심사 분리
- setup() 메소드를 작성하여 컴포넌트 생성(created) 전에 실행되어 미리 준비할 내용들을 마련함
- props, context 파라미터를 받을 수 있고, this는 사용 불가함
- context.attrs, context.slots, context.emit
- ref()나 reactive() 함수를 이용하여 template에서 변수 참조를 할 수 있도록 준비하고, 참조할 수 있는 변수를 return해야 함
- data, computed, methods는 접근 불가함
- React의 Portal 기능과 유사함
- 부모 컴포넌트의 DOM 바깥의 DOM 노드로 자식 컴포넌트를 렌더링하는 방법
- 공통 컴포넌트를 자식 컴퍼넌트로 렌더링해서 사용하는 방법
- https://v3.ko.vuejs.org/guide/teleport.html
- 모달 형태의 대화창, 호버카드, 툴팁 같은 요소를 시각적으로 튀어나오도록 해야 함. Vue2에서는 사용하기 어려웠음
- app 내부로 들어가서 레이아웃이나 스타일의 영향을 받지 않게 만듬
- 렌더링되는 위치와 정의하는 위치를 분리함
- /src/teleport/VModal.vue
<div id="app">과 동일한 레벨로 <div id="teleport-area">를 지정할 수 있음<teleport to="#teleport-area">을 이용해서 부모 컴퍼넌트의 DOM 바깥으로 보낼 수 있음
- Vuetify, Vuetable, Vue-datepicker, Vue-lazyload, Vue-Chart 모두 Vue 3에서 지원되진 않음
- IE 지원 x
- 아직 Vue 2를 사용하는 게 바람직함
- 문법적으로 큰 변화는 없음
- 실무자 입장에서는 Vue 2에 composition API와 typescript를 도입해서 사용해볼 것을 추천