๐ New Server-Side Rendering Improvements"It was me, Dio!"
Note: We have created a brand-new standalone guide for server-side rendering in Vue, it's a recommended read for all users. Also, the HackerNews demo has been updated to reflect the latest best practices.
Now uses the data-server-rendered attribute to indicate server-rendered markup, making the output valid HTML.
template option now supports simple interpolation using the render context. This allows the template to be dynamic based on the data attached to the context by rendered components.
See docs for more details.
New bundleRenderer option: runInNewContext
Defaults to true, which preserves the original behavior.
When set to false, the renderer will no longer re-execute the entire bundle in a new vm context for each render. Instead, only the function exported by the bundle will be called again. This greatly improves performance, but requires some changes in source code structure.
See docs for more details.
New bundleRenderer option: clientManifest
By passing the bundleRender a client webpack build manifest generated by vue-server-renderer/client-plugin, the renderer can infer the proper build assets that need to be preloaded (e.g. code-split async chunks, images, and fonts). When using together with the template option, <link rel="preload/prefetch"> and appropriate <script> tags will be injected automatically.
See docs for more details.
vue-ssr-webpack-plugin is now deprecated, instead, it is now part of vue-server-renderer. It now also exposes two plugins - one for the server build and one for the client build.
var VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
var VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
See docs for more details.
Async component factories can now return an object of the following format:
const AsyncComp = () => ({
// The component to load. Should be a Promise
component: import('./MyComp.vue'),
// A component to use while the async component is loading
loading: LoadingComp,
// A component to use if the load fails
error: ErrorComp,
// Delay before showing the loading component. Defaults to 200ms.
delay: 200,
// The error component will be displayed if a timeout is provided and exceeded.
timeout: 3000
})
Note that when used as a route component in vue-router, these properties will be ignored because async components are resolved upfront before the route navigation happens. You also need to update vue-router to 2.4.0+ if you wish to use the new syntax for route components.
Functional components can now omit the props option. All attributes will be automatically extracted and exposed as camelized props on context.props.
Note when the props option is provided, it will retain the old behavior - i.e. only explicitly declared props will be extracted.
v-on listeners attached to a functional component will be exposed as context.listeners. This is simply an alias to context.data.on.
Combined with the props change, functional components usage can be much cleaner:
const MyComp = {
functional: true,
render (h, { props, listeners }) {
return h('div', {
on: {
click: listeners.click // proxy click listener
}
}, [
props.msg // auto extracted props
])
)
}Functional components now also support the inject option. Injected properties are exposed as context.injections. (@Kingwl via #5204)
.sync is back! However it now is simply syntax sugar that expands into a prop + listener pair, similar to v-model.
The following
<comp :foo.sync="bar"></comp>
is expanded into:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
For the child component to update foo's value, it needs to explicitly emit an event instead of mutating the prop:
this.$emit('update:foo', newValue)Warnings now include component hierarchy traces.
Vue.config.errorHandler now also handles error thrown inside custom directive hooks (@xijiongbo via #5324)
Vue.config.errorHandler now also handles error thrown in nextTick callbacks.
New v-on modifier: .passive - adds the event listener with { passive: true }. (@Kingwl via #5132)
Props validation now supports type: Symbol.
style bindings now support using an Array to provide multiple (prefixed) values to a property, so the following would be possible (@fnlctrl via #5460):
<div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">An extended component constructor can now also be used as a mixin. (@ktsn via #5448)
v-model not syncing for autocomplete / switching focus before confirming compositionclass and :class together in Edgev-model checkbox binding with Array index (@posva via #5402)0 (@posva via #5481)<script type="x/template"> being unnecessarily decodedRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4