FE CONF 2021의 네이버 FE 개발자 장기효님의 발표에서 소개된 Vue 3 특징을 정리함
https://joshua1988.github.io/web-development/vuejs/vue3-as-default/

TypeScript 지원 강화

• https://v3.ko.vuejs.org/guide/typescript-support.html#recommended-configuration
• tsconfig.json 지정
• vue add typesript

composition API

• 컴포넌트 재사용을 도와주는 라이브러리
• 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는 접근 불가함

fragments

• 다중 루트 노드
• https://v3.ko.vuejs.org/guide/migration/fragments.html
• 컴포넌트는 <template> 요소 안에 단 하나의 요소만을 가질 수 있었음
• 여러 노드를 포함할 수 있게 되었음
  • v-bind 속성 지정 필수
  • <main v-bind="$attrs">

teleport

• 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 바깥으로 보낼 수 있음

suspense

• 일정 조건이 만족되기 전까지는 구성요소를 노출하고 싶지 않을 때 사용
• https://v3.ko.vuejs.org/guide/migration/suspense.html
• <template #default>와 <template #fallback>을 이용하여 준비되기 전까지는 fallback 컨텐츠를 노출하다가 준비되면 default 컨텐츠를 노출함

multi v-model

• v-model을 여러 개 사용할 수 있음
• https://v3.ko.vuejs.org/guide/component-custom-events.html#다중-v-model-바인딩
• <my-component v-model="age" v-mode="name"></my-component>

문제점

• Vuetify, Vuetable, Vue-datepicker, Vue-lazyload, Vue-Chart 모두 Vue 3에서 지원되진 않음
• IE 지원 x

발표자 의견

• 아직 Vue 2를 사용하는 게 바람직함
• 문법적으로 큰 변화는 없음
• 실무자 입장에서는 Vue 2에 composition API와 typescript를 도입해서 사용해볼 것을 추천