Vue is a web application interface framework that may be used to build the "view" of a program. It may be utilized with monolithic frameworks like React and Angular to provide the user interface while those other two take care of the heavy lifting.
According to the usual update, Vue 3 is more stable, smaller, and more manageable, and it's also easier to target native. Furthermore, Vue3 has several notable additions. Let's break it down and talk about it.
The Composition API
As an alternative to the standard Vue Options API, Composition was developed. It was created using Typescript's compatibility, as well as other design goals including reusability, low maintenance, and the grouping of features by logical concern.
If you're familiar with the Options API, how does this feature stack up? When implementing the Options API in a relatively straightforward component, things may rapidly become unwieldy due to the presence of several moving parts, including data, methods, props, components, calculated values, and more. Some of your functionality may have been broken up over many separate parts of your code.
How would something manifest itself in a grid-based representation? This sample just demonstrates the possibilities and a list of what may be included in each subheading. This would be a big bit of code if you were to develop it from scratch.
<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>
You can see how the many choices of the Options API cover the varying needs of each logical section.
By using the Composition API, we can make this more readable and easy to update. In an example script where an integer is being multiplied by two, the setup technique is introduced and explained as follows.
<script>
import { ref } from "@vue/composition-api"
export default {
setup () {
const theNumber = ref(1)
function doubleTheNumber () {
theNumber.value = parseInt(theNumber.value) * 2
}
return {
theNumber,
doubleTheNumber
}
}
}
</script>
Does this imply you'll be forced to use a single, cumbersome procedure to configure all of your parts? Absolutely not. Composition functions may be used elsewhere (in other files) to keep your installation procedure from becoming too large. The benefits of programming modularity and reusability are greatly enhanced in this scenario. Any number of parts may make use of the composition function.
Full TypeScript Support
Version 3 of Vue has complete TypeScript compatibility. TypeScript was flexible enough to be crammed into a Vue 2 app. The setup wasn't ideal and often seemed slapped together. TypeScript is used for the development of Vue 3, which has auto-generated type definitions and a compatible API in both TypeScript and JavaScript.
Portals
The idea of a portal is unique to the React framework. Simply said, a Portal's job is to make something appear somewhere other than where it was stated. When working with Vue 3, a Portal may be used to render a component, or a portion of a component, somewhere in the DOM tree.
Modals, alerts, pop-ups, and so on may all benefit from the use of portals. You want certain components to stand out from the rest of the page and be shown at the top. You can avoid illogical z-indexing, unexpected placement of components, and other CSS messes using Portals.
You will need an Id-containing tag in order to include a Portal into your application. Put the modal's of-containing div> just before the end of your HTML body.
The code reads as follows:
Unfortunately, this app requires JavaScript in order to function. If possible, let it keep going.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<div id="modal"></div>
<!-- built files will be auto injected -->
</body>
</html>
Fragments
The idea of Fragments, also known as "Multiple Root Nodes," is another contribution by React. One root element per component is the limit in Vue 2. Fragments solve this problem by letting you utilize many root nodes inside a single component.
Having many root nodes is as easy as it sounds. One caveat, however, is that if you wish to utilize attribute inheritance, you'll need to designate which of the root components should take on the attributes of the parent component.
The structure of this document looks like this:
<template>
<ComponentOne />
<ComponentTwo v-bind="$attrs"/>
<ComponentThree />
</template>
Multiple root nodes are supported out of the box with Vue 3, so there's no learning curve to worry about.
Suspense
When a condition is not satisfied, the suspense component will display a fallback instead of your component.
As a developer, you may recall the many times you've created components using v-if="!isLoading" on the root element and v-else on the second element to render while content loads, such as from an API or other asynchronous request.
The genre of Suspense was created specifically for this purpose. A much more elegant syntax is shown in the following sample template than in the v-if variant.
<Suspense>
<template #default>
<MyData />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
When your component has to be loaded (as opposed to when it already was), how does it know this? The aforementioned setup procedure and the Composition API both have this functionality. Setting up an async setup method triggers Suspense, which displays the fallback once the initialization phase completes.
The following code sample illustrates how the fallback would work until the getMyData request is finished.
export default {
async setup () {
const data = await getMyData()
return { data }
}
}
Because of this function, the amount of repetitive code needed to make calls to the outside world is much reduced, and in a very beautiful way.
Global Mounting and Configuration
The process of declaring and mounting an instance of your Vue application has changed significantly from using a single global instance to doing so in many places.
CURRENT:
Here are several syntax examples, both old and new, that can be found in the RFC repository of vuejs.
import Vue from 'vue'
import App from './App.vue'
Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)
new Vue({
render: h => h(App)
}).$mount('#app')
NEW
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)
app.mount('#app')
Is the creation of new applications now feasible? Maybe. However, it is evident that there is not a single case, and that much more may be accomplished using the new method.
Multiple v-Models
The term "v-model" will be instantly recognizable to anybody who has used Vue. It's an instruction for making a component capable of bidirectional binding. To edit a reactive property from inside, you may use this. However, sending in value and listening for the input event are both possible without using the v-model.
So, what exactly does it mean to have "many v-models"? There may have been times when you needed to bind and listen to more than one property in a component. The Name component, for instance, may include the options "Forename" and "Surname" as its values. Multiple v-models come into play when you need a v-model for each of those values.
<NameComponent
v-model:fornames="forname"
v-model:surname="surname"
/>
Do you find this new syntax to be simple? It is, and from this point forward you may give your v-models proper titles.
Custom Directive API
You should already be familiar with the concept of a directive from your time spent using Vue. In discussing the v-model, we have shown one of the most important of the predefined directives. V-show is only one example; there are many more.
Vue 2 allows you to create your own directives. In Vue 3, however, there will be alterations. The mystery is in the why. As it is, the Directive API does not conform to the standard Vue lifecycle since it has its own set of lifecycle methods. Unbind, Insert, Update, and the ComponentUpdated all fall under the "bind" category.
Vue 3 aligns these methods with the typical Vue lifecycle, so you now have access to beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted. This will make developing your app much simpler to remember. You won't have to waste time guessing which technique you need or attempting to keep track of two distinct lifetimes.
Vue Framework's Promising Future
Vue 3 is now available for public use, so there's no time like the present to get started. We are able to build speedier and more efficient systems using its new features. There are more opportunities for you to develop apps, and overall quality of life has improved, all of which contribute to our success in the field.
A key point to keep in mind is that Vue 3 is compatible with earlier versions (with some minor code changes). It doesn't replace the current method of doing things, but rather supplements it with other options.
