What’s new in Vue3?

Many people are wondering about the differences between Vue3 and Vue2. I will try to explain all the major changes.

Let’s dive.

Creating New Vue Project

The creating of vue app has been changed. Now we don’t use the “new Vue()” syntax, we need to use createApp method. After calling this method we create a vue app object. Then we call the mount method just like vue2.

Vue2 main.js

Vue3 main.js

When we create more than one vue app object in our project we can’t separate them after using a global configuration like mixins, plugins... In Vue3 we get a new fresh app object after calling createApp function. So we can make different configurations for each app.

For example:

Importing mixins in Vue2

Importing mixins in Vue3

Multi-Roots

In Vue2 every component must have exactly one root element so we can not use multiple roots.

But in Vue3 we can define multiple roots as much as we want thanks to a feature called fragments.

What is Composition API?

Before comparing vue2 with vue3, we have to mention a very important change. This change is Composition API.

First of all, in Vue3 we have the Setup() method in the component. Lifecycles, methods, computed properties, data, props, and components are inside the Setup method. In the setup() method we define our component functionality.

Note!

The Composition API is not a change and it’s optional to use. So Setup() method is not mandatory in Vue3 so we can use lifecycles, methods and the others without using Setup() method.

Let’s get a look closer at every part of it.

Lifecycle Hooks and Methods

Lifecycle hooks are used directly on the options of the components. Giving example; in Vue2; if we want to log that the component is mounted it looks like:

Using lifecycle in Vue2

I mentioned above that there are big changes in the composition API of Vue3. For example: let’s use the mounted lifecycle in the Setup method. It looks like:

Using lifecycle in Vue3

Although we use the mounted keyword in Vue2, we use onMounted keyword on the Setup() method in Vue3.

In Vue3 we can use the mounted lifecycles with two options. First, we can use directly on the options of the components. Second, we can use the mounted hook inside the setup method. So it is up to you!

Lifecycle hooks

Note!

Look at the table above. The beforeCreate and create hooks are unnecessary when we use composition API because the app will call beforeCreate hook before setup method and created hook will call after setup method.

Methods

Vue2 has a separate section for methods as you know. But it is changed in the composition API update. Now we define methods in the Setup() method. For example;

Vue2

Methods example in Vue2

Vue3

Method example in Vue3

Reactive Data

Reactivity is, when calculations that depend on data, will be changed automatically when data changes.

As you know in Vue2, the data part is not an object, it is a function thereby Vue2 provides the reactivity of these variables.

For example, let’s create 2 reactive variables in data.

Declaring reactive property in Vue2

I think, the main difference between vue2 and vue3 is reactivity. In Vue3 we can define reactive data with ref() and reactive() methods. I’m going to tell difference between them. Let’s declare reactive data with ref() methods(we have to import “ref” from vue):

const name = ref("Fatih");

And then we should include it in the return method like:

return { name }

As you guessed ref() method only takes one property. By using ref() we have to declare for every single property and if we want to use it in the template we have to include them in the return().

return { name, surName, age, height, weight, location  };

But with reactive() we can declare them in a single object:

Declaring reactive property in Vue3

Computed

As you know, computed properties are used to declaratively describe a value that depends on other values. When any of the values depended on computed property change the vue will update the DOM. In Vue3 we define computed in setup() method and we need to import computed from vue.

Using Computed in Vue2

Using Computed in Vue3

Watch

Vue2 uses a watch to observe and react to data changes.

Using Watch in Vue2

In Vue3 we can use like old-style, for example(don’t forget to import watch from vue):

Using Watch in Vue3

But there is one another way to use watch and it is watchEffect. WatchEffect runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.

Using Watch Effect in Vue3

If we compare watch and watch Effect, watch allows us to:

• Be more specific about what the state should trigger the watcher to re-run,
• Access both the previous and current value of the watched state.

Props & Emitting Events

As you know, we communicate with components via props and emit events. We send data from parent to child using Props and we send data from child to parent using Emit Events.

Communication between components

Example in vue2:

Using props & Emits in Parent component(Vue2)

Using props & Emits in Child component(Vue2)

But in Vue3, we are not using ‘this’ to access props. Now setup() method takes 2 arguments:

The first one is ‘props’, we can access props with this argument and the second one is selectable properties like emits, slots, etc.

Using the ‘props’ and ‘emit’ arguments the above code is going to be like:

Using props & Emits in Parent component(Vue3)

Using props & Emits in Child component(Vue3)

I hope this tutorial has been a good start to learning Vue3. In this article, I tried to show the differences between Vue3 and Vue2.

Thanks for reading.