Vue.js 2.0
Quick overview of the upcoming changes
meet.js Wrocław, 25-06-2016
Virtual DOM
- Hyperscript and JSX support
- You can still use templates (those will be converted to render functions)
- Detects static class names and attributes so they are never diffed after initial render
- Detects the maximum static sub trees (with no dynamic bindings) and hoists them out of the render function.
- You can still use the single-file (.vue) components
Template parsing
No longer relying on the DOM*
Which means we are no longer bound to the 1.x limitations like for example:
-
table can only contain thead, tbody, tfoot and tr, and these elements should be direct children of table
- tr can only contain th and td, and these elements should be direct children of tr
* If you rely to mounting on an existing element with el option, you are still subject to those limitations
Two available builds
The compiler can now be excluded
-
STANDALONE: Including the compiler and the runtime.
- RUNTIME ONLY: Not including the compiler, which isn’t needed if you use a webpack-loader or browserify transform anyway (as you have a pre-compile step then). Default build for NPM.
The Compiler
Converts template strings to render functions.
Builds
Server-side rendering
- Client-side hydration
- Built-in streaming for SSR
Think React-native for Vue.js
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.
Features & breaking changes
Full list:
https://github.com/vuejs/vue/issues/2873
Directive changes
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.
Filter changes
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') }}
V-model changes
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.
Props behavior
-
.onceand.syncare 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.
$dispatch & $broadcast
Are both deprecated
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
Misc
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>
The Beta is already here!
npm install vue@next
That’s all, thanks!
Have fun playing with Vue 2.0!
BONUS SLIDE!
Q&A Session with Evan You (Vue.js creator)
https://www.youtube.com/watch?v=0y7BiS89PYI
Copy of Vue.js 2.0
By shengbowen
Copy of Vue.js 2.0
- 1,291