v2.3.0 JoJo's Bizarre Adventure

"It was me, Dio!"

🚀 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

v2.2.6

Fixed

• Fixed a memory leak issue when used with vue-router (vuejs/vue-router#1279)
• #5265 Warn when no getter is provided to a computed property (@kmc059000 via #5267)

v2.2.5

Fixed

• #5191 fix events emitted from updated hook not triggering update (@Kingwl via #5233)
• #5209 fix performance tracing issue
• #5216 fix Vue.set crashing when used on Arrays with non-number key (@pkaminski via #5216)
• #5224 fix v-show not setting inline display property in SSR (@defcc via #5224)
• #5223 fix Array values injected via inject option not reactive (@Kingwl via #5229)
• #5243 trigger warning when mutating injected bindings (@rayrutjes via #5243)
• #5250 fix input[type=password] behavior in IE9 (@ktsn via #5253)

v2.2.4

Fixed

• #5181 fixed 2.2.3 performance tracing regression for nested components with the same name.

v2.2.3

Notable Changes

• Vue.config.performance now defaults to false due to its impact on dev mode performance. Only turn it on when you need it.

Improvements

• Now warns usage of camelCase props when using in-DOM templates. (@CodinCat via #5161)
• Now warns when template contains text outside of root element. (@xujiongbo via #5164)

Fixed

• #5121 parse content in textarea as plaintext (@HerringtonDarkholme via #5143)
• #5146, #5169, #5171 fix v-on .prevent modifier regression when combined with other key modifiers (@Kingwl via #5147)
• #5150 v-bind object should have lower priority than explicit bindings
• #5162 fix custom directive argument fallthrough
• #5174 fix ever-increasing component render time caused by calls to performance.measure in dev mode.

v2.2.2

Fixed

• #5037 ssr: fix JSON file path detection in createBundleRenderer
• #5043 fix provide/inject for falsy values (@znck via #5044)
• #5046 fix v-on .left .right modifiers conflict between keyboard and mouse events
• #5055 handle values with circular reference in v-model bindings
• #5097 default slot should use fallback content when it contains all whitespace nodes
• #5120 fix v-on inline function expression with modifiers

v2.2.1

• Fixed npm package missing .esm dist files.

v2.2.0 Initial D

"Fill'er up. High Octane."

This release contains 31 pull requests from 22 different contributors - thank you!

Upgrade Note

• In addition to vue, make sure to also upgrade vue-template-compiler and vue-loader.

Notable Changes

There are no breaking changes to the public API in this release. However, some internal changes may require adjustments on your part if your code relies on some undocumented behavior in previous versions.

• When using v-for with a component, a key is now required. You will likely see a bunch of "soft warnings" when you upgrade, but this does not affect the current behavior of your app.

• The template parser will now raise errors for tags that are missing matching closing tags. Although a tag without matching closing tag is vaild in HTML5, it is most of the time an unintentional mistake, and can lead to subtle bugs. This check does not work for in-DOM templates because the HTML string is already normalized by the browser before being passed to Vue's parser.

• Props and computed properties are now defined on a component's prototype instead of as self properties on each instance. This avoids many calls to Object.defineProperty and improves component initialization performance. This will only affect you if you rely on hasOwnProperty checks on props and computed properties, which should be extremely rare, but we are documenting it here to be explicit about the change. (relevant commits: 406352b, e870e6c)

• If you previously relied on try...catch for handling possible errors in component lifecycle hooks, the errors will no longer be thrown directly. However, you can use the global Vue.config.errorHandler to intercept and handle those errors.

• Many exposed methods and properties on Vue.util have been removed. If you previously relied on them, you should migrate off of them since this object is intended for internal use only - it is not (and has never been) considered part of the public API and may change without notice in the future.

• The default export used by Webpack 2 will now point to an ES module build (dist/vue.runtime.esm.js). This means without any alias configuration, require('vue') in webpack 2 will give you an object ({ __esModule: true, default: Vue }) instead. You should only use import Vue from 'vue' with webpack 2.

  Also see updated dist files information for more details.

  For TypeScript + webpack 2 users: the new default ES module export will no longer work with import Vue = require('vue') - please see updated TypeScript integration docs for more details.

New

Server-Side Rendering Improvements

• New renderer option: template. Allows passing in a template for the entire HTML page. Docs
• bundleRenderer now accepts a special bundle object generated by vue-ssr-webpack-plugin. Using the new bundle format seamlessly supports webpack code splitting and source maps. Docs
• There are also related improvements in vue-router and vue-style-loader which together makes SSR + code splitting very straightforward - stay tuned for a detailed writeup.

Error Handling Improvements

• Errors thrown in component lifecycle hooks and watcher getter/callbacks no longer crash the entire app. These errors are now also forwarded to Vue.config.errorHandler, if provided.

• New option: renderError. A separate render function that will be used when there's an error in the default render function. Receives the error as the second argument.

  new Vue({
    render (h) {
      throw new Error('oops')
    },
    renderError (h, err) {
      return h('pre', { style: { color: 'red' }}, err.stack)
    }
  }).$mount('#app')

Component v-model Customization

• Previously, v-model on a custom component defaults to use value as the prop and input as the event. This places some restrictions when authoring custom input components that resembles checkboxes or radio inputs. In 2.2 you can customize the props/event pair using the new model component option:

  Vue.component('my-checkbox', {
    model: {
      prop: 'checked',
      event: 'change'
    },
    props: {
      // this allows using the `value` prop for a different purpose
      value: String
    },
    // ...
  })

  <my-checkbox v-model="foo" value="some value"></my-checkbox>

  The above will be equivalent to:

  <my-checkbox
    :checked="foo"
    @change="(val) => { foo = val }"
    value="some value">
  </my-checkbox>

Provide & Inject

• The new provide and inject options provide similar functionality to React's context feature:

  const Provider = {
    provide () {
      return {
        foo: 'bar'
      }
    }
  }
  
  const Consumer = {
    inject: ['foo']
  }

  Now as long as Consumer is instantiated in the descendant tree of Provider, it will get foo injected into it (this.foo === 'bar'). This is a feature mostly intended for advanced usage by plugin / component library authors and should be used with caution.

  Special thanks to the discussion in #4029 and the community implementation (https://github.com/spatie/vue-expose-inject).

  More details in docs

Other Improvements

• The production mode tip on startup can now be turned off by setting Vue.config.productionTip = false.

• A component's current props are now also exposed on this.$props. (@yantene via #4848)

• <transition> and <transition-group> now accepts explicit transition durations via the new duration prop: (@Akryum via #4857)

  <!-- same duration for enter/leave -->
  <transition :duration="500">
  
  <!-- different duration for enter/leave -->
  <transition :duration="{ enter: 300, leave: 500 }">

• New config: Vue.config.performance. Setting it to true traces component init, compile, render and patch time in the browser devtool timeline. Only available in dev mode.

• <keep-alive>: activated and deactivated now fires for all components inside an activated/deactivated tree.

• vm.$on() now supports registering the same callback for multiple events using vm.$on([eventA, eventB], callback) (@Kingwl via #4860)

• v-on new mouse event modifiers: .left, .right, .middle. Example: <button @click.right="onRightClick"> (@Kingwl via #4866)

• vue-template-compiler: parseComponent result now also includes the attrs for each block. (@zephraph via #4925)

• Vue.delete now also supports Arrays: Vue.delete(arr, index) (@Hanks10100 via #4747)

Fixed

• #4749 (keep-alive) handle invalid include/exclude values [458671b]
• #4753 (parser) fix infinite loop when parsing elements that contains < only (@dhcmrlchtdj via #4753) [938fa4e]
• #4755 (v-model) handle dynamic <select multiple> bindings (@defcc via #4756) [9e38abc]
• #4758 (parser) preserve only whitespace child in <pre> tags (@defcc via #4760) [e02fb12]
• #4767 (core) ensure mutating extended constructor options does not affect parent [769c4dc]
• #4774 (core) fix replaced component root nodes losing parent scopeId [90a455c]
• #4779 (slots) fix scoped slots with dynamic slot names [e7083d0]
• #4796, #4896 (v-model) fix v-model + @change behavior inconsistency in different browsers [8e854a9]
• #4797 (parser) avoid double-decoding on attribute value (@jddxf via #4797) [d14bd64]
• #4813 (parser) fix SVG foreignObject regression (@zephraph via #4926) [0201d8c]
• #4838 (filter) fix filter parsing error for division operator (@rixlabs via #4844) [7259aef]
• #4846 (v-on) fix .once with other modifiers that prevent execution of a handler [05c769b]
• #4855 (v-model) fix <select multiple> binding with undefined value (@posva via #4859) [ec7fca8]
• #4863 (transition) trim transition class whitespace (@hashplus via #4863) [8bf5af8]
• #4872 (core) fix props default value factory function when running application code in different realm (@HerringtonDarkholme via #4928) [01151ce]
• #4900 (transition) fix transition-group move transition detection [6977109]
• #4936 (ssr) bundleRenderer should resolve require() calls relative to bundle location. [8d88512]
• #4950 (core) warn when defining a method with same name as a prop (@chriscasola via #4950) [3dc9338]
• #4976 (core) properly handle cosntructor options modification before global mixin [4cf4982, 7fa8fa7]
• #4985 (transition) fix transition appear class fallback [7d3309d]
• #4990 (core) fix memory leak in directives with componentUpdated hook [2a5fb41]
• vuejs/vue-loader#628 (parser) fix parser hanging on trailing ill-formatted brackets [a0a619f...

v2.1.10

Fixed

• fix <transition> render error when the wrapped component uses a non-string key.

v2.1.9

Fixed

• #3433, #4445, #4511 avoid parsing error when being bundled via Browserify (@arielpachara via #4646)
• #4590 handle component root patch edge case
• #4599 ensure updated hook is called after child components are updated
• #4620 fix checkboxes that are in-focus not updating on data change (@defcc via #4639)
• #4633 fix keep-alive with dynamic include/exclude patterns
• #4650 fix single -> array & array -> single event handler patching
• #4655 fix v-on .once on multiple elements
• #4658 fix input with static value bindings being reset on component update
• #4693 support calling $mount in created again
• #4702 fix leave transition ending early when multiple custom transition components are used together