Vue.js: 1.0.0-rc.1 Release

Release date:
October 27, 2015
Previous version:
1.0.0-migration (released October 27, 2015)
Magnitude:
7,074 Diff Delta
Contributors:
3 total committers
Data confidence:
Commits:

31 Features Released with 1.0.0-rc.1

Top Contributors in 1.0.0-rc.1

yyx990803
evantre
zOxta

Directory Browser for 1.0.0-rc.1

We haven't yet finished calculating and confirming the files and directories changed in this release. Please check back soon.

Release Notes Published

Upgrade Note

The API can now be considered stable. Documentation for 1.0.0-rc.1 is available at rc.vuejs.org. It is recommended to read through the updated guide section before upgrading.

If you are upgrading from 0.12, the following list of changes may seem a bit overwhelming. To make it easier to migrate your existing app, there is a migration release (1.0.0-alpha.8) with full 0.12.16 compatibility and all the new features in 1.0.0. In addition, the migration release will raise deprecation warnings that will guide you to gradually migrate your app. When your app no longer raise any warnings in 1.0.0-alpha.8, it should work properly in 1.0.0-rc.1.

Changes from 1.0.0-beta.4

  • Added init lifecycle hook, which is called before an instance's data observation. This is mainly intended for advanced plugin authors.
  • Restrictions on attribute interpolation have been relaxed, now it uses a blacklist instead of a whitelist check which should no longer raise warnings on valid native attributes.

Full Changes from 0.12.16

Breaking

General

  • The data binding syntax has been redesigned. Details
  • The prefix global config has been deprecated. All directives will now consistently use the v- prefix.
  • The strict global config has been deprecated. Asset resolution is now always in strict mode. Details
  • The interpolate global config has been deprecated. Use v-pre on elements that should be skipped by the template compiler.
  • The proto global config has been deprecated. This has served no practical purpose and almost never used.
  • The inherit option has been deprecated. Alway pass data to child components via props.
  • The $add method has been deprecated for both Vue instances and observed objects. Use $set instead. Details
  • Event propagation for events sent via $dispatch and $broadcast now stops when it triggers a handler for the first time, unless the handler explicitly returns true. Details
  • $dispatch now also triggers the event on the instance calling it.
  • Vue no longer extends Object.prototype with $set and $delete methods. This has been causing issues with libraries that rely on these properties in certain condition checks (e.g. minimongo in Meteor). Instead of object.$set(key, value) and object.$delete(key), use the new global methods Vue.set(object, key, value) and Vue.delete(object, key).
  • Array.prototype.$remove: now always treats the argument as the item to search for. (Previously it treats the argument as an index if the argument is a number).
  • Instance method vm.$addChild() has been deprecated. Instead, a new option, parent has been (re)introduced. The usage is pretty simple:
  // before
  var child = parent.$addChild(options)

  // after
  var child = new Vue({ parent: parent })
  • The orderBy filter now expects its second argument to be a number instead of a boolean. The argument was originally called reverse, and is now called order. A value that is greater than or equal to 0 indicates ascending order, a value smaller than 0 indicates descending order. As a result, the old syntax for descending order still works:
  <li v-for="user in users | orderBy 'name' -1">
    {{ user.name }}
  <li>
  • Global asset registration methods, e.g. Vue.component, now returns the registered asset. This means you can now create, globally register and get reference to a component constructor in one step:
  var MyComponent = Vue.component('my-component', options)

  // equivalent to:
  var MyComponent = Vue.extend(options)
  Vue.component('my-component', MyComponent)

Directives

  • v-repeat has been deprecated in favor of v-for. Details

In addition to the differences specified in the link above: - v-for no longer uses track-by="$index" behavior for Arrays of primitive values by default. It now uses the value itself as the cache key. As a result, v-for will raise warning when the Array contains duplicate values and prompt the user to use track-by="$index" to handle duplicate values. - v-for no longer converts the value to Array before piping it through filters. Custom filters used on v-for will now get the raw value. However, the built-in filterBy and orderBy filters will convert the values into Arrays, so any filters after them will received the converted Array values. - v-class and v-style have been deprecated in favor of the new binding syntax (v-bind:class and v-bind:style, for details see the end of No.3 here) - v-ref and v-el usage has changed. Details - v-component has been deprecated in favor of the is attribute. Details - Added v-else directive. Details - v-model: multiple checkbox input can now be bound to the same v-model value (must be an Array):

  <input type="checkbox" value="Jack" v-model="checkedNames">
  <input type="checkbox" value="John" v-model="checkedNames">
  <input type="checkbox" value="Mike" v-model="checkedNames">

With checkedNames' initial value being an Array, the checked boxes' values will be pushed into the Array, while unchecked ones will be removed from it. For example, if we check the first two boxes, checkedNames will have the value ["Jack", "John"]. Of course, you can also dynamically bind the value with v-bind. - v-on: added two modifiers, .stop and .prevent which automatically calls event.stopPropagation() and event.preventDefault() for you:

  <!-- event won't propagate -->
  <a v-on:click.stop="doThis"></a>

  <!-- this will no longer reload the page! -->
  <form v-on:submit.prevent="onSubmit"></form>
  • v-on will now also listen to custom Vue events when used on a child component. (See No.6 here)
  • The key filter for v-on has been deprecated. Instead, use the new key modifer syntax. (See No.7 here)
  • The options param for <select v-model> has been deprecated. You can now just use v-for to render the options and it will work properly with the v-model on the containing <select> element.
  • The wait-for param for components has been deprecated in favor of the new activate lifecycle hook. Details

Component API

  • <content> outlet has been deprecated in favor of the new <slot> API. Details
  • Props syntax has changed as part of the new binding syntax.
  • $data can no longer be used as a prop.
  • Props with the data- prefix are no longer supported.
  • Literal props will no longer be auto-casted into Booleans or Numbers - they are now always passed down as Strings.

Non-Breaking Changes

  • vm.$log() messages now also include computed properties.
  • Prop expressions now support filters.