0.12.0-rc

New in 0.12.0-rc

Improvements

• v-repeat now supports using track-by="$index" when there's no key to track. This causes Vue to reuse the DOM elements and child instances in place without re-ordering them, so prefer using it on simple repeats without interactivity.
• Literal props are now supported when manually mounting a root instance.
• Paths containing dynamic segments, e.g. a[b] will now create the path if not already present, however, it will throw a warning and prompt you to pre-initialize the path if possible.

Fixed

• props are now properly persisted when an instance's $data is replaced.

Aggregated change log based on the diffs between 0.12.0-rc and 0.11.10

Breaking Changes

• paramAttributes option has been renamed to props.

• v-with has been removed. Now props are the only way to pass data to a child component.

• v-component has been removed. Now all components should use the custom tag syntax. For dynamic components, a new syntax is introduced: <component is="{{view}}"></component>.

• v-partial and {{> partial}} have been removed.

• Filter argument syntax has been reworked. Now non-quoted arguments are treated as dynamic paths (and the argument will be auto-retrieved from the vm when the filter function is called); only arguments enclosed in quotes are passed in as plain strings.

  Example:

  {{ msg | filter argA 'argB' }}

  In the filter function, the first argument will be the value of vm.argA, and the second argument will be a plain string "argB".

  For the reasoning behind it, see this comment.

New Features

• Async components. Example:

  components: {
    async: function (resolve) {
      setTimeout(function () {
        resolve({
          template: '<div>I am async!</div>'
        })
      }, 1000)
    }
  }

  This feature allows you to asynchronously resolve a component. The goal is to enable easy "lazy loading" for large apps with multiple pages/sections. Here we are using setTimeout simply for demo purposes - you will need to provide your own mechanism for fetching a component definition from the server. One example would be paring this feature with Webpack's code-splitting functionality.

• elementDirectives. Example:

  Vue.elementDirective('my-stuff', {
    update: function () { /* ... */ }
  })

  <my-stuff></my-stuff>

  This is similar to Angular's "E" mode directive. Basically, instead of treating the custom element as a component, treat it as a directive instead. Note element directives are "terminal", which means once Vue encounters an element directive, it will basically skip that element, and the directive is responsible for handling everything on and inside that element. This mechanism opens up more flexibility in handling custom elements, without necessarily incurring the overhead of a component instance.

Improvements

• props

  • props now support explicit one-way binding with the syntax of prop="{{* oneway}}"
  • props can now contain multiple mustache tags, e.g. prop="{{a}} b"
  • props can now contain filters, e.g. prop="{{a | reverse}}"
  • props can now contain expressions, e.g. prop="{{a + b}}"
  • When a prop's parent expression is not "settable", the prop binding will be automatically one-way.
  • All props are created and observed by default when a component is instantiated.
  • Literal props are now supported when manually mounting a root instance.

• Transition system refactor: CSS transitions and JavaScript transition hooks can now work together! The list of available JavaScript hooks have also been expanded. Here is a list of all available hooks:

  • beforeEnter
  • enter
  • afterEnter
  • beforeLeave
  • leave
  • afterLeave

  You can use these hooks to do additional work while having the CSS part handled for you automatically. The refactor maintains backwards compatibility so your old transitions should still work. One important thing to note though: the done callback in enter and leave hooks is now optional, similar to how it is optional in a Mocha test. Vue will look at the number of arguments of the function to determine whether the hook expects to control when the transition should end. For example:

    {
      enter: function (el) {
         // No `done` argument, so the end of the transition
         // will depend on the CSS `transitionend` or
         // `animationend` event.
      }
    }

  vs.

    {
      enter: function (el, done) {
        // the `done` callback here indicates that you want
        // to explicitly control when the transition should end.
        // the transition will only end when you call this callback.
      }
    }

• v-repeat

  • When v-repeat is used to iterate over an object, the instances are cached using the property key by default. This should avoid the entire list being re-rendered when the object is mutated.
  • v-repeat now supports using track-by="$index" when there's no key to track. This causes Vue to reuse the DOM elements and child instances in place without re-ordering them, so prefer using it on simple repeats without interactivity.

• v-model

  • options param for v-model now also respects disabled: true in the options array. (via #861 by @holic)

• Component Transclusion

  • When a component with replace:true is compiled, attributes on its placeholder node are now properly merged with the attributes on the component's template root node. Details:
    • If both nodes have class attributes, the class names are merged.
    • If both nodes have the same directive attribute, they will be compiled respectively in their own scope. (placeholder directives in parent scope and template root directives in child scope)
    • If both nodes have the same plain attribute, the template root node will take priority.

• General

  • New instance method: vm.$nextTick. This is the same as Vue.nextTick, except that it can be called inside instance methods as this.$nextTick, and the callback's this context will be auto-bound to the current instance. This avoids having to require the global Vue inside a component module just to use Vue.nextTick.
  • Errors in simple path getters are now suppressed by default. e.g. a.b.c when a === {}
  • Paths containing dynamic segments, e.g. a[b] will now create the path if not already present, however, it will throw a warning and prompt you to pre-initialize the path if possible.
  • Internally Vue now uses empty text nodes instead of comment nodes as DOM-manipulation anchors. This results in much cleaner HTML output. When in debug mode, comment nodes will still be used to help better analyze the structure of the rendered DOM.
  • Optimized instance initialization, which increases first-render performance by roughly 30%.

Fixed

• #853 v-repeat should only sync $value back to original array for non-object arrays.
• vuejs/Discussion#173 props are now properly persisted when an instance's $data is replaced.
• #869 v-repeat switching between Object/Array values
• #873 $add should work when an object is used as a vm's $data and observed elsewhere at the same time.

Staged for 0.12 but not currently in 0.12.0-rc

• v-class can now accept an object value. The keys will be used as class names and toggled based on the truthy-ness of the value.
• When v-ref is used together with v-repeat, and the value being repeated on is an Object, the corresponding ref will also be an Object, with its keys pointing to the associated child instances.