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中触发

组件化

提高代码复用率

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

对接业界开发规范

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180614G00SET00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券