Quick Summary:
Vue 3 is already available! The wait is over now. If you’re likely to get a head start with the updated version, read the blog to know everything about what’s new in Vue 3. There is a seminar conducted by the Massachusetts Institute of Technology, where they invited Sarah Dranser and Anthony Gore to make the event more exciting and educational. The event is all about; What’s new in Vue 3? The experts discuss about the new Vue 3 components and features that will help us to improve your Vue application’s performance.
Table of Index
2. Know About Vue 3 Release Date
- Composition API
- Multiple Root Elements
- Suspense
- Multiple V-models
- Better Reactivity
- Portals
- Fragments
- Global Mounting/Configuration API Change
- Custom Directive API
- Full TypeScript Support
Introduction
Recently on 18 September 2020, Vue 3 released with many new and exciting features that lead to better performance and maintainable code. If you’re not aware of it, then you should check out this blog post to know the crucial details and resources on what’s new in Vue3?
Massachusetts Institute of Technology (MIT) held a colloquy for their students. The guests of honor were Sarah Dranser and Anthony Gore, who were invited to make the conversation more educational and highly-interactive for the students. The seminar was conducted to educate the students regarding the latest trends about the progressive front-end framework created by Evan You. Yes, it’s about the new Vue 3 component and features for Vue performance optimization.
Sarah Dranser is an award-winning speaker, conducts conferences worldwide, and shares her insights about Vue, animations, and other great stuff. She is a former Principal Lead of Emerging Markets, Cloud Advocates at Microsoft, and UX & Engineering at Trulia/Zillow Group.
Anthony Gore loves to share insights about the new web technologies; he is a full-stack developer and the founder of Vue.js Developers from Sydney, Australia. He is passionate about JavaScript and an active technical writer.
To make it more interesting, me and Sarah Dranser have decided to discuss the Vue 3 components and features one by one so that you won’t get bored where you all can also join and share your insights about Vue 3. So without further ado, let’s get started! – Anthony Gore
As per the standard update from Evan You, Vue 3 is more durable, smaller, and more maintainable, and it’s more comfortable to target native. And, there are prominent features in Vue3. Let’s discuss them in detail.
Know About Vue 3 Release Date
The Vue 3 core is officially released as of 18 September 2020, which means the core is stable. The Vue 3 docs are published with a migration guide about the changes done in Vue 3.
Now you’re all set to experiment with Vue 3 and have fun with it!
What’s New in Vue 3? – Vue 3 Components, new features, and changes:
1. Composition API
Composition API is the collection of APIs for a better understanding of business logic. It is different from Options API in Code structure organization that focuses on the features to be developed rather than code lines. The colored blocks are used for logical concerns, and comparing them with the Composition API provides a better organization of logic than the options API.
Start creating with the Composition API with a flexible code organization and logic reuse capabilities with many other improvements. It helps to make your code readable and maintainable by introducing the setup method as shown below in a sample script where we’re doubling a number.
< 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 >
2. Multiple Root Elements
In Vue’s previous version, the template tags only took a single root element, even if you had just two < p > tags. Enclose them within a
But in Vue 3, there is no restriction, and you’re not required to have a root element anymore.
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 >
Similar code in Vue 2:
< template >
< div class+”counter” >
< p > Count: {{ count }} < /p >
< button @click=”increment” > Increment < /button > < button @click=”decrement” > Decrement < /button > < /div >
< /template >
3. Suspense
The suspense component is a great idea that will be adopted in Vue 3 from the React ecosystem. You can suspend your component rendering by a fallback element until a condition is met.
The suspense will be a component with slots:
< Suspense > < template > < Suspense-component/ > < /template > < template #fallback > Loading… < /template > < /Suspense >
The below given below would trigger the fallback until you’ve completed the call to getMyData.
export default {
async setup () {
const data = await getMyData()
return { data }
}
}
Suspense components can reduce the boilerplate code required to make external calls.
4. Multiple V-models
V-model is a directive to achieve two-way binding on a component. You can use these components to pass a reactive property and edit it from within. V-model is a simple way to pass in value and listen to the input event.
Let’s understand it by taking an example of creating a name component with two values: Forename(s) and Surname.
You’re required to have a v-models for each of those values.
< NameComponent v-model:forenames="forname" v-model:surname="surname" / >
5. Better Reactivity
Vue had great reactivity in its previous version also, and you might haven’t come across any cases where you found that reactivity was lacking. Let’s go back to Vue 2 and have a loot what those limitations were and then modify it to see if 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: "Preetish" }
};
},
watch: {
list: {
handler: () => {
console.log("watcher triggered");
},
deep: true
}
},
methods: {
test() {
this.list[2] = 4;
this.myObj.last = "HS";
delete this.myObj.name;
}
}
};
< /script >
In Vue 3, modifications can be done directly without implementing any helper functions.
export default {
setup() {
let list = ref([1, 2])
let a = ref(0)
let myObj = ref({ name: 'Preetish' })
function myFun() {
list.value[3] = 3
myObj.value.last = 'HS'
delete myObj.value.name
}
return { myFun, list, myObj }
}
}
Look how the watcher is triggered four times in the Vue 3 setup.
Hire Senior Vue.js Developers And Build Awesome Work Scheduling App As Per Your Business Operations
6. Portals
Portals are a way to render child nodes into a DOM tree, and it is a concept from React to render a component outside the parent Vue app’s DOM. This process is very uneven with extra CSS, and JS must inject it into the DOM tree. Using a portal requires a tag with an Id to have a
< !DOCTYPE HTML > < html lang="en" > < head > < /head > < body > < div id="app" >< /div > < div id="modal" >< /div > < !-- built files will be auto injected -- > < /body > < /html >
When you require to teleport a component inside the modal; use the Portal syntax as shown below:
< template > < Portal target="#modal" > < div >I'm rendered in the modal!< /div > < Portal > < /template >
7. Fragments
Fragments are also called “Multiple Root Nodes.” Fragments introduce this and will enable you to use multiple nodes in a component. If you’re using attribute inheritance, then you need to specify which root component inherit the attributes passed to the parent component:
< template > < ComponentOne / > < ComponentTwo v-bind="$attrs"/ > < ComponentThree / > < /template >
Here you can see that Vue 3 components allow you to use multiple root nodes without any extra effort.
8. Global Mounting/ Configuration API Change
Virtual DOM is used to faster and better performance by reducing the runtime overhead. It helps you to skip unnecessary condition branches and re-renders. It results in faster the component instance initialization, better speed, and half the memory usage.
Changing the configuration API of your Vue application is changed in Vue 3 to improve the possibilities of what can be done using a single global instance.
The current RFC gives new syntax snippets in the VueJS repository and it looks like:
CURRENT:
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')
NOW:
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')
9. Custom Directive API
I assume that you are aware of the directive if you’re using Vue. It is the built-in directive when talking about the v-model. These directive methods are synced in Vue 3 with the standard Vue lifecycle to get beforeMount, updated, beforeUnmount, mounted, and unmounted. It becomes effortless to remember when you’re developing your application, and you’re no longer required to find which method you need and remembering two different life cycles.
Directives are used to determine Vue to perform some special operations and define custom directives as per their use cases. Previously custom directives had hooks that didn’t indicate any component life cycle states.
In Vue 3, custom directives consist of all the components lifecycle hooks, which provides a better understanding for developers and semantic organization.
10. Full TypeScript Support
The Vue core team switched to TypeScript from Flow for the development of Vue 3 components to create applications with better type hints. It becomes more comfortable to use TypeScript in Vue 3 compared to the previous version; it will be more TypeScript-friendly.
Vue 3 has built-in TypeScript support, whereas Vue 2 could accommodate TypeScript into your Vue application.
In the end
I hope you’ll enjoy learning what’s new in Vue 3 with Anthony Gore and me. We’ll surely meet again in the new event, till then, explore Vue 3, learn new technologies, and yes, happy coding. Thank you.
– Sarah Dranser
But before we end the event, and I want some students who can discuss Vue 3 features that Sarah and I didn’t mention.
– Anthony Gore
Change detection, Teleport, and Logic extraction – Student’s answers.
I enjoyed sharing my insights with you and waiting to have more such events with you all with more enthusiasm. Thanks.
– Anthony Gore
Final Thoughts
Now that Vue 3 is officially released, you can start using it right away. The new features can improve your application’s performance and faster systems.
There are a few life improvements to create applications that can help you excel in and enjoy.
Vue 3 is backward compatible with some minor changes that do not replace the existing way of doing things; instead, it adds new ways.
Hopefully, you find this blog valuable and have a clear understanding of the modern Vue components and features. If you are looking for version upgrade support to upgrade from Vue 2 Vue 3 or if you are looking for a helping hand to build responsive cross-platform Vue app with Quasar, we can be your one-stop solution. Get in touch with us today to experience one-of-a-kind Vue.js app development services fluffing your custom Vue.js project requirements. We are a globally renowned VueJS development company and let you hire Vue.js developers to build custom VueJS applications.
Frequently Asked Questions:
-
What is new in Vue JS?
Vue 3 is officially released, which is equipped with TypeScript support. Here are the new features in Vue 3 that you should implement in your existing Vue application: Composition API, V-model, Portals, Multiple root elements, Suspense, and much more.
-
Is Vue 3 stable?
Yes, Vue 3 is stable now, as it is officially released on 18 September 2020.
-
What is VUE composition API?
The composition API is a set of function-based APIs for the flexible composition of component logic.
