What’s New in 2.0

Performance

Based on 3rd party benchmark, lower is better

The rendering layer has been rewritten using a light-weight Virtual DOM implementation forked from snabbdom. On top of that, Vue’s template compiler is able to apply some smart optimizations during compilation, such as analyzing and hoisting static sub trees to avoid unnecessary diffing on re-render. The new rendering layer provides significant performance improvements compared to v1, and makes Vue 2.0 one of the fastest frameworks out there. In addition, it requires minimal effort in terms of optimization because Vue’s reactivity system is able to precisely determine components that need to be re-rendered in a large and complex component tree.

It’s also worth mentioning that the 2.0 runtime-only build weighs at only 16kb min+gzipped, and totals at 26kb even with vue-router and vuex included, on par with the v1 core alone!

Render Functions

Despite the rendering layer overhaul, Vue 2.0 maintains a largely 1.0 compatible template syntax with only minor deprecations. The templates are compiled into Virtual DOM render functions under the hood, but the user can also opt to directly author render functions themselves when they need the flexibility of JavaScript. There is also optional JSX support for those who prefer it.

Render functions open up possibilities for powerful component-based patterns — for example, the new transition system is now completely component-based, using render functions internally.

Server-Side Rendering

Vue 2.0 supports server-side rendering (SSR) with streaming and component-level caching, making it possible to achieve blazing fast renders. In addition, vue-router and vuex 2.0 are designed to support SSR with universal routing and client-side state hydration. See it all working together in the vue-hackernews-2.0 demo app.

Supporting Libraries

The official supporting libraries and tools — vue-router, vuex, vue-loader and vueify — have all been updated to support 2.0. vue-cli now scaffolds 2.0-based projects by default.

In particular, vue-router and vuex have both received many improvements in their 2.0 versions:

vue-router

Multiple named <router-view> support

Improved navigation with the <router-link> component

Simplified navigation hooks API

Customizable scroll behavior control

More comprehensive examples

vuex

Simplified in-component usage

Better code organization with improved modules API

Composable async actions

See their respective 2.0 docs for more details:

Community Projects

The team at Ele.me, the biggest online food ordering platform in China, has already built a complete desktop UI component library with Vue 2.0. Unfortunately the docs do not have an English version yet, but they are working on it!

Many other community projects have also updated to be 2.0 compatible — check out awesome-vue and search for “2.0” on the page.