Vue.js 2.0

Quick overview of the upcoming changes

by @DamianDulisz

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

  • .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.

$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

Vue.js 2.0

By Damian Dulisz

Vue.js 2.0

  • 2,925