Skip to content

v2.2.0 Initial D
Compare
Choose a tag to compare
@yyx990803 yyx990803 released this 26 Feb 04:34
· 1897 commits to main since this release
v2.2.0
2a19f91

"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

Assets 2
Loading