Vue is a progressively Javascript Framework to build UI and single page apps. It is an open-source Model-View-View Model (MVVM) framework. The core framework is basically focused on the view layer and it can be easily integrated with other libraries and projects too. Using modern tools and libraries, Single page apps can be easily handled. Vuejs 3.0 has been officially launched and planned to upgrade to Javascript framework which is used to build web user interfaces. Vuejs 3.0 is smaller, faster, more maintainable, equipped with better TypeScript support, and easier to target native. Let us see what’s new in Vuejs 3.0?
In the last few years, there has been changes in vuejs development. Also, the community has grown from a small upstart to a full-fledged SPA library. With this new version, the team has added few supports to augment the library, simplify coding on Vue and adopt modern techniques of web development. Let’s have a look at new features of Vuejs 3.0.
It is one of the greatest features in Vuejs 3.0. It has added a set of function-based APIs called as Composition API. These APIs are added to address the issues in Vue 2. Composition API has was launched as a plugin however in Vuejs 3.0 it doesn’t have to be installed like a plug in like previous. Now, it is in-built into the package and can be used without any extra setup. One main reason of formulating Composition API is to improve quality of code by allowing decouple features of logic.
In vue 2 where developers depends on extending the object and then share logic, vue 3 enables the sharing feature through standard Javascript/Typescript patterns rather than inventing new. It helps to see the features as they were added. Also, the Composition API makes it easy for types to infer, which supports the typescript in a better way. Vue 3.0 allows the component building and new API to co-exist with options API, without replacing it. Composition API provides flexible code organization and logic reuse capabilities with other improvements. Codes are easy to ready and organized better when written with Composition API.
In Vue 2, template tag can only take one root element. Though we had just two <p> tags, we had to enclose them within a <div> tag to work it. So, we had to change the CSS code and in the parent component so as to looked as expected. In Vue 3, this restriction is removed. Now, there is need for a root element. You 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>
With the new Composition API, the internal functions are used as expected in JavaScript which takes into consideration much better TypeScript support. This results in better type inference with bindings returned from setup with props declaration used to infer types. TypeScript definitions benefit JavaScript users largely, making the Component code by TypeScript and Javascript look identical. The typescript helps in upgrading the maintainability of the Vue codebase and makes it simpler for developers to contribute. It is a frequent choice for large projects due to its popularity. Vuejs 3 internals in TypeScript assists to benefit completely from Vue’s TypeScript with the standard code support available in modern IDEs like Visual Studio Code or WebStorm. Since TypeScript’s Vue code is 90% Javascript, javascript users benefit from code intelligence features with modern IDEs.
Vue 2 had great reactivity but there were some cases where Vue 2 fell short. Let’s revisit Vue 2 and see what those limitations were-
To show reactivity, we’ll use watchers to listen to one of the state variables and then change it to check whether the watchers are triggered:
<template> <div class="hello" @click="test">test {{list }} {{ myObj }}</div> </template> <script> export default { name: "HelloWorld", data() { return { list: [1, 2], myObj: { name: "John" } }; }, watch: { list: { handler: () => { console.log("watcher triggered"); }, deep: true } }, methods: { test() { this.list[2] = 4; this.myObj.last = "HS"; delete this.myObj.name; } } }; </script>
None of the above three modifications —, for example, adding new item to an array based on the index, adding new item to an object, or removing an item from the object — is reactive in Vue-2. So, watchers won’t be triggered, or the DOM would be updated. We had to use the vue.set() or vue.delete() methods. In vue 3, these work directly without any helper functions:
export default { setup() { let list = ref([1, 2]) let a = ref(0) let myObj = ref({ name: 'John' }) function myFun() { list.value[3] = 3 myObj.value.last = 'HS' delete myObj.value.name } return { myFun, list, myObj } } }
We can see that watcher was triggered all four times in the Vue 3 setup.
When you open main.js in the about project, you can see that something is different. No longer we use the Global Vue instance to install plugins and other libraries. Rather, you can see createApp method:
import { createApp } from 'vue' import App from './App.vue' const myApp = createApp(App) myApp.use(/* plugin name */) myApp.use(/* plugin name */) myApp.use(/* plugin name */) myApp.mount('#app')
Benefit of this feature is that it protects the Vue app from third-party libraries/plugins we use that might override or make changes to the global instance- mostly by the use of Mixins.
Now, with createApp method, we install those plugins on a specific instance and not the global object.
This is a feature where we can render a part of code which is present in one component into another component in a different DOM tree. There was a third-party plugin called portal-vue that achieved this in Vue 2.
With Vuejs 3.0, portal is inbuilt and also it is easy to use. Vuejs 3.0 has a special tag called <Teleport> , and any code enclosed within this tag will be ready to teleported anywhere. The Teleport tag takes a to argument.
<Teleport to="#modal-layer"> <div class="modal"> hello </div> </Teleport>
Any code inside <Portal></Portal> will be displayed in the target location mentioned.
<div id="modal-target"></div>
V-mode is a directive which is used for two-way binding on given component. Mostly it is used with form elements and custom components.
V- model from the form elements looks like-
<input v-model="property />
It can be modified from the inside of component by passing reactive property and listening to input events.
Let’s rewrite the above example to see how the syntax will affect-
<input v-bind:value="property" v-on:input="property = $event.target.value" />
V-model directive can help in syntactic sugar for two-way binding in our components. But you have only one v-model per component. This is the best feature of Vuejs 3.0 and it lets you to give v-model properties names without any restriction.
This feature helps in rendering a default component untill the main component fetches the data. The asynch operations which are used to fetch data from server are done by Suspense. It can be used in individual parts of template or complete template. This concept derived and adapted from the React ecosystem to suspend your component rendering.
With the development of the Vue, the community has led to the enhancement of the framework. These are some of the impressive features of Vuejs 3.0. There can be few others too. If you are thinking to use Vue for your next project, know these amazing new features in Vue.