Reasons to Use Vue.js

[mambat]

本文写于2016年08月15日

Documentation

---

• 国人作者，官方提供详尽的中文文档。

• 部分相关类库也提供了中文文档。

[slide]

Easy to Master

---

• 概念少，API 简单，容易上手。

• vue-cli，一分钟搞定 webpack 配置。

• Model 就是普通的 JavaScript 对象。

• 官方提供了全套方案（组件、路由和状态）

• Webstorm/Sublime/Atom Plugins

[slide]

UI Components

[slide]

社区贡献的组件列表

---

Name	Desc	Link
VueStrap	基于 Bootstrap 的一套组件*	vue-strap
VueBoot	基于 Bootstrap 的一套组件	vue-boot
VueAdmin	用于控制台面板开发的一套组件*	vue-admin
Keen-UI	MD 风格的一套组件*	keen-ui
Vue-Bulma	基于 Bulma 的一套组件*	vue-bulma
Vue-Comps	一套未 styled 的组件*	vue-comps

更多请参考：awesome-vue

[slide]

Data Binding

---

[slide]

Router

---

官方提供路由类库 Vue-Router

        var Foo = Vue.extend({
          template:
            '<div class="foo">' +
              '<h2>This is Foo!</h2>' +
              '<router-view>' + 
              '</router-view>' + 
            '</div>'
        })
    

        router.map({
          '/foo': {
            component: Foo,
            subRoutes: {
              '/bar': {
                component: Bar
              },
              '/baz': {
                component: Baz
              }
            }
          }
        })
    

[slide]

State Management

---

官方提供状态管理类库 Vuex

        import Vuex from 'vuex'

        const state = {
          count: 0
        }
        const mutations = {
          INCREMENT (state) {
            state.count++
          }
        }
        export default new Vuex.Store({
          state,
          mutations
        })
    

        store.dispatch('INCREMENT')

        console.log(store.state.count) // -> 1
    

[slide]

[slide]

Supported Browsers

---

Vue.js supports all ECMAScript 5 compliant browsers.

[slide]

Community

---

[slide]

Performance

---

Vue vs React 英文版

Vue vs React 中文版

• Vue.js 更轻量，~24kb min+gzip。

• 由于 React 的虚拟 Dom 的实现，它的 scripting 上运行的时间更长；Vue 由于要直接更改 Dom ，所以它有关在 painting 和 rendering 工作上更耗费资源。

• 所有工作都做完以后，Vue 在大多数情况下仍然比 React 快25%。

[slide]

TODO Third Party Integration

---

• JQuery
• amChart

FAQ

• Vue.js 常见问题 FAQ