Monday, 17 July, 2017 UTC
Summary
Vue 2.4 was just released this week with a number of under-the-hood changes and minor tweaks to fix a few pain points. This release focuses mostly on async components, and making them just work between client and server-side rendering.
New Features There’s not too much new in Vue 2.4, but what has been added will likely be incredibly useful to certain people.
SSR + Async Component Support
Async components now “just work” when rendering via SSR, anywhere in the application. Previously it only worked in vue-router. This required several changes in core to modify the way modules were resolved, so make sure you upgrade vue-loader as well. Handoff and hydration between the server and client with async components also works great now.
SSR Optimization
vue-template-compiler now optimizes server-side bundles by default with special render functions that reduce the templates to be as simple as possible via string concatenation. This can provide up to 8x performance improvements. This can be disabled with the optimizeSSR option in vue-loader.
webpack.config.js (partial)
... rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { optimizeSSR: false } } ], ... Wrapper Component Enhancements
When writing a wrapper component, sometimes you want to pass all props on the wrapper into the child, and receive all events from the child.
To fix part of this problem, Vue has added the reactive instance properties $attrs and $listeners. This allows a wrapper component to be created that simply passes all attributes and listeners down to the child.
For example:
ParentComp.vue
<template> <div class="wrapper"> <child-comp v-bind="$attrs" v-on="$listeners"> </child-comp> <div class="footer"> Stinky feet. </div> </div> </template>To support this, v-on can now take an object with eventname -> handler mappings. This syntax, however, does not support modifiers.
Also, a new component option, inheritAttrs has been added. By setting it to false you can prevent any unknown bindings that are automatically inherited.
Other
- The keep-alive component now supports taking an array of component names for the include and exclude props.
- v-bind=”{object}” now supports the .sync modifier. Vue users everywhere rejoice.
- A comments component option has been added, allowing components to preserve comments when compiling to render functions. This may be useful to you if some library you’re working with relies on comments for one reason or another.
- vm.$watch / Vue.$watch can now use the same format as the component watch: {} option.
- Error handling can now capture errors thrown in custom event handlers.
- Vue.config.warnHandler allows you to add a custom callback for warnings in development mode.
- Over 25 bugs were fixed.
- If your async components suddenly stop working properly, especially with server-side rendering, make sure you’ve upgraded vue-loader to version 13.0.2 or above.
That concludes the changes for Vue 2.4. As the documentation for the new features is expanded, we’ll try to keep this post up-to-date. Enjoy!