In honor of the 5-year anniversary!

Vue 2.6 brings some important improvements, new features and more

Eirini-Eleni Papadopoulou
© Shutterstock / Marish (modified)  

Vue.js just had its 5th anniversary and the team is celebrating with a new release! Today, we’re taking a closer look at Vue 2.6 and its most important changes.

After celebrating Vue’s 5-year anniversary, the team announced the release of Vue 2.6!

As the team is gearing up for 3.0, Vue core 2.x hasn’t received major updates for quite some time now. But it’ time for a change; Vue 2.6 arrives with substantial improvements, new features and a couple of internal changes.

Let’s take a closer look!

All the changes and improvements

To start things off, Slots, an important mechanism that enables flexible component composition in Vue, received some major updates.

  • New syntax: Unifies the usage of normal and scoped slots in a single directive, and enforces more explicit and readable named slots usage. It is also fully compatible with the existing syntax.
  • Performance improvements: Introducing an optimization that further ensures parent scope dependency mutations only affect the parent and would no longer force the child component to update if it uses only scoped slots.
  • There is no more a distinction between scoped vs. non-scoped slots:  All slots will use the same unified syntax, are compiled into the same format, and have the same optimal performance.

Moving on to the rest of the updates we have the following:

Async error handling – Vue’s built-in error handling mechanism (in-component errorCaptured hook and the global errorHandler hook) now also captures errors inside v-onhandlers. In addition, if any of your lifecycle hooks or event handlers perform asynchronous operations, you can now return a Promise from the function so that any uncaught errors from that Promise chain are also sent to your error handlers.

Dynamic directive arguments – Directive arguments can now accept dynamic JavaScript expressions. You can find out more information on this feature here.

Code frame in compiler warning messages – Most template compilation warnings now comes with source range information.

Explicit creation of standalone reactive objects – New global API to explicitly create standalone reactive objects. The resulting object can be used directly in computed properties or render functions and will trigger appropriate updates when mutated.

Data pre-fetching during server side rendering – The new serverPrefetch hook allows any component (instead of just route-level components) to pre-fetch data during server-side rendering, also allowing for more flexible usage and reducing the coupling between data fetching and the router.

ES module build for direct import – Vue 2.6 now also provides an ES Module build that is intended for direct in-browser usage. Find out more information here.

SEE ALSO: Vue.js is the absolute rockstar of the JavaScript ecosystem

Last but not least, there are a couple of significant internal changes we should mention.

  • Reverting nextTick to Microtask: A simpler fix for the original issue, which allows reverting nextTick to consistently use Microtasks in all cases.
  • Functions on this.$scopedSlots now always return Arrays: Scoped slot functions are now guaranteed to return either an Array of VNodes or undefined. This may affect some existing code if it is not properly checking for possible Array return values.

Check out the official release notes for all the relevant information on the new features and the extensive list of fixes.

Eirini-Eleni Papadopoulou
Eirini-Eleni Papadopoulou was the editor for Coming from an academic background in East Asian Studies, she decided that it was time to go back to her high-school hobby that was computer science and she dived into the development world. Other hobbies include esports and League of Legends, although she never managed to escape elo hell (yet), and she is a guest writer/analyst for competitive LoL at TGH.

Inline Feedbacks
View all comments