Vue 2 vs Vue 3 – The 11 Key Differences You Must Know

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

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.

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.

1. 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')

2. 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

   

3. 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>

4. 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

5. 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

6. 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>

7. 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>

8. 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);
   });

9. 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,
   });
   };

10. 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.

11. 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.

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.

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.

Ankur Akvaliya

Ankur Akvaliya is Sr. Software Engineer at Albiorix Technology. He is a dedicated and hard-working person to deals with any technological needs. He is prominent in working with object-oriented design, problem resolution, requirement gathering, and finally debugging the code. Above all, his keen interest is in writing the technical articles that can become a boon for readers.