v2.1.8

Changes

• The transition behavior change introduced in 2.1.7 has been reverted. All transitions that worked in 2.1.6 and earlier should work exactly the same in 2.1.8.

• In order to properly solve #4510, a new type of transition class (-to) is introduced. Now for each transition phase (enter, leave, appear) there are three classes. For example for a leaving transition:

  • v-leave: the starting state for the transition;
  • v-leave-to: the ending state for the transition;
  • v-leave-active: applied across the entire transition duration.

  Both v-leave and v-leave-active behave exactly like before. The only difference between v-leave-to and v-leave-active is that it is applied one frame after the transition starts.

  The reason for this is that enter transitions are triggered by the removal of v-enter, which is also one frame after the transition starts. So using v-leave-to instead of v-leave-active ensures that enter and leave transitions triggered at the same time also start in the exact same frame. The class name also more correctly express what it represents.

  All previous transition code will continue to work, but from now on it is recommended to use v-leave-to to indicate leaving transition end state.

Fixed

• #4545 fix dynamic transition type for higher-order transition components
• #4560 fix hydration error when interpolated text contains CRLF
• #4564, #4584, #4589 fix regression patch error for elements containing both components and <slot> (@defcc via #4572)
• #4576 fix enter transition flicker regression
• #4586 fix checkbox v-model checked state for non-boolean values

v2.1.7

🎄 Happy Holidays! 🎄

Potential Required Actions

In order to fix certain bugs, we had to introduce a few minor behavior changes:

• If you are the author of a plugin/component that ships a pre-compiled dist file:

  It is recommended to re-compile the dist file using the latest versions of vue-template-compiler and vue-template-es2015-compiler. The new generated code is backwards-compatible, but code generated by older versions of the compilers may not work properly with the latest runtime.

  Code generation changes that affect compatibility are very rare and we will avoid introducing similar changes in future patch releases.

• If you use <transition-group>'s move animation feature:

  When fixing #4510 (ensure leave transitions and enter transitions triggered by the same state change are started in the same frame), we had to move the application of the v-enter-active and v-leave-active classes to one frame after the application of v-enter and v-leave. This should not affect existing usage of <transition>, however if you are using <transition-group> for moving animations, there is a minor adjustment required: you need to now add position: absolute to both v-leave and v-leave-active (previously only v-leave-active is sufficient). See updated moving animation example.

Improvements

• Improved stateful components instantiation performance by ~30%.
• From version 2.1.7 and up, you can directly use the CDN link https://unpkg.com/vue for the standalone build.

Fixed

• #4472 fix functional component multiple root nodes regression
• #4478 fix SVG foreignObject namespace regression
• #4484 unbind v-show if no longer present during patch
• #4494 ensure value for <option> is always updated (@defcc via #4505)
• #4497 fix v-for behavior with string value (@posva via #4499)
• #4510 ensure leave transitions and enter transitions triggered by the same state change are started in the same frame
• #4514 fix v-model selected value update between 0 and "" (@defcc via #4528)
• #4518 change Vue.config.ignoredElements default value to be consistent with docs (@semenyukdmitry via #4518)
• #4521 avoid checked state being overwritten before change event trigger
• #4529 support v-bind object syntax on scoped slots
• #4530 fix special attributes (e.g. value) patching error when switching between dynamic and static bindings
• #4533 fix hydration error caused by empty text nodes between v-if conditions
• #4535 fix node removal error when patching elements with v-text (@defcc via #4548)
• #4538 avoid casting empty string to Boolean when a prop expects both String and Boolean types (@fliptheweb via #4539)

v2.1.6

Fixed

• #4464 fix 2.1.5 regression for v-else + v-for
• #4466 fix 2.1.5 regression for boolean value in children arrays (@defcc via #4468)

v2.1.5

Improvements

• Small across-the-board performance improvement for render functions compiled from templates. They now skip the normalization of nested children arrays based on information inferred from the templates at compile time.

Fixed

• #4369 value should be bound as a DOM property for <select>
• #4391 fix IE9 radio input value
• #4392 avoid v-model with .trim/.number updating value when in focus (@defcc)
• #4393 fix template-nested v-if patch error
• #4415 fix filter parsing for divisions
• #4418 fix transition v-show display toggle timing for enter hooks
• #4432 fix v-bind.prop parse logic (@defcc via #4435)
• #4434 ensure local assets is prioritized regardless of naming convention

v2.1.4

Improvements

• Added typings for 2.1 features (@ktsn via #4305)
• New v-on modifier: .once (@KingMario via #4267)
• config.keyCodes now support Array values for mapping an alias to multiple keyCodes. (@defcc via #4328)
• Modifier key modifiers (.ctrl, .alt, .shift and .meta) now also work for KeyboardEvents.

Fixed

• #4304 fix in-browser detection in jsdom + Node 7
• #4306 fix static style bindings that contains !important
• #4315 fix incorrect context for slot content created in functional components
• #4339 fix keep-alive child component root transition
• fix stateful transition wrapper component as child component root

v2.1.3

Fixed

• Fixed version mismatch between vue and sub packages

v2.1.2

Fixed

• #4300 proxy detection regression for transition components

v2.1.1

Fixed

• fix non-existent property reference detection after vue-loader code generation change
• #4284 fix instance root node patching edge case (@HerringtonDarkholme via #4299)
• #4288 fix v-once nodes losing child reference after patch
• #4289 vue-template-compiler: fix single-file components nested <template> parsing error

v2.1.0 Hunter X Hunter

"You should enjoy the little detours to the fullest. Because that's where you'll find the things more important than what you want." - Ging Freecss

This is a pretty long releaes note - see a version with linkable TOC here

New Features

Scoped Slots

A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.

In a child component, simply pass data into a slot using normal prop syntax:

const Child = {
  data () {
    return { msg: 'hello from child' }
  },
  template: `
    <div class="child">
      <slot :text="msg"></slot>
    </div>
  `
}

In the parent, a <template> element with a special attribute scope indicates that it is a template for a scoped slot. The value of scope is the name of a temporary variable that holds the props object passed from the child:

const Parent = {
  components: { Child },
  template: `
    <div class="parent">
      <child>
        <template scope="props">
          <span>hello from parent</span>
          <span>{{ props.text }}</span>
        </template>
      </child>
    </div>
  `
}

If we render the above, the output will be:

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

The equivalent in raw render functions would be:

const Child = {
  data () {
    return { msg: 'hello from child' }
  },
  render (h) {
    return h('div', { class: 'child' }, [
      // <slot :text="msg"></slot>
      this.$scopedSlots.default({ text: this.msg })
    ])
  }
}

const Parent = {
  render (h) {
    return h('div', { class: 'parent' }, [
      h(Child, {
        // pass scopedSlots in the data object
        // in the form of { name: props => VNode | Array<VNode> }
        scopedSlots: {
          default: props => [
            h('span', 'hello from parent'),
            h('span', props.text)
          ]
        }
      })
    ])
  }
}

Notice how the scoped slot is simply a function under the hood.

A more typical use case for scoped slots would be a list component that allows the component consumer to customize how each item in the list should be rendered:

<my-awesome-list :items="items">
  <!-- scoped slot can be named too -->
  <template slot="item" scope="props">
    <li class="my-fancy-item">{{ props.text }}</li>
  </template>
</my-awesome-list>

And the template for the list component:

<ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- fallback content here -->
  </slot>
</ul>

Conditional Keep Alive

<keep-alive> can now be configured to conditionally cache components using the new include and exclude props. Both props can either be a comma-delimited string or a RegExp:

<!-- comma-delimited string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- regex (use v-bind) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

The match is first checked on the component's own name option, then its local registration name (the key in the parent's components option) if the name option is not available. Anonymous components cannot be matched against.

v-else-if

A new directive v-else-if is introduced, and it works as you might have expected:

<div v-if="type === 'a'">A</div>
<div v-else-if="type === 'b'">B</div>
<div v-else>C</div>

Previously, if you write a template with multiple root-level elements with v-if on each, you would receive a warning from the compiler. However, with v-else-if it will be fine because now the compiler can safely infer that there will only be one root-level element:

Vue.component('example', {
  // no more warnings!
  template: `
    <div v-if="type === 'a'">A</div>
    <div v-else-if="type === 'b'">B</div>
    <div v-else>C</div>
  `
})

Relaxed Filter Usage

Filters are now also supported in v-bind expressions (in addition to text interpolations):

<img v-bind:src="imgSrc | formatURL">

<!-- shorthand -->
<img :src="imgSrc | formatURL">

Misc

• nextTick now returns a Promise if no callback is provided and Promise is supported in the environment (@chrisvfritz via #3967).

• New mouse event modifiers for v-on: .ctrl, .alt, .shift and .meta. (@KingMario via #4034)

• v-bind now supports the .camel modifier (previously available in 1.x). This modifier allows camelizing a v-bind attribute name when using in-DOM templates, e.g. the SVG viewBox attribute:

  <svg :view-box.camel="viewBox"></svg>

  It is not needed if you are using string templates, or compiling with vue-loader/vueify.

Dist Files Adjustments

Starting in 2.1.0, the following changes are applied to files in dist directory:

• The old vue.common.js is now renamed to vue.runtime.common.js. (So is the main field in package.json)
• The new vue.common.js now contains a different build that targets CommonJS/bundler environments but includes the compiler.

The difference between dist/vue.js and the new dist/vue.common.js is that the former is hard-coded in development mode, while the latter can be in either mode depending on the environment variables injected by the build tools.

See a more detailed explanation here, or read below to see if you need to do anything.

What does this mean?

• First, nothing will break because of these changes. You can upgrade first.

• If you've been using the runtime-only build, no further action is needed.

• If you've been using the standalone build by configuring the Webpack alias, it's recommended to make the following change to benefit from slightly better perf and smaller file size (only do this after upgrading to 2.1.0):

  // before
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.js'
    }
  }
  
  // after
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.common.js'
    }
  }

[email protected]

vue-loader gets a breaking release with the following changes:

• vue-template-compiler is now a peer dependency instead of a direct dependency. This allows the user to pin vue-template-compiler to a specific version instead of relying on the implicit upgrades from a semver caret range.
• templateBuble option is merged with the buble option. This means the template expressions will be using the same Buble configuration with buble-loader (if present).

In addition, all Buble base transforms are now enabled by default for template expression, including arrow functions and parameter destructuring (Note: the following examples all require Vue core ^2.1.0):

<!-- arrow functions in v-on handlers -->
<button @click="e => log(e)"></button>

<!-- destructuring in v-for -->
<li v-for="{ id, text } in items">
  {{ id }} {{ text }}
</li>

<!-- destructuring in scoped slots -->
<my-component>
  <template scope="{ id, text }">
    <span>{{ id }} {{ text }}</span>
  </template>
</my-component>

JSX Improvements

• Using a function as children is now treated as the default scoped slot (note this requires Vue core 2.1.0):

  // in parent
  render (h) {
    return (
      <child>
        {props => <span>{props.text}</span>}
      </child>
    )
  }
  
  // in child
  render (h) {
    return (
      <div>
        {this.$scopedSlots.default({ text: 'hello' })}
      </div>
    )
  }

• babel-plugin-transform-vue-jsx now also supports camelCase style props:

  // before
  return <button on-click={this.onClick}></button>
  
  // can now also be written as:
  return <button onClick={this.onClick}></button>

  Note this change has a small implication if you have components that expects props like onChange: previously onChange will be passed down as a prop, but now it will be treated as a listener (v-on:change). All you need to do is instead of calling the prop function (this.onChange()), emit an event instead (this.$emit('change')). Your component's usage will remain the same to external consumers.

vue-server-renderer

• No longer requires explicitly setting process.env.VUE_ENV=server. When vue-server-renderer is used, this flag is now automatically enabled.

vue-template-compiler

• parseComponent now also exposes custom language blocks in *.vue files in addition to <script>, <style> and <template>. See #4157 for more details.

Fixed

• #4268 properly handle unicode newlines /u2028 and /u2029 in templates
• #4266 fix dropping scoped CSS after global mixin application when exporting constructors in single file components (@ktsn via #4274)

v2.0.8

Fixed

• #4227 fix style binding removal on reused nodes (@defcc via #4235)
• #4233 only treat form bindings as domProps on specific elements
• #4236 fix watcher firing unnecessarily for NaN values
• #4237 fix kept-alive components not getting updated props when re-activated
• #4239 fix transition-group move class when no name prop is provided (@decademoon)
• #4247 fix v-html resetting content even when content string stays the same
• #4253 fix duplicate ref + v-for when used with async components