Vue 2 VS Vue 3: The 10 Ultimate Differences You Must Know

 

Published On:

  July, 25, 2022
Read Time 16.64 Minute Read
Vue 2 VS Vue 3: The 10 Ultimate Differences You Must Know

Basic Introduction

If you’re completely new to working with VueJS, the first question that might hit your mind is: which version 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 Vue3, developers are curious to know the technical concepts introduced in the latest version of Vue. Vue3 has come up with innovative features that make your application faster and include capable libraries to make your web app more responsive.

History of Vue.JS Framework

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.

Difference Between Vue 2 VS Vue 3

  1. Creating An Application

    The first difference between Vue 2 VS Vue 3 is creating an application from scratch. You need to do the normal process for creating an application which includes the installation of Vue CLI (Command Line Interface).

    To make it easy for you, please enter the following command to install Vue CLI:
    npm i -g @vue/cli

    • To install Vue2, you need to enter the command: npm install vue@2.x.x
    • To install the latest version (for this case Vue3), type the command: npm install vue

    There exists a minor syntax difference and also some basic structural changes.

    Example of main.js file for Vue 2

    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

    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. It’s not the case with Vue 3, you can add multiple roots in the same template.

    <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 application. If we give the element inside the <template> in the Vue2 application, you receive the following error message.

    But in the case of Vue3, such a message never appears.

    As you can see the below code that there are two components (HelloWorld and AppForm) included in the file.

     Example of HelloWorld and AppForm components

    <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

    output-of-vue-3

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

    Let’s start with creating a component 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 Form components in Vue2 as well as the Vue3 application.

    Form Component in Vue 2 application

    <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

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

    If we talk about Vue2 VS Vue3, 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 code into different properties: data, computed properties, methods, etc. And if we talk about the Composition API, it allows the developers to group code by function rather than the property type.

    For our form component, let’s say we just have two data properties: emp.username and emp.password.

    The Vue 2 code would look like this – we have entered two values in the data property.

    Vue 2 Code with two values in the data property

    <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 where the entire component initialization takes place. Moreover, the developers can quickly control what is reactive, we have direct access to Vue’s reactivity API.

    The process for creating reactive data includes three easy steps:

    • Import “reactive” from vue
    • Data declaration using the reactive and Ref() method
    • Setup() method returns the reactive data with the aim that the template can access it

    The code looks like this:

    <script>
    import {reactive} from "vue";export default {
    props: {
    title: String,
    },
    setup() {
    const state = reactive({
    empusername: "",
    emppassword: "",
    });
    return {state};
    },
    };
    </script>
  5. Methods in Vue 2 VS Vue 3

    After setting up the data, it’s time to create a method for your Vue application. First of all, we’ll see the process to create a method in the Vue 2 application.

    How to create a method in the Vue 2 application?

    <script>
    export default {
    props: {
    title: String,
    },
    data() {
    return {
    emp_username: "",
    emp_password: "",
    };
    },methods:{
    login() {
    //login method goes here
    },
    };

    In Vue3, Composition API typically handles methods. In simple words, it is like declaring data – we have to first declare our method and then return it so that other parts of our component can access it.

    How to create a method in the Vue 3 application?

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

  6. Lifecycle Hooks

    In Vue 2, the developers can access lifecycle hooks directly from the component options.

    Example

    <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 developers need to import the onMounted() method to initiate the lifecycle hooks.

    Then, inside our setup method, we can use the onMounted method by passing it our function.

    onMounted method

    <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 application has a separate section for computed 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.

    const publishedBooksMessage = computed(() => {
    return author.books.length > 0 ? 'Yes' : 'No'
    })

    In the case of the Vue3 application, the developers need to mandatorily import the essential packages they need in the application. 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 in 2022?

    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:

    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:
    reactive data output- vue3

    On the other hand, if we go for Composition API, the code will be something like this:

    Composition API Code

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

    In Vue2, 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:

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

    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.

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

    In Vue 3, the developers 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.

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

Want to Create a Robust and Responsive Web application?

Albiorix is a one-stop solution for VueJS development as we have a team of VueJS experts to provide you with cost-effective solutions.

Summary of Vue 2 VS Vue 3

After analysing major new changes introduced in Vue3, we can say that:

Vue3 is said to be faster, smaller, more maintainable and easier to target natives compared to Vue2.

Vue3 is more or less a rewritten version of Vue2 and comes with some new and significant changes and features.
The basic syntax of Vue2 and Vue3 are very similar.

Still, if you find any queries regarding creating a new web application using the VueJS framework or want to migrate to Vue3, 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 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.

Frequently Asked Questions of Vue 2 VS Vue 3

What is VueJS used for?

VueJS allows the developers to design and build robust web interfaces for the application. Moreover, it is also responsible to allow developers single-page applications. VueJS can be easily used for building both desktop and mobile app development.

Is VueJS the same as JavaScript?

JavaScript is nothing but a cross-platform and open-source back-end framework that allows developers to simply execute JavaScript code on the server side. On the other hand, Vue. js is a structural, open-source JavaScript framework designed explicitly to build UIs and single-page applications.

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.

Key Clients

Get in Touch


    Our Offices

    Head Office & Development Center
    Albiorix Head Office India India

    A-804, Safal Profitaire, Prahladnagar,
    Ahmedabad, Gujarat 380015.

    Sales Office
    Albiorix Development Center Australia Australia

    81-83 Campbell Street,
    Surry Hills, NSW 2010, Australia