Vue 3 Why the Composition API

There are currently three limitations you may have run into when working with Vue 2:

• As your components get larger readability gets difficult.
• 구성 요소가 커질수록 가독성이 어려워집니다.
• The current code reuse patterns all come with drawbacks.
• 현재 코드 재사용 패턴에는 모두 단점이 있습니다.
• Vue 2 has limited TypeScript support out of the box.
• Vue 2는 기본적으로 TypeScript 지원이 제한되어 있습니다.

 

When to use the Composition API?

• You want optimal TypeScript support.
• 최적의 TypeScript 지원을 원합니다.
• The component is too large and needs to be organized by feature.
• 구성 요소가 너무 커서 기능별로 구성해야 합니다.
• Need to reuse code across other components.
• 다른 구성 요소에서 코드를 재사용해야 합니다.
• You & your team prefer the alternative syntax.

https://github.com/vuejs/composition-api

GitHub - vuejs/composition-api: Composition API plugin for Vue 2

 

실제 composition API 를 이용한 sample codes 

 

 

The good

• We’re writing less code, so it’s easier to pull a feature from your component into a function.
• 코드를 적게 작성하므로 구성 요소의 기능을 함수로 가져오는 것이 더 쉽습니다.
• It builds on your existing skills since you’re already familiar with functions.
• 이미 functions 에 익숙함으로 기존 기술을 기반으로 합니다.
• It’s more flexible than Mixins and Scoped Slots since they’re just functions.
• 이는 단지 function 일 뿐이므로 Mixin 및 Scoped Slots보다 더 유연합니다.
• Intellisense, autocomplete, and typings already work in your code editor.
• Intellisense, 자동 완성 및 입력은 이미 코드 편집기에서 작동합니다.