Vue 2.0 is Here!
Today I am thrilled to announce the official release of Vue.js 2.0: Ghost in the Shell. After 8 alphas, 8 betas and 8 rcs (a total coincidence!), Vue.js 2.0 is ready for production! The official guide has been fully updated and is available at vuejs.org/guide.
Ever since the work on 2.0 started back in April, the core team has made significant contributions to API design, bug fixes, documentation and TypeScript typings (yes, vue core, vue-router and vuex 2.0 all have TypeScript typings shipped in the npm packages), and the community also provided extremely valuable feedback on API changes — a big thank you to everyone involved!
What’s New in 2.0
Performance
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.
Migrating from 1.0
If you are new to Vue, starting with 2.0 now is a no-brainer. The biggest question for current 1.0 users though, is how to migrate to the new version.
To help with the migration process, the team has been working on a very detailed migration guide along with a CLI migration helper. The tool is not able to catch every deprecation, but it will help you get a good head start for sure.
One More Thing…
The engineers at Alibaba, the biggest e-commerce company in China, have been working on a project called Weex, which renders components written in a Vue-inspired syntax into native mobile UI. But soon, “Vue-inspired” will become “Vue-powered” — we have started an official collaboration to make Vue 2.0 the actual JavaScript runtime framework for Weex. This will enable users to write universal Vue components that can be reused across Web, iOS and Android! The collaboration is still in early stages, but it will be a big focus for us now that 2.0 is out, so stay tuned!
(Yes, it is native like ReactNative or NativeScript, not Cordova.)
Vue has evolved a lot since its humble beginning as a side project. Today it is community funded, widely adopted in the real world, and boasts one of the strongest growth trends among all JavaScript libraries according to stats.js.org. We believe 2.0 is going to push it even further. It’s the biggest update to Vue since its inception, and we are excited to see what you build with it.
