Vue 2.6 brings some important improvements, new features and more

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.

The post Vue 2.6 brings some important improvements, new features and more appeared first on JAXenter.