Vue 2.0 3.0

Posted on  by admin

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. Firstly, looking at the way to create an app, you will see the difference in syntax.

Not only syntax but also essence is changed. Global configurations make issues during testing in unit tests because test cases can affect each other by global configuration.

All of those effects are pollution. Vue 3 provides different global configurations but it makes it difficult to share a copy of configuration to multiple apps.

Let’s setup Vue 2.0 code first

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.

This message never appears in Vue 3. The reasons for creating the composition API are:.

Large components become difficult to read and maintain. Managing and maintaining logic between components is a big problem (mixins). Therefore, the appearance of the composition API will solve the above issues.

The features of composition API includes:. Optimal TypeScript support. A component is too large and a good code organization is mandatory.

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

But… they’re very similar

To use Composition API, we should start with the setup() method. In Vue 3, you can replace the setup() method by some following options:. Computed Properties. Lifecycle methods. Note: Vue 3 development can use all of the above normally in the same way of Vue 2 without the setup() method.

The ref is “Reactive Reference” which wraps primitive data to allow us to track change.

  1. Don’t forget that we use data() to wrap the primitive inside object in Vue 2. 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 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 provides a way which to observe and react to data changes, is the watch properties but Vue 3 provides something new to do that.

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. You can access props in setup without this like that:.

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.

How to use this filter (format date). 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.

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.

This is a simple v-model in Vue 2. We can write the above example in another way but will have the same effect as the following code:. A component can handle multiple v-model like that:.

In component, we have 2 props which are name and email have the String type.

Vue 3

To update the value to the parent component we use emit an event to handle props like:.

Update value of name emit(“update:name”, value);.

Computed

Update value of email emit(“update:email”, value);. 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.

Reason for change

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.

  1. Portal has the other name which is a teleport component.