Differences Between Vue 2 And Vue 3

Vue 3 is a progressive JavaScript framework and the latest version of Vue. It helps developers create approachable, versatile, performant, maintainable, testable codebase.

Hoang Minh Bach
Sep 2 · 7 min read
Image for post
Image for post
Photo by John Schnobrich on Unsplash

The official version of Vue 3 will release in Q3 2020. It is currently in the release candidate stage that means that the APIs, core, structures are stable and able to become a production release unless significant bugs emerge. Therefore, it’s an appropriate time to figure out which programming differences between Vue 3 and Vue 2 and make the necessary adaptation.

Vue 3 does not change absolutely with Vue 2 but when completed rewriting it from Vue 2, some expected upgrades turn into a reality. The expected means that it makes our application smaller, faster, and more powerful.

This article is for those who have experience with Vue 2.

The Essentials

Creating App

Firstly, looking at the way to create an app, you will see the difference in syntax. Not only syntax but also essence is changed.

Vue 2

Vue 3

Reason for change

Example:

Multiple Root

In Vue 2, you implement only one single root node in the template but Vue 3 no longer requires a single root node for components that means it provides developer multiple root in the template.

Image for post
Image for post

This message never appears in Vue 3.

Vue 2

Vue 3

Composition API

The reasons for creating the composition API are:

Therefore, the appearance of the composition API will solve the above issues.

The features of composition API includes:

Note: If you want to use composition API in Vue 2, you can use this plugin.

Setup

To use Composition API, we should start with the setup() method.

In Vue 3, you can replace the setup() method by some following options:

Note: Vue 3 development can use all of the above normally in the same way of Vue 2 without the setup() method.

Reactive References

The ref is “Reactive Reference” which wraps primitive data to allow us to track change. Don’t forget that we use data() to wrap the primitive inside object in Vue 2.

Vue 2

Vue 3

Methods

Vue 2 has a separate section for methods but in Vue 3, you can define methods in setup()method. This is an example of creating methods using the setup() method.

Vue 2

Vue 3

Computed

Vue 2 has a separate section for computed but you can define a function in the setup()method. Let me show you how to implement computed in the setup() method.

Vue 2

Vue 3

Watch

Vue 2 provides a way which to observe and react to data changes, is the watch properties but Vue 3 provides something new to do that.

Vue 2

Vue 3

The new version provides a new thing for reactive observing the change of data called watchEffect(). It will re-run when their dependencies change.

Or you can use the watch function that is familiar with Vue 2.

Props

You can access props in setup without this like that:

setup(props) {
watch(() => {
console.log(props.name);
});
}

Remove Vue filter

Filter which is deprecated in Vue 3, can be used to apply common text formatting.

Example of a filter in Vue 2:

This is an example of a local filter declaration.

filters: {                           
formatUnix(value) {
if (value) {
return moment(value).format("DD/MM/YYYY");
}
},
},

How to use this filter (format date).

{{ new Date() | formatUnix }}

The goal of making the Vue filter beautify templates and is the ability to reuse in multiple components but it can be replaceable by methods because there is no difference in terms of performance. The other reason Vue writer decide on removing the filter is syntax, {{ new Date() | formatUnix}} is so weird with | which made the developer confused. The ultimate reason for removing the filter is that it will encourage the developer to create more consistent functions to reuse or established explicit methods in each component.

Example:

DateFormat.js
App.vue

Multiple v-models

As we have known about Vue 2, the v-model is two-way binding on a given component but we can use a single v-model in Vue 2. For those who do not know anything about two-way binding which makes user input value synchronization between the parent component and child component, and v-model is a shortcut for passing value property and listening to the input event.

Vue 2

This is a simple v-model in Vue 2.

<input v-model="property" />

We can write the above example in another way but will have the same effect as the following code:

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

Vue 3

InviteForm.vue
App.vue

A component can handle multiple v-model like that:

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

In component, we have 2 props which are name and email have the String type. To update the value to the parent component we use emit an event to handle props like:

So it is simpler and easier to use than Vue 2 which has at least 2 events to synchronize each value from child component to parent component in multi-value handling.

Modular

You should make your code modular that can be organized by feature and reusable across other components. In this part, I will introduce another way to do that, not mixins.

We separate any things inside the setup() to another function called the composition function and we should save it in a JavaScript file to reuse.

And this is how to reuse composition functions.

As you can see above, we use the setup() method to implement 2 composition functions, then we can use normally all of the inside functions.

Portal

Portal has the other name which is a teleport component. Portal allows us to specify template HTML we can bring to other parts of DOM even if it does not belong to the app.

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

DOM with id out-side-app is the outside app, we can interact with it by using the portal.

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

To use the teleport component we need to define the “to” attribute which takes a DOM query selector.

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

We are using id to select DOM and we also can use a class to select DOM like that:

<teleport to=”.anyClass”>

Suspense

Suspense is a special component that renders fallback content instead of your component until a condition is met such as a loaded backend API. The below code is an example of using suspense to callback API.

There is a composition function for calling API.

There is a simple component for demo.

There is an example of a Suspense component.

Inside <template #default>, we put components here which have the setup() method that returns Promise or asynchronous components.

Inside <template #fallback>, we put what display when loading such as spinner, icon, or something like that.

Image for post
Image for post
Suspense demo

Lifecycle hooks

Vue 2 lifecycle methods:

There are some new hooks in Vue 3 lifecycle:

We can callback hook inside setup() methods.

We can do the same with the other hooks inside setup() method such as onBeforeUpdate() , onUpdated() and so on.

The beforeCreate() method and the create() method are unnecessary when using the composition API because the app will call beforeCreate() hook before setup() hook and created() hook is called immediately after setup(). Therefore we can use setup() to handle what we need in beforeCreate() and create().

Image for post
Image for post

Performance improvements

The Vue 3.0 focus on performance improvements:

Image for post
Image for post
Photo by Glenn Carstens-Peters on Unsplash

Conclusion

Vue 3 is the turning point of Vue, I am a huge fan of Vue, therefore I have no reason to ignore it.

Although Vue 3 has many changes to Vue 2 which makes developers who are familiar with Vue 2 have to spend time learning new things, in my opinion, it is valuable. Maybe this article still has some shortcomings so that I always welcome feedback from all of you. Thanks for reading.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store