Quick overview of the upcoming changes
meet.js Wrocław, 25-06-2016
Which means we are no longer bound to the 1.x limitations like for example:
* If you rely to mounting on an existing element with el option, you are still subject to those limitations
Converts template strings to render functions.
Is using a port of Vue.js 2.0
Maintained by Alibaba Group
Already available at:
http://alibaba.github.io/weex/index.html
Opens the possibility to render to mobile native interfaces.
Full list:
https://github.com/vuejs/vue/issues/2873
Directive will have a greatly reduced scope of responsibility. In most cases you should prefer using Components as the main code-reuse abstraction
Additionally directives will no longer have instances – no more this inside directive hooks.
The update will now be always called after the component is
re-rendered.
Filters can now only be used inside text interpolations {{ }}.
Vue 2.0 will not ship with built-in filters. It is recommended to use standalone dedicated libraries, e.g. moment.js for formatting dates.
The filter syntax changed to be more inline with JavaScript function invocation.
// Vue.js 1.x
{{ date | formatDate 'YY-MM-DD' }}
// Vue.js 2.0
{{ date | formatDate('YY-MM-DD') }}
Lazy and Number params are now modifiers.
New .trim modifier.
Debounce param has been deprecated.
v-model no longer cares about initial inline value. It will always treat the Vue instance data as the source of truth.
.once and .sync are deprecated.
Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding.
Mutating a prop locally is now considered an anti-pattern. Changes in the parent component will always override child component local changes.
In general, in 2.0 you should treat props as immutable.
You’re no longer able to communicate up or down the component tree.
Instead create an event bus (can be an empty Vue instance, since it implements the EventEmitter pattern) or use a dedicated state management layer, e.g. Vuex
track-by –> key
<!-- 1.x -->
<div v-for="item in items" track-by="id">
<!-- 2.0 -->
<div v-for="item in items" :key="item.id">
v-ref –> ref
<!-- 1.x -->
<comp v-ref:foo></comp>
<!-- 2.0 -->
<comp ref="foo"></comp>
<comp :ref="dynamicRef"></comp>
npm install vue@next
Have fun playing with Vue 2.0!
Q&A Session with Evan You (Vue.js creator)
https://www.youtube.com/watch?v=0y7BiS89PYI