Vue.js 2.3.0 Release 正式发布. sync 特性回归

🚀 New

Server-Side Rendering Improvements

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 Improvements

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 Component Improvements

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)

Other Improvements

.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)

🐛 Fixed

• #5238, #5387 fix v-model not syncing for autocomplete / switching focus before confirming composition
• #5318 fix style diffing on cached/slot elements
• #5346 fix keep-alive cache incorrectly pruned with transition mode="out-in"
• #5361 fix Symbol check error in Node 4.x
• #5394 fix duplicate attribute warning when using class and :class together in Edge
• #5398 fix v-model checkbox binding with Array index (@posva via #5402)
• #5464 fix incorrect compiler warning for $delete usage in templates
• #5480 allow slot names to be number 0 (@posva via #5481)
• #5526 fix text inside <script type="x/template"> being unnecessarily decoded
• vue-class-component#87 fix base class lifecycle hook dropped when constructor options are modified before applying global mixin