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!
Buuuttt, my news these past two days is... I ATTENDED THE VUE.JS GLOBAL ONLINE CONFERENCE!!! Wooo go #vuejsglobal! I've been diving into Vue.js for a few months now (partly hence the MIA, sorry!) and really got to love it. If no one knew yet, 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 COMING OUT WITH NUXT 3 SOON!! On top of their newest updates, I'm excited for Nuxt.js because of it's built in SEO and prerendering capabilities. It's a powerful and all-around beautiful framework to work with.
Either way, the Conference was a blast getting to meet 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!
TODAY, Vue.js 3.0.0 (codenamed "One Piece") is officially out!
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[...]"
The biggest change to the overall base layout was the deprecation of the Global root element! Finally, we don't need a root
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.
As well, slots have also undergone some changes in Vue 3.0.0 (they originally kept
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
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 is now named
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,
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.
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:
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.
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):
- Register FREE for VueConf Toronto 2020: https://vuetoronto.com
- Vue 3.0.0 documentation: https://v3.vuejs.org/guide/introduction.html#what-is-vue-js
- Nuxt.js 3 RFCs: https://github.com/nuxt/rfcs
- Again, if you want to start learning Vue.js, Vue Mastery is the best one I use and love: https://www.vuemastery.com