DEV Community

Cover image for Vue 3.0 is out! What can we learn?

Vue 3.0 is out! What can we learn?

maureento8888 profile image Maureen To Updated on ・6 min read

Hey everyone! It's really been a WHILE since I posted a blog post but I'm back after months of developing my passions projects, designing interfaces, and learning lots!

My news these past two days is... I ATTENDED THE VUE.JS GLOBAL ONLINE CONFERENCE!!! Wooo go #vuejsglobal!

News update:

I've been diving into Vue.js for several months now and really coming to love it. Vue.js is by far, my most favourite web framework alongside Nuxt.js (I was going to learn React.js, but that's for another blog post ;)) that is... also has come out with their own updates like Nuxt full static. On top of their newest updates, I'm excited for Nuxt.js because of its built in SEO and pre-rendering capabilities. It's a powerful and all-around beautiful framework to work with straight out of the box 📦.

Either way, the Vue.js Global Online Conference 2020 was a blast getting meeting the hosts and developers of the conference and the Vue ecosystem, the friendly and incredible Vue community, creators of Vue.js and Nuxt.js, and Pink DJ Penguin (don't ask :D). Overall, an amazing experience getting to know some screen-to-screen and looking forward to VueConf Toronto!

WATCH: Evan You's live-streamed Vue 3.0 announcement and nuggets of wisdom

TODAY, Vue.js 3.0.0 (codenamed "One Piece") is officially out!

Cheering excitedly

Now, as excited as I am to binge-learn Vue Mastery on the new features like Composition API, and all the other new features, I wanted to write about how Vue.js released their changes and the way they went about that I feel really sets it apart from other frameworks and release changes. "I know," you say, "It's just another documentation update and new changes to learn", but I think there's some deeper lessons we can learn about how they did went about it.

Vue.js 3.0.0 now comes with a couple deprecations and breaking changes. But don't worry, the Vue Core Team and Evan You have made it clear that there will only be a few breaking changes to make the learning syntax easier for beginners new to Vue 3.0.0. One more reason to love Vue.js!

The Vue Core Team quotes in the v3.0.0 One Piece, "2 years of development efforts, featuring 30+ RFCs, 2,600+ commits, 628 pull requests from 99 contributors[...]"

1. Intuitive Changes

The biggest change to the overall base layout was the deprecation of the Global root element! Finally, we don't need a root <div> element!

Another major change was the creation of the new Global API createApp. Now, instead of the possibility of potentially "polluting" test cases (developers would have needed to restore the original global configuration. See here). Also, there would be no worry of only having multiple app instances with potentially different configurations.

Vue.js new Global API `createApp`

As well, slots have also undergone some changes in Vue 3.0.0 (they originally kept slot and slot-scope attributes for 2.x to reduce issues of breaking syntax for new learners) and will be using the one v-slot directive, condensing the functions of slot and slot-scope attributes.

Here's an overview of the changes Vue has listed on the new documentation:


This shows the care and effort the Core Team went into making these changes known and easy to understand and adopt. There's no BS and no fluff! These decisions were made with developers -- users -- in mind. I know this seems like it's just about documentation, but when we think about this way of communication in situations like our work life and our own communication with others, it's definitely worth it to see how a framework, uplifted by a community and started from humble beginnings, is a key example of how to push across (yes, pun intended!) changes and gather mutual agreements from a community (Evan you explains why/what RFCs for Vue, 11:54 timestamp).

Furthermore, other changes include the deprecation of filters (reason because function was very similar to methods anyway), EventBus (specifically, Vue removed $on, $once, and $off instance methods because to facilitate a more direct flow of data transfer - using "props down, events up").

Another intuitive change to watch out for is the renaming of two lifecycle hooks: destroyed and beforeDestroyed. destroyed is now named unmounted, and beforeDestroyed is now beforeUnmount. This clarifies any confusion in terminology and is more straightforward.

Now, this isn't everything that's changed but these are the major components of Vue that have changed and make it a better carryover from Vue 2. There are template directive changes (again, very intuitive... I'm overusing the word aren't I? :D), component specifications, changes to the render function API and custom elements. Some minor changes include the lifecycle hook renaming, and other specifications related to props, data option, watcher callback triggering, etc. As for migration purposes, Evan You currently recommends we NOT do so until their Migration build's loose ends are tied.

2. Change and Reasons Why

The main thing that struck me about Vue 3's documentation was the clarity on which they proposed and explained new changes. See the following pictures below:

Vue's "thorough" summary of its changes

See how they gave an overview readily available right there? And it's all in order? It precisely guides a developer through what questions they may have and the reasons for why, not just it's changed so accept it. This communication was beautifully executed.

Breaking changes in Vue listed clearly with headings

This above example lists ALL the breaking changes we'd need to know! This is top-notch documentation and shows the meticulousness of the Core Team. I can't think of one person who wouldn't want to read this, even if they're no developer :D. So, just as we communicate our ideas and proposals, we should make effort in being clear and orderly. After looking at Vue's documentation briefly today at Vue.js Global Online Conference hosted by Frontend Love, I will definitely binge read breaking changes after my assignments to prepare for migration!!!

Thank you for reading! As always, here's some links to read up (enjoy with a coffee or tea):

Discussion (0)

Editor guide