Vue 2.6 is now out with a new unified syntax for slots, and more

On the eve of Vue’s fifth anniversary yesterday, its creator, Evan You, announced the release of Vue 2.6. This version, which goes by the name “Marcoss”, comes with a new syntax for slots usage and also few performance improvements, internal changes, and more.

Following are some of the highlights in Vue 2.6:

A new syntax for slots usage

Vue provides the slots feature to enable flexible component composition. Vue 2.6 introduces a new unified syntax for named and scoped slots usage. The new directive v-slot combines slot and slot-scope, which are now deprecated, in a single directive syntax.

This update is fully backward compatible. According to the RFC, slot-scope will be soft-deprecated. This means that it will be marked deprecated in the docs and developers will be encouraged to use the new syntax, but no deprecation messages will be shown for now. The team is planning to eventually remove slot-scope in Vue 3.0.

Performance improvements in slots

The rendering of normal slots happens during the parent’s render cycle, hence, when the dependency of a slot changes, it causes both the parent and child components to re-render. This version comes with an optimization to avoid this re-rendering and ensure that the parent scope dependency mutations only affect the parent. Now, the child component will not be forced to update if it uses scoped slots.

If you use the new v-slot syntax, then the slots will be compiled into scoped slots. This essentially means that all slots will get the performance advantage that comes with scoped slots.

Normal slots are now exposed on this.$scopedSlots as functions. Developers using the render functions instead of templates can now always use this.$scopedSlots, without having to worry about the type of slots being passed in.

Async error handling in Vue

Vue’s error handling mechanism, which includes in-component errorCaptured hook and the global errorHandler hook, now also capture errors inside v-on handlers. Additionally, if any of your life cycle hooks or event handlers perform asynchronous operations, you can now return a Promise from the function. This will ensure that any uncaught error from that Promise chain is also sent to your error handlers.

Data pre-fetching during server-side rendering

This version comes with a new serverPrefetch hook that enables any component, except route-level components, to pre-fetch data during server-side rendering. This is introduced to allow more flexible usage and reduce the coupling between data fetching and the router.