Vue 2.6 brings some important improvements, new features and more
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.
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.
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.
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
nextTickto consistently use Microtasks in all cases.
- Functions on
this.$scopedSlotsnow 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.