Vue Js 2 Vs 3

Posted on  by admin

Should I learn Vue 2 or Vue 3 in 2021?

Vue JS keeps evolving and Vue JS 3 is the latest. Vue JS 3 and Vue JS 2 go along a similar line. However, there are significant changes in both. While Vue JS 3 has maintained some of the functionalities of Vue JS 2, some revolutionary changes have been incorporated.

aTeam Soft Solutions is a team of developers that are well versed in all the versions of Vue JS. Some of the features that are changed or updated from version 2 are as follows.

But… they’re very similar

Lazy observation by default. Efficient debugging. Immutable observables. Since the announcement of Vue 3 there are two questions I am frequently asked by newcomers and senior Vue developers. Should I use or learn Vue 2 in 2021?

When is the Vue 3 Masterclass coming? The Vue.js Masterclass is how Vue School started. It was originally created in 2016 as the next step for the readers of my book, The Majesty of Vue.js.

The masterclass has taught Vue.js to 1000s developers and helped many of them land a relevant job. Also, many companies worldwide use the Vue Masterclass to train their teams, develop high-end front-end applications, and often for onboarding new employees.

Update: The Vue 3 Masterclass is now available. In the Vue Masterclass people learn how to build production-grade websites with Vue.js. It begins with the basics, creating a new application, and step-by-step we build a full forum.

When is the Vue 3 Masterclass coming?

We implement everything, including user profiles, permissions, threads, content management, live updates, and whatnot! The forum we build in the Masterclass is developed with Vue 2.

Vue 3.0, codename One Piece, was announced 2 years ago and was officially released in September 2020. Vue 3 is a complete rewrite of the framework.

It comes with even better performance, better tree-shaking, smaller size, improved TypeScript support, and some revolutionary new features for developing large-scale enterprise software.

Thus, Vue 3 is awesome and was released a few months ago. But does this mean that we can or should use it in production just yet?

In this article I try to address all these questions. Let’s begin with the first one.

Most of the syntax and practices in Vue 2 remain the same in Vue 3, so it shouldn’t make a big difference if you learn Vue 2 or Vue 3.

Bonus: Why does it take time for the ecosystem to be ready for Vue 3?

However, core, official, and community libraries are not yet compatible with Vue 3 so if you are aiming for production you better learn - and use - Vue 2 in 2021.

This might sound a bit bitter but if you think about it, it makes sense! (more about this in the end of the post).

What’s your situation?

Vue 3 is basically a supercharged version of Vue 2. Vue 3 is even faster and lighter, comes with improved TypeScript support, and some great new features. The framework itself has been re-written from scratch but the API (how developers use it) remained the same.

  • How awesome is that?! Think of upgrading to Vue 3 as switching to a slightly newer phone of the same brand, like for example switching from iPhone X to iPhone 11 Pro.
  • And in both cases you have a great phone! Same in Vue.js, when you switch to Vue 3 you will be able to do more things with your new framework but everything you could do previously will continue to work.
  • So don’t be afraid of Vue 3 and stop hesitating learning and using Vue 2 in 2021. Everybody uses Vue 2 in 2021! You won’t fall behind, you are not missing out, and your codebase is definitely not outdated.

The Vue 3 Masterclass is a complete remake of our signature course that was released some years ago.

We’re going to build our beloved forum from scratch again. This time we will be using Vue 3 and all the latest and greatest ecosystem and other 3rd party libraries we need in order to build a modern Real-World application.

The InfoQ Newsletter

It was technically possible that we released the new course while Vue 3 or the ecosystem is experimental. But that’s not what the Masterclass is about.

Vue V3.x Breaking Changes

The goal is to teach you stable code and best practices for production.

  • Not code that might change tomorrow or next month. You can find the Vue 3 Masterclass here. The original course is developed with Vue 2 and the content is still relevant, you can use it at work today!
  • Though, as the course is years old you will have to do some workarounds here and there which might be a bit annoying.
  • We’ve taken all the feedback we got from The Vue.js 2 Masterclass, and supercharged The Vue.js Masterclass with all the new goodies from Vue.js 3 and the ecosystem.
  • The Vue.js Masterclass 2 and 3 are included in the Vue School subscription!
  • That’s right, besides the massive amount of lessons you get at Vue School - with new lessons every week - you also get access to the Vue Masterclass.
  • You can watch the original course today and the Vue 3 version in 2021 when we release it!
  • Looking forward to showing you what we’ve been working on and get to build together once again.

More information to come soon! There are thousands official and community plugins, libraries, tools, and even frameworks that extend or give super powers to Vue applications.

Once Vue 3 is released, the entire ecosystem have to follow and develop a new major version to be compatible with Vue 3.

  • The core (official) libraries are planed to release a vue 3 version by the end of 2020.
  • But that’s just for the core libraries that are maintained by the Vue team.
  • There are thousands of Open Source creators out there that have created great libraries for Vue.js we all use every day.
  • What happens with them? They have to put in a lot of time and effort to create a new major version of their project where they code it, improve it, test it, write documentation, and repeat until it is ready to be used in production.

And this is a big responsibility. Vue.js is used in a massive number of websites including some huge organisations like Microsoft, Apple, Google, and Nintendo to name a few.

The Vue 3 API for most Vue developers does not introduce breaking changes.

How to Create Application and Component Instances in Vue 3

But remember it is a complete re-write so plugin and framework developers actually do have to deal with breaking changes to upgrade their projects.

So you can imagine the upgrade process and especially for complex library takes a tremendous amount of time.

And don’t forget, open source creators work on Open Source for free, and as many have full-time jobs they need to make time in their evenings and weekends to work on these upgrades.

So if your company needs to have Vue 3 support for a specific library soon, you should consider supporting the maintainers via Patreon, Open Collective, or GitHub sponsors. InfoQ HomepageNewsVue 2 vs.

How to Define a Component in Vue 3

Vue 3: James Stewart at Vue Glasgow Meetup. James Stewart recently compared the incoming Vue 3 function-based Composition API to the current Vue 2.x class-based Options API.

How to Use the Data Options Object in Vue 3

In a presentation held at the second Vue.js Glasgow meetup event, Stewart analyzed the code from the same application written with both APIs, and concluded that the Vue 3 API leads to better code structuring, and makes the isolation and composition of logic easier than before.

Change of Precedence for v-if/v-for in Vue 3

The Vue 3 Composition API departs from the current Vue 2 class-based API (termed as the Options API), and allows developers to encapsulate and reuse logic in functions, in a way similar to React Hooks, or Svelte 3.

The initial reaction from the developer community included several criticisms of the new API.

How to Use the Emits Property on Component Events in Vue 3 (breaking change/new feature)

Some developers failed entirely to see what was the problem being solved by the API, others complained that the API changes would lead to spaghetti code. Stewart addressed those two criticisms in its presentation by comparing the same application written in Vue 2 and Vue 3.

Addressing the first criticism, Stewart explained that, in his view, hooks are smarter mixins. As a matter of fact, the Composition API and mixins pursue the same goal: encapsulate a set of functionalities for reuse in arbitrary component contexts.

The Composition API, unlike mixins, allows not only to encapsulate logic but also to compose those pieces of encapsulated logic in an arbitrary manner.

A piece of encapsulated logic can itself be built upon another piece of encapsulated logic, and combined within a Vue 3 component to form the desired behaviour of the component.

With respect to the second presented criticism, Stewart also concluded, based on his code example, that organizing logic away from options (as in the Options API) and into functional blocs (as in the Composition API) may be more readable, by forming cohesive groups of logic.

Vue Router v4.x Overview

He gives the following illustration, assigning colors to code parts according to the functionalities they participate in:. The first colored code sample on the left uses the Options API (featuring data, methods and computed properties on the Vue component instance).

Vue Router V4 Breaking Changes

The second colored code sample on the right uses the proposed Vue 3’s Composition API and exposes a single setup function which neatly groups: the source of truth for component data and the variables derived from it (Pet list); the Pet addition logic; and the Pet actions logic.

  • The source codes for the example is available in a dedicated GitHub repository.
  • The official documentation for the Composition API includes a larger example taken from the Vue CLI UI file explorer and reviews in detail how the Composition API affects code organization, with positive and negative implications.

In January of this year, Evan You, Vue’s creator, previewed Vue 3.0, the next major iteration for the Vue.js progressive JavaScript framework.

The Vue 3.0 focused heavily on performance improvements (smaller size of the core, tree-shaking, optimized slots generation, hoisting and inlining, and more).

The Vue Router 4 Instance Has Changed

The early preview quickly mentioned in passing the experimental Vue Hooks API which Sarah Drasner detailed in an article later in February this year.

Later, in June, the experimental Vue Hooks were refined into the Vue Function API and then, in August, further refined and renamed to Vue Composition API, after several nomenclature changes.

Rather than using the term hooks, the official Composition API documentation favours the term composition function.

The Composition API is purely additive and does not affect / deprecate any existing 2.x APIs.

It has been made available as a 2.x plugin via the @vue/composition library. The library’s primary goal is to provide a way to experiment with the API and to collect feedback.

The Vue Composition API remains a work in progress and is subject to future changes till the official release of Vue 3.0. The Composition API will be shipped as built-in in Vue 3.0 and will be usable alongside existing 2.x options.

Vue.js is available under the MIT open-source license. Contributions are welcome via the Vue.js GitHub package and should follow the Vue.js contribution guidelines. ScyllaDB is the database for>. A round-up of last week’s content on InfoQ sent out every Tuesday.

Join a community of over 250,000 senior developers. View an example. Hi all,I’m using vue for last 3 weeks and i ancountered not few difficulties to do it.

Vue 2 so easy as much vue 3 is hard to undestand.All examples seems to be related to simple case into new setup, but the logic of the app is not in the setup but outside many times.I’m spending a lot of time to simply get the element by ref.Vue 2: this.$refs.

How to Migrate a Portfolio Project from Vue 2 to Vue 3

very very simpleVue 3: untill now i didn’t understand how can i get it in the proper way in a component’s method.this.$refs.

returns a Proxy object. Trying to access it with ref(this.$refs.).value doesn’t work. I have tryied to set it into setup using ref(null) and returning it but i cannot access it from method.

I cannot see any complete example with a template and a method that uses it.

  • If you’re starting your journey with Vue.js, you may be wondering what version to learn.
  • On one hand, Vue 2 has been out for years and is already being used by companies all over the world.
  • On the other hand, Vue 3 brings us a faster, more capable library at our fingertips.
  • This article aims to help clarify which version of Vue you should start learning now.

So if you’re wondering whether you should take our Vue 2 or Vue 3 courses, keep reading.

  • The reason we’re taking the time to write this post is because the answer is: it depends.
  • It depends on whether you’re on a team that is using Vue 2 with no near-term plans for migrating to Vue 3.
  • It depends on your timeline and whether your app requires dependencies that aren’t yet compatible with Vue 3.

In situations like these, it might not make sense for you to learn the latest Vue 3 syntax and APIs if you won’t be putting them into practice in your daily work.

Clone the Project Repository

But if you’re in nearly any other situation, our recommendation is to start learning Vue 3.

After all, it is now officially the default version of Vue.js.

Update the Project's CDN

By using it, you’ll be future-proofing your skills to stay relevant with this cutting-edge technology.

You’ll have access to all of the latest and greatest features of an entirely rewritten, more powerful and performant JavaScript framework.

There’s a lot you can learn and create with Vue 3, and we’ve enjoyed recreating our previous Vue 2 courses and upgrading them to teach the new Vue 3 version.

Update the Code

In fact, we have an entire Vue 3 learning path that we developed with Vue Creator Evan You and the Core Team, and are constantly adding new courses and topics to it.

So if you’re in a position to do so, we recommend going this route.

Having said all that, it’s important to understand that there aren’t many differences between the essential syntax of Vue 2 and Vue 3. Vue 3 is rewritten under the hood to operate more smoothly and powerfully, but using Vue 2 and Vue 3 is a very similar (and in many cases identical) process unless you’re using Vue 3 specific features and APIs, like the Composition API and script setup.

With this in mind, whichever version you start with, you’ll quite easily be able to go from one version to the other and back again, if necessary.

If you’re ready to start mastering Vue with a library of guided premium courses, you can get 20% off for a year subscription to our learning platform.

Begin your Vue.js learning journey here.

Vue Router 4 Changes

Above we saw the new syntax to define the root Vue instance component. But now, since we are using the Vue router, we need to take into account its breacking changes too.

Related Sponsored Content

It changed from this:

to this:

The code above deals with two major changes: new VueRouter() has been replaced by VueRouter.createRouter(), and the new history option now replaces mode.

Visit the documentation for Vue Router 4 to find out more.

Finally, let's make our app aware that we are using Vue Router. If we injected the router instance in the Vue app, now we need to instruct it to use the Vue router, use the .use() method to do so, and pass to it the router instance.

Change from this:

to this:

And there you have it!

Conclusion

It doesn't really matter how complex your Vue application is – if you want to migrate to a new major release you will still need to plan for it, read the release notes, and go over all the breaking changes to make sure that you understand what will break.

The more complex the application is and more carefully you should plan your migration.

For our simple application that's all there is to do. But it's not always like that. So get ready and plan in advance.

If you enjoyed this guide please share the article and remember to subscribe to my YouTube channel. Thanks for reading!