v2.0.0-beta.6

Breaking Changes

• vnode data: staticAttrs is removed to ensure proper updates in certain edge cases. This change does not affect the static tree optimization. When authoring render functions, just use attrs.

Fixed

• fix class update edge cases when the new vnode doesn't contain any data
• #3329 allow 2 root nodes with v-if and v-else in template (@chrisvfritz)
• #3334 fix value binding with value of 0 (@ktsn)
• #3341 fix whitespace preservation inside <pre>
• #3354 fix v-show transition when the transition component is used inside the child component template
• #3360 fix patch error when a node with v-html or v-text also has inner content in template.
• #3365 fix class merging between multiple nested components sharing the same element
• #3367 fix vnode children not evaluated correctly when the children is nested thunk (@chrisvfritz)

v2.0.0-beta.5

New

• Added type prop for <transition> and <transition-group> . This is equivalent to the type option for 1.x transition definitions. Accepted values are "transition" or "animation".
• vue-template-compiler and vue-server-renderer packages will now verify if they have the same version with vue (if installed via npm). This prevents users from upgrading Vue but forgetting to update these packages as well.

Fixed

• #3325 fix hoisted static nodes causing incorrect DOM updates
• #3327 fix attribute decoding regression in 2.0.0-beta.4
• fix vue-loader image src rewrite bug caused by [email protected]/4

v2.0.0-beta.4

Fixed

• Fixed functional components with props causing wrapped components to lose reactivity
• Fixed transition appear check for nested components
• #3324 Fixed HTML tags in inline expression string literals being stripped

v2.0.0-beta.3

New

• When used on a component, v-on can use the .native modifier to listen to native DOM events instead of component events:

  <my-comp @click.native="onClick"></my-comp>

  When using render functions, native event handlers need to be nested under nativeOn instead of on in vnode data:

  render (h) {
    return h('my-comp', { nativeOn: { click: () => { ... }}})
  }

• v-bind can now be used to bind to DOM properties instead of attributes with the .prop modifier:

  <div :text-content.prop="text"></div>

  The modifier also works for object v-bind, which will probably be more readable:

  <div v-bind.prop="{ textContent: text }"></div>

• Functional components can now also accept slots. However, the slots are lazy evaluated - they are only resolved when you call the context.slots() function:

  Vue.component('example', {
    functional: true,
    render (h, ctx) {
      const slots = ctx.slots()
      slots.default // <-- access slot content like vm.$slots
    }
  })

Breaking Changes

• Vnode data format change: now uses the domProps nested object for binding to DOM properties (instead of props):

  render (h) {
    h('div', { domProps: { innerHTML: '...' }})
  }

  The props object is now only used for binding component props.

• User watchers created via vm.$watch are now fired before component re-renders. This gives the user a chance to further update other state before the component re-render, thus avoiding unnecessary updates. For example, you can watch a component prop and update the component's own data when the prop changes.

  To do something with the DOM after component updates, just use the updated lifecycle hook.

Fixed

• Fixed some edge cases in <transition-group> move animations.
• Fixed non-functional transition wrapper components not updating properly.
• Fixed client-side hydration failed check for elements with v-html/v-text.
• #3296 incorrect unknown element warning

v2.0.0-beta.2

Breaking Changes

Transition API Change

Unfortunately, we have to make some breaking changes to the transition API to ensure it works as expected in all cases when combined with the virtual-dom rendering layer. The good news is that the new API makes transition effects more declarative and flexible, and brings in a few new features.

• The <transition> component

  All single-element transition effects are now applied by wrapping the target element/component with the <transition> built-in component. This is an abstract component, which means it does not render an extra DOM element, nor does it show up in the inspected component hierarchy. It simply applies the transition behavior to the wrapped content inside.

  The simplest usage example:

  <transition>
    <div v-if="ok">toggled content</div>
  </transition>

  The component defines a number of props and events that maps directly to the old transition definition options:

  Props

  • name: String

    Used to automatically generate transition CSS class names. e.g. name: 'fade' will auto expand to .fade-enter, .fade-enter-active, etc. Defaults to "v".

  • appear: Boolean

    Whether to apply transition on initial render. Defaults to false.

  • css: Boolean

    Whether to apply CSS transition classes. Defaults to true. If set to false, will only trigger JavaScript hooks registered via component events.

  • mode: String

    Controls the timing sequence of leaving/entering transitions. Available modes are "out-in" and "in-out"; defaults to simultaneous.

  • enterClass, leaveClass, enterActiveClass, leaveActiveClass, appearClass, appearActiveClass: String

    Individually configure transition CSS classes.

  Example applying transition to dynamic components:

  <transition name="fade" mode="out-in" appear>
    <component :is="view"></component>
  </transition>

  Events

  Corresponds to the JavaScript hooks available in 1.x API.

  • before-enter
  • enter
  • after-enter
  • before-leave
  • leave
  • after-leave
  • before-appear
  • appear
  • after-appear

  Example:

  <transition @after-enter="transitionComplete">
    <div v-show="ok">toggled content</div>
  </transition>

  When the entering transition completes, the component's transitionComplete method will be called with the transitioned DOM element as the argument.

  Difference from beta.1

  The second vm argument has been removed, since now the hooks must be component methods and naturally has access to the owner component's this context. For enter and leave hooks, the presence of cb as the second argument indicates the user wants explicit control of the ending timing of the transition.

• The <transition-group> component

  All multi-element transition effects are now applied by wrapping the elements with the <transition-group> built-in component. It exposes the same props and events as <transition> does. The difference being that:

  1. Unlike <transition>, <transition-group> renders a real DOM element. By default it renders a <span>, and you can configure what element is should render via the tag prop. You can also use it with the is attribute, e.g. <ul is="transition-group">.
  2. <transition-group> does not support the mode prop.
  3. Every child in a <transition-group> must be uniquely keyed.

  Example:

  <transition-group tag="ul" name="slide">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </transition-group>

  Moving Transitions

  <transition-group> supports moving transitions via CSS transform. When a child's position on screen has changed after an updated, it will get applied a moving CSS class (auto generated from the name prop or configured with the moveClass prop). If the CSS transform property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the FLIP technique.

  See a live demo here.

• Creating Reusable Transitions

  Now that transitions are applied via components, they are no longer considered an asset type, so the global Vue.transition() method and the transition option are both deprecated. You can just configure the transition inline with component props and events. But how do we create reusable transition effects now, especially those with custom JavaScript hooks? Well, the answer is creating your own transition components (they are particularly suitable as functional components):

  Vue.component('fade', {
    functional: true,
    render (createElement, { children }) {
      const data = {
        props: {
          name: 'fade'
        },
        on: {
          beforeEnter () { /* ... */ }, // <-- Note hooks use camelCase in JavaScript (same as 1.x)
          afterEnter () { /* ... */ }
        }
      }
      return createElement('transition', data, children)
    }
  })

  You can then use it like this:

  <fade>
    <div v-if="ok">toggled content</div>
  </fade>

Fixed

• #3259 fix slot names incorrectly passed down to nested children
• Fix incorrect component warning for <body> and <aside> (@tommyZZM)

v2.0.0-beta.1

Vue 2.0 is now in beta phase!

This means the API and feature set is now considered complete, and we will try our best at avoiding further breaking changes until the official 2.0 release. The team will now focus on stability, documentation and updating supporting libraries e.g. vue-router to work with 2.0.

Note: if you are upgrading from a previous 2.0-alpha and using vue-loader or vueify, make sure to fully re-install your npm dependencies.

Changes from 2.0.0-alpha.8

Fixed

• #3176 fix v-for list update edge case
• #3179 fix v-model on component value always casted to string
• various other internal stability fixes

Breaking Changes

• Custom directive change:

  • update hook will now always be called when the component is updated. This makes the lifecycle more consistent with the new rendering model. The user can simply check for binding.value !== binding.oldValue to persist the old behavior, or always perform the update (e.g. when the directive is bound to an object that might be mutated instead of replaced).
  • hook naming change: postupdate -> componentUpdated.

• Transition hooks naming change (now same with 1.x):

  • onEnter -> enter
  • onLeave -> leave

• Server-side rendering:

  • The component-level caching option server.getCacheKey is renamed to serverCacheKey (no longer necessary to nest under the server block):

    export default {
      // ...
      serverCacheKey: props => props.item.id
    }

  • createRenderer and createBundleRenderer no longer uses lru-cache as the default cache implementation. The user is now responsible for providing the cache implementation which should adhere to the following interface:

    {
      get: (key: string, [cb: Function]) => string | void,
      set: (key: string, val: string) => void,
      has?: (key: string, [cb: Function]) => boolean | void // optional
    }

    For more details, see docs for SSR caching.

• Functional component render function signature change:

  The first argument is still h which is $createElement bound to the parent instance. Everything else is now passed in the second argument which is a context object:

  export default {
    functional: true,
    render (h, context) {
      // extracted and validated props for the functional component itself
      context.props
  
      // raw data for the functional component's vnode
      // without extracted props
      context.data
  
      // **a function** that returns the child elements
      // nested inside the functional component's tag
      context.children
  
      // the parent component instance
      context.parent
    }
  }

  This avoids having to remember the argument order and makes it easier when you only need some of the arguments:

  export default {
    functional: true,
    render (h, { data, children }) {
      // simple identity higher-order component
      return h(SomeOtherComponent, data, children)
    }
  }

  Notably, context.children is now a function instead of already resolved children Array. This is because in most cases when you create a higher-order-component, you will be passing the children function down directly so that it can be invoked in the proper component for better dependency tracking.

v2.0.0-alpha.8

Fixed

• vdom edge case patch error
• keep-alive incorrectly destroying child components of inactive component
• dependencies for vue-server-renderer

v2.0.0-alpha.7

Breaking Changes

• The init lifecycle hook has been renamed to beforeCreated.

• JavaScript transition hooks now receive the context Vue instance as the second argument:

  Vue.transition('example', {
    onEnter (el, vm) {
      // ...
    }
  })

New

• $createElement can now omit the data argument if no data is needed. If the second argument is truthy and is not an Object, it will be treated as the children.

  render (h) {
    // before
    return h('div', null, 'hello')
    // after
    return h('div', 'hello')
  }

• SSR: Now supports bundle renderer, which runs a pre-bundled app script in a fresh context for each render. This eliminates the need for structuring your application without global state just for the sake of server-side rendering.

• SSR: Now supports component-level caching via server.getCacheKey option.

• Vue.config.errorHandler now also captures errors thrown in user watcher callbacks.

Fixed

• #3140 fix v-model .number conversion for non-number input
• fix CSS animation initial frame flash
• fix SSR client-side hydration on merged text nodes
• #3155 fix v-once when used with v-for
• #3157 fix id-resolved transition with appear: true

v1.0.26

Fixed

• #3104 fixed 1.0.25 regression: v-model on off-DOM <select> causing infinite update loop
• #3101 fixed the "pluralize" filter with multi arguments, when selected argument is empty string (@nervgh)

v2.0.0-alpha.6

New

• Now works with vue-devtools 2.0.0!

• Properly support number keyCodes and custom keyCodes in v-on. Custom keyCodes can be defined in Vue.config.keyCodes:

  Vue.config.keyCodes.a = 65

  <input @keyup.a="aPressed">

• The binding object in custom directive hooks now exposes the raw expression as a string:

  <div v-custom="msg"></div>

  Vue.directive('custom', {
    bind (el, binding) {
      console.log(binding.expression) // "msg"
    }
  })

Fixed

• #3133 Fixed computed properties dependency collection error
• #3137 Fixed template error detection incorrectly detecting keywords
• Fixed output for undefined and null values for v-model
• Fixed unary tags handling in single-file component parser