What is Vue.js and VUE 3 features?
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries
Vue 3 was officially released on September 18, 2020. While it has some great new features, especially having full TypeScript support which is the same as Angular 10. New Features in Vue 3 are
- Composition API (built-in now)
- Full TypeScript support
- Portals
- Fragments
- Suspense
- Global Mounting/Configuration API change
- Multiple v-models
- Custom Directive API
- Multiple root elements (Template syntax )
- Better reactivity
- Emits Component Option
Easy integration is one important feature of VUE so that It is now easy to integrate with java frameworks such as Apache wicket, Play framework, Spring framework.. Java backend developer can be easy to understand VUE 3 so that they will improve their weakness with frontend.
Some VUE 3 details
The Composition API is introduced in Vue 3 as an alternative to the Options API in vuejs 2.x.
It would be much nicer if we could collocate code related to the same logical concern. And this is exactly what the Composition API enables us to do. To start working with the Composition API we first need a place where we can actually use it. In a Vue component, we call this place the setup.
The
setup option should be a function that accepts props and context which we will talk about later. Additionally, everything that we return from setup will be exposed to the rest of our component (computed properties, methods, lifecycle hooks and so on) as well as to the component's template. The setup method is also where all the action happens. This method gets called after beforeCreate and right before the created lifecycle hooks. Notice that setup is the only function inside our component. beforeCreate() => setup() => create()
For example:
import {defineComponent, ref, computed} from 'vue';
export default defineComponent({
name: 'HelloNewYear',
components: {},
props: {
msg: Object,
},
setup(props) {
const msg = ref('msg');
const updateMsg = (newValue) => msg.value = newValue;
return { msg, updateMsg }
}
});
Lifecycle inside setup() includes 9 lifecycles:
- onBeforeMount
- onMouted
- onBeforeUpdate
- onUpdated
- onBeforeUnmount
- onUnmount
- onActivated
- onDeactivated
- onErrorCaptured
- onRenderTracked
- onRenderTriggered
Full TypeScript support
Vue 3 has full TypeScript support. For example,
To create mixins in TypeScript, we must first create our mixin file, which contains the data we share with other components.
Create a file called MsgMixin.ts inside the mixins directory and add the following mixin, which shares the project name and a method to update the project name.
import { Component, Vue } from 'vue-property-decorator'
@Component
class MsgMixin extends Vue {
public msgName: string = 'My Message
public setMsgName(newVal: string): void {
this.msgName = newVal
}
}
export default MsgMixinMultiple root elements (template syntax )
In Vue 2, the template tag can only take one root element. In Vue 3, There is no need for a root element anymore.
We can use any number of tags directly inside the <template></template> section:
<template>
<p> Count: {{ count }} </p>
<button @click="increment"> Increment </button>
<button @click="decrement"> Decrement</button>
</template>
Equivalent code in Vue 2:
<template>
<div class="counter">
<p> Count: {{ count }} </p>
<button @click="increment"> Increment </button>
<button @click="decrement"> Decrement</button>
</div>
</template>
Suspense
Suspense is a special component that renders a fallback content instead of your component until a condition is met.
Provide / inject
In Vue 2, we used props for passing data – such as string, arrays, objects, and so on – from a parent component directly to its children component. But in many cases, we also need to pass data from the parent component to a deeply nested child component which is, not so appropriate and becoming complicated in normal cases.
Vue 3 use the new Provide and inject pair to pass data with vuex.
Teleport is a new feature that makes it easy to display a component outside its default position i.e the #app container where Vue apps are usually wrapped. You can, for example, use Teleport to display a header component outside the #app div. Please note that you can only Teleport to elements that exist outside of the Vue DOM.
Global Mounting/Configuration API Change
It has simple command as following
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')
Multiple v-Models
for example, to bind and listen to multiple properties in components:
<NameComponent
v-model:fornames="forname"
v-model:surname="surname"
/>
Understanding Vue 3 Ref for Reactive Variables
In this section, we'll learn about the ref() function in Vue 3. In Vue 3, you can use the ref() function to define a reactive variable. It can wrap any primitive or object and return it’s reactive reference. The value of passed element will be kept in a value property of the created reference. For example if you want to access value of count reference you need to explicitly ask for count.value.
