Vue 2 vs Vue 3 – The 11 Key Differences You Must Know Posted on 3 April 2023 by Ankur Akvaliya Basic Introduction Often there exists many leading front-end frameworks like Angular, React, and Vue.JS that make the work easy for the developers to build robust web applications. Among all such frameworks, Vue.js is solely responsible for building rich user interfaces. If you’re completely new to working with VueJS, the first question that might hit your mind is: which stable versions you should go for? Right. If we talk about Vue2, it’s currently hitting the market and is used globally by almost all companies to create a responsive web application. With the launch of Vue 3, developers are curious to know the technical concepts introduced in the latest version of Vue. Vue 3 has come up with innovative features that make your application faster and include capable libraries to make your web app more responsive. Key Takeaways Brief definition of Vue 2 and Vue 3 In this vue2 vs vue 3 post we describe several important improvements of Vue 3 compared to Vue with some of the Vue 3 key enhancements. Vue.js is a popular progressive JavaScript framework for building user interfaces (UIs). There exists many differences between the Vue 2 VS Vue 3 in terms of different parameters and that’s what we have covered in the article. Vue 3 is said to be faster, smaller, more maintainable and easier to target natives compared to Vue 2. Vue 3 is more or less a rewritten version of Vue 2 and comes with some new and significant changes and features. History of Vue.JS Framework Before, we start to understand the concept of the difference between Vue 2 and Vue 3, we need to start with the framework journey. Vue.js started its journey as a simple runtime library. As time evolved, it evolved to convert from a library to a framework. And yes, today, Vue.js is popularly known as an approachable, performant and versatile framework that plays a vital role to build web user interfaces. Related Post: TypeScript VS JavaScript Definition: Vue.js 2 Vue.js 2 is a widely used JavaScript framework for building user interfaces. It is known for its simplicity and flexibility, allowing web developers to create interactive web app easily. Vue.js 2 provides a reactive and component-based architecture, where the application’s UI is divided into reusable components. Definition: Vue.js 3 Vue.js 3 is the Current version of the Vue.js JavaScript framework, designed for building modern and performant web applications. It introduces several significant improvements and optimizations compared to its predecessor, Vue 2. Vue 3 focuses on improved performance, smaller bundle sizes, enhanced TypeScript support. Vue 3 is the Composition API, It offers a more flexible and modular approach to organizing code within components. Additionally, Vue.js 3 enhances the virtual DOM algorithm for more efficient rendering and updates, resulting in faster application performance.” Vue 2 is still being used by multiple companies around the globe, owing both to its diffrent benefits and the short time for which Vue 3 has been out and Vue 2 will set to the end of 2023. Top 11 Differences Between Vue 2 VS Vue 3 Now, it’s high time to see the technical difference between Vue2 vs Vue3 by understanding the demonstration of every aspect. Creating An Application The first difference between Vue 2 VS Vue 3 is creating an app from scratch. You must do the standard application process, including installing Vue CLI (Command Line Interface). To make it easy for you, please enter the following command to install CLI: npm i -g @vue/cli To install Vue 2, you need to enter the command: npm install vue@2.x.x To install the latest version (for this case Vue 3), type the command: npm install vue There exists a minor syntax distinction and also some basic structural and major changes. Example of main.js file for Vue 2 Copy import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = falsenew Vue({ render: h => h(App), }).$mount('#app') Example of main.js file for Vue 3 Copy import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') Multiple Root In Vue 2, you are allowed only to implement a single root element; else an error will be thrown for multiple roots. It’s not the case with Vue 3, you can add multiple root elements in the same template. Copy <template> <app-header /> <router-view /> </template> As you can see there are two elements included in the template, it will not proceed further in the Vue2 app. If we give the element inside the in the Vue2 app, you receive the following error message. But in the case of Vue 3, such a message never appears. As you can see the below figure that there are two web components (HelloWorld and AppForm) included in the file. Example of HelloWorld and AppForm components Copy <script> import HelloWorld from './components/HelloWorld.vue' import AppForm from './components/AppForm.vue' export default { name: 'App', components: { HelloWorld, AppForm } } </script> And if we run the application, the outcome is Introducing Fragments in Vue 3 Before we start to understand creating methods in Vue2 and Vue3 applications, we need to create a template and prepare a well-defined data structure for the app. Let’s start with creating component options with the Vue2 application. As defined earlier, Vue 3 typically supports Fragments. In simple words, components can have more than one root node. We have created a root node as Form components in Vue2 as well as the Vue3 app. Form Component in Vue 2 application Copy <template> <div class="form-element"> <h2>{{ title }}</h2> <input type="text" v-model="emp_username" placeholder="Employee Username"/> <input type="password" v-model="emp_password" placeholder="Employee Password"/> <button @click="login">Submit</button> <p>Values: {{ emp_username + ' ' + emp_password }}</p> </template> Form Component in Vue 3 Application Copy <template> <h2>{{ state.title }}</h2> <input type="text" v-model="state.empusername" placeholder="Employee Username" /> <input type="password" v-model="state.emppassword" placeholder="Employee Password" /> <button @click="login">Submit</button> <p>Values: {{ state.empusername + ' ' + state.emppassword }}</p> </template> Data Property in Vue 2 vs Vue 3 Now, it’s time to set up the data for the Vue app. If we talk about Vue 2 VS Vue 3, Options API and Composition API are responsible for handling the data. With the help of Options API, the Vue.JS Developers can easily separate the cleaner code into different properties in Vue: data, computed properties, methods, etc. And if we talk about the Composition API, unlike the Options API, it allows the developers to group code by function rather than the specific property type. For our form component, let’s say we just have two different properties: emp.username and emp.password. The Vue2 code in Composition API would look like this – we have entered two values in the data property. Vue 2 Code with two values in the data property Copy <script> export default {props: { title: String, }, data() { return { emp_username: "", emp_password: "", }; }, }; </script> In Vue 3, the developers need to work with the new setup() method in Composition API where the entire same component initialization takes place. Moreover, the developers can quickly have more control over what is reactive, we have direct access to Vue’s reactivity API. The process for creating reactive datas using Composition API includes three easy steps: Import “reactive” from vue Data declaration using the reactive and Ref() method Setup() method returns the reactive datas with the aim that the template can access it The code looks like this: Copy <script> import {reactive} from "vue";export default { props: { title: String, }, setup() { const state = reactive({ empusername: "", emppassword: "", }); return {state}; }, }; </script> Related Post: Vue vs React Methods in Vue 2 vs Vue 3 After setting up the data using Composition API, it’s time to create a setup () method for your Vue app. First of all, we’ll see the process for vue2 vs vue3 and we’ll start by creating a method in the Vue2 app. How to create a method in the Vue 2 application? Copy <script> export default { props: { title: String, }, data() { return { emp_username: "", emp_password: "", }; },methods:{ login() { //login method goes here }, }; How to create a method in the Vue 3 application? In Vue3, Composition API typically handles methods. In simple words, it is like declaring data – we have to first declare our setup method and then return it so that other parts of our component can access it. Copy <script> import {reactive} from "vue";export default { props: { title: String, }, setup() { const state = reactive({ empusername: "", emppassword: "", }); const login = () => { //login method goes here }; return { state, login}; }, }; </script> Searching For Building High-End Front-end Applications? Albiorix is a one-stop solution having a team of talented Vue.js developers that always strive to upscale the applications as per your business. Contact Us Lifecycle Hooks In Vue 2, the developers can access lifecycle hooks directly from the component options. Example Copy <script> export default {mounted() { console.log("title: " +this.title); },computed: { lowerCaseEmp_Username(){ return this.emp_username.toLowerCase(); }, }; </script> As we know, for Vue 3 Composition API, the setup method includes the mounted lifecycle hook. Remember that lifecycle hooks are not included by default. The Vue.js developers available on hire need to import the onMounted() method to initiate the lifecycle hooks. Then, inside our setup method of lifecycle hooks, we can use the onMounted method by passing it our function. onMounted method Copy <script> import {reactive} from "vue";export default { props: { title: String, }, setup() { const state = reactive({ empusername: "", emppassword: "", }); onMounted (() => { console.log("component mounted"); }); const login = () => { //login method goes here }; return { state, login}; }, }; </script> Computed Properties Vue2 app has a separate section for computed properties but you can define a function in the setup method. We will highlight a simple example to demonstrate the implementation of computed in the setup method. We will return ‘Yes’ or ‘No’, by passing the condition to check whether author’s name length is greater than 0. Copy const publishedBooksMessage = computed(() => { return author.books.length > 0 ? 'Yes' : 'No' }) In the case of the Vue3 app, the developers need to mandatorily import the essential packages they need in the app. Essentially, they didn’t want developers to have to include things they never used, which was becoming a growing problem in Vue2. Related Post: Angular Vs React Vs Vue: Which is the Best Framework To Use So to use computed properties in Vue 3, the developers will have to import computed into our component. Then, similarly to how we created our reactive data earlier, we can make a piece of reactive data a computed value like this: Copy export default { data() { return { author: { name: 'Oliver Smith', books: [ 'Book 1', 'Book 2', 'Book 3' ] } } }, computed: { publishedBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' } } }<template> <p>Has published books:</p> <span>{{ publishedBooksMessage }}</span> </template> When we check the browser, the outcome is: On the other hand, if we go for Composition API, the code will be something like this: Composition API Code Copy <template> <div> <p>Has published books:</p> <span>{{ publishedBooksMessage }}</span> </div> </template> <script setup> import { reactive, computed } from "vue"; const author = reactive({ name: 'Oliver Smith', books: [ 'Book 1', 'Book 2', 'Book 3' ] }) const publishedBooksMessage = computed(() => { return author.books.length > 0 ? 'Yes' : 'No' }) </script> Accessing Props Accessing props is an essential thing that differentiates between Vue 2 VS Vue 3. In Vue 2, this would almost always refer to the component, not a specific property. While this made things easy on the surface, it made type support a pain. However, we could easily access props – let’s just add a trivial example like printing out our title prop during the mounted hook: Copy <script> export default { props: { title: String, } mounted () { console.log(“title: “ +this.title); }, } However, in Vue 3, we no longer use this to access props, emit events, and get properties. Instead, the setup() method takes two arguments: props – immutable access to the component’s props context – selected properties that Vue 3 exposes (emit, slots, attrs) Using the props argument, the above code would look like this. Copy export default{ props: { Title: String, }, setup(props) { onMounted( () => { console.log(“title: “ +props.title); }); Events in Vue 2 vs Vue 3 Similarly, emitting events in Vue 2 is very straightforward, but Vue 3 gives you more control over how properties/methods are accessed. Let’s say, in our case, that we want to emit a login event to a parent component when the “Submit” button is pressed. The Vue 2 code would just have to call this.$emit and pass in our payload object. Copy methods:{ login() { this.$emit("login", { username: this.emp_username, password: this.emp_password, }); }, However, in Vue 3, we now know that this no longer means the same thing, so we have to deal with that particular parent component differently. Luckily, the context object exposes emit that gives us the same thing as this.$emit All we have to do is add context as the second parameter to our setup method. We’re going to be destructuring the context object to make our code more concise. Then, we just call emit as a second parameter to send our event. Then, just like before, the emit method takes two arguments: The name of our event A payload object to pass with our event Copy setup (props, {emit}) { const login = () => { emit (“login”, { username: state.username, password: state.password, }); }; Introducing Portals functionality in Vue 3 Portal is a feature where we can render a part of the code in one component into a different component in another DOM tree. There was a third-party plugin called portal-vue that achieved this in Vue 2 to deal with the same component functionality. In Vue 3, you’ll find it easy to use an in-built portal and very easy to use. Vue 3 will have a unique tag called <Teleport>, and any code enclosed within this tag will be ready to be teleported anywhere. The Teleport tag takes a to an argument. Let’s take a simple example to understand the concept of portals. Copy <Teleport to="#modal-layer"> <div class="modal"> Hey, Everyone!!! </div> </Teleport> Any code inside <Portal></Portal> will be displayed in the target location mentioned. <div id="modal-target"></div> At the time of writing this article, <Teleport> doesn’t work in the Alpha version mentioned above. Initialization Code In the difference between Vue 3 Vs Vue 2, createApp is the setup method, that is introduced to initialize the app. This initialization code method returns a new instance of a Vue app. Each instance can have its own functionalities without affecting the other instances. Copy const app1 = createApp({}) const app2 = createApp({}) app1.directive('focus', { inserted: el => el.focus() }) app2.mixin({ /* ... */ }) Although creating multiple apps for multiple roots in the same app is not common, this might come in handy when the project grows in size. With Vue3, compared to Vue 2, it is possible to configure each Vue app as an independent object. It is also possible to share some functionalities among several instances. Want to Create a Responsive Web application? Albiorix have a team of VueJS developers to provide you with cost-effective Web solutions. Contact Us What Are the Most Important Improvements From Vue 2 to Vue 3? Vue 3 introduces several important improvements compared to Vue 2. Some of the key enhancements are: Composition API: Vue 3 introduces the Composition API, which provides a more flexible and modular way to organize code within components. Improved Performance: Vue 3 brings significant performance improvements. The new reactivity system in Vue 3 utilizes a proxy-based approach, resulting in faster updates to the user interface. Smaller Bundle Sizes: Vue 3 comes with a more efficient template compiler that generates smaller bundle sizes. This reduces the overall size of the application, resulting in faster loading times and better performance. Better TypeScript Support: Vue 3 offers improved TypeScript integration and support out of the box. The new version provides enhanced TypeScript typings, making it easier for developers to use TypeScript in their Vue projects and benefit from static type checking and IDE tooling. Easier Error Handling and Debugging: Vue 3 introduces better error handling and debugging capabilities. It provides more informative error messages and warnings, helping developers identify and resolve issues more efficiently during the development process. Vue Router and Vuex Integration: Vue 3 provides enhanced integration with Vue Router and Vuex, the official routing and state management libraries for Vue.js. The updated versions of Vue Router and Vuex are optimized for Vue 3 and offer improved performance and features. These improvements make Vue 3 a more powerful and efficient framework for building modern web applications, providing developers with enhanced flexibility and performance. Summary of Vue 2 vs Vue 3 After analysing major new changes with vue2 vs vue3, we can say that: Vue 3 is said to be faster, smaller, more maintainable and easier to target natives compared to Vue 2. Vue 3 is more or less a rewritten version of Vue 2 and comes with some new and significant changes and features. The basic syntax of vue2 vs vue3 are very similar. Still, if you find any queries regarding creating a new web app using the VueJS framework or want to migrate to Vue 3, feel free to contact us. Albiorix is a leading Vue.js development company having a team of talented developers to provide the best optimum IT solutions.