Vue 3 is due for release in mid-2020. When it does arrive, it’s completely backward-compatible with Vue 2. The additional features are just that — additional and designed to improve the quality of a developer’s life and give us new and varied ways of creating our frontends.
New Features in Vue 3
- Composition API
- Full TypeScript support
- Portals
- Fragments
- Suspense
- Global Mounting/Configuration API change
- Multiple v-models
- Custom Directive API
Until the official release, you can use the Vue 3 beta found in the vue-next GitHub repository. Some of the new Vue 3 features are available as plugins for Vue 2, and I will mention these when we get there. In Vue 3, these features are built-in, which gives developers a better instant experience with Vue (those that have worked with Vue understand the little issues we deal with).
Vue is not “just another framework.” Vue is designed as an interface framework for web applications, to help you create the “view” for your application. It can be used with React and Angular, which are monolithic frameworks, to supply the UI while behind the scenes you have Angular and React doing the rest of the work.
The Composition API
The Composition API is an alternative to the current Vue Options API. It’s designed to have Typescript support in mind, as well as code reuse, maintainability, and the amalgamation of functionality by logical concern.
How does this compare to the Options API? Using the Options API in a simple component can get very messy very quickly as you have data, methods, props, components, computed values, and more. Each section could contain multiple sections of functionality — and now they are spread between the different sections of your code.
What could that look like in a data grid style component? The example below only shows the options and a list of what can — and probably would — be found in each section. If you were to write this component in full, that would be a large chunk of code.
<script>
export default {
data () {
return {
//Properties for data
//Properties for filtering
//Properties for sorting
//Properties for paging
}
},
methods: {
//Methods for data
//Methods for filtering
//Methods for sorting
//Methods for paging
},
computed: {
//Values for data
//Values for filtering
//Values for sorting
//Values for paging
}
}
</script>
As you can see, functionality for each logical segment is split between the separate options of the Options API.
#web #mobile #vue #vue 3 #programming
