All posts
Development Front-end

Vue 2 vs Vue 3: 11 Key Differences — QIT

Apr 26, 2023 11 min read
"Vue 2 vs Vue 3: 11 Key Differences — QIT"

Many major front-end frameworks, such as Angular, React, and Vue.JS, make it simple for developers to construct sophisticated web applications. Vue.js is the sole framework responsible for creating sophisticated user interfaces.

front-end vue js

If you’re new to working with VueJS, the first thing that may come to mind is: which stable Vue versions should you use? Right. When it comes to Vue2, it is now on the market and is utilized by practically every company in the world to construct a responsive web application.

With the release of Vue 3, developers are eager to learn about the new technical principles offered in the current version of Vue. Vue 3 has powerful libraries to make your web app more responsive and unique features that make your application quicker.

The Evolution of the Vue.JS Framework

Before we begin to comprehend the difference between Vue 2 and Vue 3, we must first understand the framework journey. Vue.js began life as a basic runtime library. As time passed, it evolved from a library to a framework. And, certainly, Vue.js is now widely recognized as an accessible, performant, and adaptable framework that is essential for developing web user interfaces.

Differences Between Vue.js 2 and Vue.js 3

Now is the time to grasp the technical differences between Vue2 and Vue3 by observing the presence of each feature.

vue2 vs vue3

Developing an Application

The primary distinction between Vue 2 and Vue 3 is the ability to create an app from scratch. The standard application procedure must be followed, including the installation of Vue CLI (Command Line Interface).

  • To install Vue 2, run the following command: install [email protected] npm;
  • To install the most recent version (in this example, Vue 3) type the following command: npm install vue.

Introducing Vue 3 Fragments

Before we can begin to grasp building methods in Vue2 and Vue3 apps, we must first construct a template and establish the app’s data structure.

Begin by defining component options in the Vue2 application.

Vue 3 normally supports Fragments, as previously defined. In other words, components can have several root nodes.

We constructed a root node as Form components in both the Vue2 and Vue3 apps.

Vue 2 Form Component

Vue 3 Form Component

Several Roots

In Vue 2, you can only implement a single root element; additional roots will result in an error. With Vue 3, you may have many root elements in the same template.

Methods in Vue 2 vs Vue 3

After you’ve set up the data with the Composition API, you’ll need to write a setup () function for your Vue project. First, we’ll compare the processes for vue2 and vue3, and we’ll begin by defining a function in the Vue2 app.

How can you make a method in the Vue 2 app?

How can you make a method in the Vue 3 app?

In Vue3, Methods are normally handled through the Composition API. In a nutshell, it’s similar to defining data in that we must first define our setup function and then return it so that other sections of our component may use it.

Data Property in Vue 2 vs Vue 3

Now it’s time to configure the data for the Vue app.

When comparing Vue 2 and Vue 3, the Options API and Composition API are responsible for data management.

Vue.JS Developers may easily divide their code into multiple properties in Vue using the Options API: data, computed properties, methods, and so on. And, unlike the Options API, the Composition API allows developers to arrange code by function rather than specific property type.

Let’s imagine we just have two attributes for our form component: emp.username and emp.password.

In Composition API, the Vue2 code would look like this – we’ve put two values in the data property.

Vue 2 Code with two values in the data property

In Vue 3, developers must use the new setup() function in the Composition API, which performs the same component initialization. Furthermore, because we have direct access to Vue’s reactivity API, developers can immediately get additional control over what is reactive.

The approach for producing reactive data with Composition API consists of three simple steps:

  • Import the value of “reactive” from vue.
  • The reactive and Ref() methods are used to declare data.
  • The Setup() function returns reactive data so that the template may access it.

The code is as follows:

Computed Properties

The computed properties part of the Vue2 app is distinct, although you may create a function in the setup method.

We will provide a basic example to show how calculated is implemented in the setup procedure. We will reply ‘Yes’ or ‘No’ by passing the condition that checks if the length of the author’s name is greater than 0.

In the case of the Vue3 app, the developers need to load all of the necessary packages into the app. Essentially, they didn’t want developers to be forced to incorporate features they had never used, which was becoming a significant issue with Vue2.

So, in order to use calculated properties in Vue 3,  the developers need to import computed into our component.

Then, just like we did with our reactive data before, we can transform a piece of reactive data into a calculated value like this:

If, on the other hand, we use the Composition API, the code will look like this:

Composition API Code

Hooks for the Life Cycle

Lifecycle hooks may be accessed directly from the component settings in Vue 2.

Example

The setup function for Vue 3 Composition API, as we know, includes the mounted lifecycle hook. Keep in mind that lifecycle hooks are not enabled by default. To begin the lifecycle hooks, the Vue.js developers on hire need to import the onMounted() function.

Then, within our lifecycle hooks setup method, we can use the onMounted function by passing it our function.

onMounted function

Accessing Props

The ability to access props is a key difference between Vue 2 and Vue 3.

This would almost often relate to the component in Vue 2, rather than a single attribute. While this simplified things on the surface, it made type support difficult.

However, we could simply access props – just consider printing out our title prop during the mounted hook:

However, we no longer need this in Vue 3 to access props, emit events, and obtain properties.

The setup() function, on the other hand, needs two arguments:

  • props – immutable access to the component’s props
  • context – properties exposed by Vue 3 (emit, slots, attrs)

The following code would look like this if the props argument was used.

Portals

Portal is a feature that allows us to display a portion of code in one component into another component in another DOM tree. To deal with the same component functionality, a third-party plugin named portal-vue did this in Vue 2.

In Vue 3, you’ll discover an in-built portal that’s simple to utilize.

Vue 3 will include a special tag called <Teleport>, and any code wrapped within it will be transported wherever. The Teleport tag is applied to an argument. To grasp the notion of portals, consider the following example.

’<Teleport>’ does not work in the Alpha version described above at the time of writing this article.

Vue 2 vs. Vue 3 events

Similarly, generating events in Vue 2 is simple, but with Vue 3, you have more control over how properties/methods are available.

Assume that when the “Submit” button is hit, we want to send a login event to a parent component.

The Vue 2 code would only need to call this.$emit with our payload object.

However, we now know that this no longer signifies the same thing in Vue 3, therefore we must deal with that specific parent component accordingly.

Fortunately, the context object exposes emit, which does the same this.$emit

We just need to add context as the second argument to our setup function. To make our code more simple, we’ll destroy the context object.

Then, as a second parameter, we simply call emit to convey our event. The emit method then accepts two parameters, as before:

  • The event’s title.
  • A payload object to be passed along with our event.

Code of Initialization

CreateApp is the setup function added to initialize the app in the difference between Vue 3 and Vue 2. This initialization code function creates a new Vue app object. Each instance can have its own set of capabilities without influencing the others.

Although developing numerous applications for various roots inside the same app is uncommon, it may be useful if the project expands in size. In Vue3, as opposed to Vue 2, each Vue app may be configured as an independent object. Some features can also be shared across several instances.

Business Benefits of Vue3

Safety

Although it is not possible to automatically protect applications from XSS and other vulnerabilities, Vue developers can sanitize the HTML code before implementation or use external libraries to protect against attacks. In cases where you know HTML is safe, you can explicitly render HTML content and secure your application before and after rendering. Based on the latest statistics, it should be noted that the latest vulnerability was discovered in the second version of Vue.

Performance improvement

Vue 3 shows significant performance improvements. If you’re working on a product that requires fast content and content updates, the obvious choice is Vue 3. The new version has the following metrics:

Support

In the future, the Vue developers will likely end support for version 2.x. By choosing Vue 3, you can get a supported and improved tool for years to come.

Other benefits of Vue 3:

  • Improved adaptation for large and medium projects.
  • Targeting modern helper tools, in particular, improved TypeScript support.
  • New functionality for solving business problems.
  • Improvement of product development and debugging processes at all stages.

Changed virtual DOM comparison algorithms

The process of changing the real tree DOM in Vue is based on calling a function that compares two Vnode objects (oldNode, vNode), and then patching the changes to the browser DOM. In Vue 2, such an algorithm was built on comparing all nodes without focusing on the node type.

A conceptual feature of the Vue 3 comparison algorithm is that only Vnode elements with dynamic binding are compared, and static ones are ignored.

Consider the following example:

Hi {{username}}

Nice to meet you

It’s getting late, see you tomorrow

As you can see, when calling the comparison function, only the first paragraph will be analyzed, and the other two static elements will simply be ignored. Vue 3 remembers static content, which Vue 2 couldn’t do.

Summary

After comparing key new modifications between vue2 and vue3, we may conclude:

  • In comparison to Vue 2, Vue 3 is touted to be quicker, smaller, more maintainable, and simpler to target natives.
  • Vue 3 is essentially a revised version of Vue 2 that includes several new and major updates and functionality.
  • The basic syntax of vue2 and vue3 is fairly similar.
vue.js development

For developers the new version has shown itself to be good. In fact, this is the same product that has not lost the concept of a declarative tool and at the same time solved the problems of previous versions. It has become easier to work with large amounts of data. In addition, TypeScript typing support has been improved in the third version. We have also received a new functionality that provides an improvement in the development process as a whole.

If at the time of release it was still a new tool with its own pitfalls, the almost absence of npm packages and frameworks adapted to the new version, now we can say with confidence that Vue 3 is the optimal version of the framework at the moment.

Still, if you have any questions about building a new web app with the VueJS framework or migrating to Vue 3, please contact us. If you need a developer fluent in VueJS, the fastest and the most reliable way to find one is at QIT Software. If you hire Vue JS developers it will help you to develop SPAs, interactive personal accounts, administrative panels, tender platforms, and advertising cabinets, using this lightweight framework with a powerful ecosystem.