Vue 2 VS Vue 3: What are the major differences

Introduction

As web development evolves to meet the standards of modern apps, Vue.js has evolved as a robust and adaptable JavaScript framework. To help you through the transition and make the most of this progressive framework, we compare Vue 2 with Vue 3 in this detailed blog piece that delves into the evolution of Vue.js. Come along as we take a look at the new features, performance optimizations, and major improvements that Vue 3 offers. The unpredictable world of front-end development will be easier for developers to comprehend with this.

Whether you're an experienced Vue.js user or just getting started, this article will help you understand the benefits, drawbacks, and other factors to think about while deciding between Vue 2 and Vue 3.

Vue 2 VS Vue 3: The major differences

1. Virtual DOM

Document Object Model (DOM) technology is the backbone of Vue.js. The event loop of Vue.js is now fully integrated with the Virtual DOM in Vue 2. The Virtual DOM, however, has been revamped and optimized for greater efficiency in Vue 3. Vue 3's Virtual DOM is lighter and quicker to parse. Both efficiency and application response times are greatly improved by this.

2. Composition API

The Composition API was one of the standout features introduced in Vue To make your code more structured, manageable, and reusable, you may use the Composition API, which is different from the Options API in Vue Selecting data, methods, calculations, and watch as component definition choices in Vue 2 is common. You have additional options for how to structure your code with Vue 3. Using the Composition API, you may create functions that are easier to use, more versatile, and reusable.

3. TypeScript Integration

Many projects use Vue.js because it integrates well with TypeScript and other static type-checking technologies. It was feasible to integrate TypeScript into Vue 2, although developers may have run across problems. The integration of TypeScript was much enhanced in Vue 3. Improved static type control and a more streamlined TypeScript experience are benefits of using TypeScript with Vue

4. Bundle Size

For extensive front-end applications, bundle size is an important consideration. If you're working with Vue 2, you might have to employ a plethora of optimization techniques and plugins to reduce the size of your bundle. Updates to Vue 3, including a more efficient matching method and the ability to compress source code, have drastically cut down on bundle sizes. As a consequence, performance is enhanced, loading times are reduced, and bundle sizes are reduced.

5. Compatibility

Developers moving from Vue 2 to Vue 3 may encounter compatibility concerns. Vue 3 could rename or change certain components or APIs, or remove them altogether. So, before you upgrade from Vue 2 to Vue 3, make sure you're ready to handle any compatibility concerns. The detailed Vue 3 migration guide may be used as a reference during the migrating process.

6. Creating App

The first thing you'll notice is the syntax change when you look at the app creation process. Both the syntax and the essence are altered.
Vue 2

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
 render: h => h(App),
}).$mount('#app')

Vue 3

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

Explanation for the modification

Since test cases can influence each other via global configuration, global settings present problems while testing in unit tests. All of those results are pollution.
Although Vue 3 offers a variety of global options, it is not easy to share a configuration copy with other apps.

Example:

Vue 2

// this mixin affects both below instances
Vue.mixin({ /* ... */ })
const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })

Vue 3

const app = createApp(App)
// This configuration effect only 1 instance
app.mixin(/* ... */)
app.mount('#app')

7. Multiple v-models

We know that in Vue 2, the v-model allows for two-way binding on a specific component, however in Vue 2, we can only use one v-model. For the uninitiated, v-model is a shorthand for transferring value properties and listening to input events; two-way binding synchronizes the value of user input across parent and child components.

Vue 2

Here we have a basic Vue 2 v-model.

<input v-model="property" />

The following code will do the same thing as an alternative way of expressing the previous example:

<input                         
 :value="property"                        
 @input="property = $event.target.value"                      
/>

Vue 3

InviteForm.vue
App.vue

A component is capable of managing several v-models in this way:

<InviteForm v-model:name=”inviteName” v-model:email=”inviteEmail” />

Two properties in the component, name and email, are of the String type. The following examples of properties that can be updated by emitting an event to handle them:

1. Update value of name emit(“update:name”, value);
2. Update value of email emit(“update:email”, value); Therefore, it's less complicated and easier to work with than Vue 2, which requires two events for multi-value handling synchronization between child and parent components.

8. Modular

Arrange your code in a feature-based structure that facilitates its reuse across several components. Here I'll tell you an alternative method that doesn't include mixins at all. We renamed the setup() function to composition and saved the changes to a JavaScript file so that it would be easy to reuse. And this is the proper way to reuse functions in a composition.

The two composition methods are implemented using the setup() method, as seen above. After that, all of the internal functions can be used normally.

9. Portal

A teleport component is another term for a Portal. With the help of the Portal, we can design HTML components that can be reused and imported into other parts of the DOM, independent of where they are needed.

<div id="app"></div>
<div id="out-side-app"></div>

The outside app is DOM with the id out-side-app, and we can use it through the portal.

<template>
 <teleport to="#out-side-app">
 This is teleport
 </teleport>
 <div>APP</div>
</template>

The "to" property, which accepts a DOM query selector, must be defined in order to make use of the teleport component.

<teleport to=”#out-side-app”>

Currently, we're selecting DOM elements by id, but we can also do it by class:

<teleport to=”.anyClass”>

10. Suspense

In the event that your component is not yet available, such as when a backend API is loaded, the suspense component will display default content instead. An example of utilizing the suspense to callback API can be seen in the code below. To access the API, you can use the composition function. You can try out a basic demo component. A Suspense component is displayed by this. This is where we place components with setup() methods that return Promise or asynchronous components within . Inside the , we provide the content that will be shown during the loading process, such as an icon, spinner, or similar.
Suspense demo:

Vue 2 Lifecycle hooks

• beforeCreate()
• created()
• beforeMount()
• mounted()
• beforeUpdate()
• updated()

• beforeDestroy()
  The lifecycle of Vue 3 introduces a few additional hooks:

• beforeDestroy() is now beforeUnmount()

• destroyed() is now unmounted()

• The render function calls onRenderTracked on the first reference to a reactive dependency.

• You can look into when and what a component re-renders by using onRenderTriggered() whenever a new render is triggered.
  Callback hooks are a part of the setup() methods. Much like with the onBeforeUpdate() and onUpdated() hooks in the setup() function, we can accomplish the same thing with them. With the composition API, you won't need the beforeCreate() or create() methods; instead, your app will call the beforeCreate() hook before the setup() hook and the created() hook right after setup(). Consequently, we can do what is required in beforeCreate() and create() by utilizing setup().

Performance improvements
Vue 3.0 prioritizes enhanced performance:

• a smaller size of the core
• tree-shaking
• optimized slots generation
• hoisting and inlining

Conclusion

Although Vue.js 3 brought numerous enhancements, it's important to remember that Vue.js 2 is still extensively used and that a project's unique requirements will determine whether or not to migrate to Vue.js