React和Vue 的一些对比

React vs Vue

共同点：

virtual dom

组件化，类似的组件生命机制(vue中路由切换时，会导致原路由的组件destory)

数据驱动(vue:props -> data -> methods -> computed -> watch)

有配套的路由和负责处理全局状态管理的库

不同点：

语法不同：React采用JSX语法，将CSS混杂于JavaScript中，增加学习成本；Vue采用template语法，分离了HTML/CSS/JavaScript，更简单

CSS作用域：React没有CSS作用域的概念，在多人协作的团队中，可能会造成样式冲突或覆盖，而Vue的CSS作用域可以从一定程度上规避此问题

社区生态：React >> Vue

数据形态：React和Vue都提供单项数据流的概念，但Vue提供了数据双向绑定，React没有；在父子组件上，React是严格单向的(props)，Vue可以双向传递数据(props和event up)

跨端：react 有 react native, vue虽然集成了weex，但可用性有待验证

取舍:

看个人和团队对技术栈的熟悉能力

看产品的复杂程度：复杂而且大->react(社区更成熟，对于复杂的大项目已有解决方案) 简单而且小->vue

vue的编译问题：https://zhuanlan.zhihu.com/p/25486761

React缺点：

对新人学习成本偏高;

相比vue，体重偏大

redux的模板类代码

Vue缺点：

组件的this对数据的访问权限过大(能直接访问store/通过commit修改store);

属性名重名问题：

对同名方法(methods和actions)/属性(data和state存在同名属性，在computed中返回state中的属性时，data中的同名属性会失效)的提示不太友好，会根据书写顺序进行覆盖--data属性失效

多个module中在state中定义同名属性时，也会根据书写顺序进行覆盖--同名属性覆盖

computed和methods中存在同名属性时, 当调用methods中的方法时会报异常

Flux：不足以应付复杂项目，需要自己编码维护store

Redux: 模板代码多

vuex: 模板代码多; 引入mutation的概念; 异步请求必须在action中触发

组件化

提高代码复用率

节省开发时间，提高开发效率

对接业界开发规范