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
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 open up possibilities for powerful component-based patterns — for example, the new transition system is now completely component-based, using render functions internally.
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.
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:
- Multiple named <router-view> support
- Improved navigation with the <router-link> component
- Simplified navigation hooks API
- Customizable scroll behavior control
- More comprehensive examples
- Simplified in-component usage
- Better code organization with improved modules API
- Composable async actions
See their respective 2.0 docs for more details:
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…
(Yes, it is native like ReactNative or NativeScript, not Cordova.)