vue3 - 0.주요 특징

Vue3의 새로운 기능

Composition API

• 재사용성, 구성과 가독성을 향상시켜준다
• setup()

Multiple Root Element

• 하나의 컴포넌트 안에서 여러개의 root element를 가질 수 있다.
  •  
  • <template> <div> <p>Hello, World</p> </div> <div> <p>Hello, World!!</p> </div> </template>

Teleport Component

• 특정 컴포넌트를 DOM의 다른 위치에 렌더링 시켜준다. (React에서 Portal)
• modal에서 사용하기 좋음

• <!-- App.vue -->
  <teleport to=".modal"> <!-- #app style 영향을 안받는다 -->
    <modal>
      <template v-slot:header><h1>haha header</h1></template>
      <template v-slot:content>this is content</template>
    </modal>
  </teleport>

Suspense Component

• 비동기 컴포넌트를 다루기위해 사용
• 데이터 로딩이 끝날때까지 spinner와 같은 fallback component를 보여주는데 사용하기 좋음

Typescript Support

• Vue application에서 Typescript를 쓸수있다. (Vue2에서는 어려웠음)

 

Vue3 시작하기

1. node 설치
2. vue/cli 설치
   •  
   • npm install -g @vue/cli​
3. 프로젝트 생성

   • vue create 프로젝트명​
     
     //Manually select features
     //Choose Vue Version, Babel
     // 3.x
     //N