React
相似点
- 使用了虚拟dom
- 提供了响应式和组件化视图组件
- 分为核心库和其他库(如路由和状态管理)
不同点
- 运行时性能
在react中,组件状态发生改变,会以该组件为根,重新渲染整个组件子树
避免发生不必要子组件被重新渲染,要么使用PureComponent或者手动实现shouldComponentUpdate,并且可能用到不可变的数据结构
使用PureComponent或者shouldComponentUpdate,必须保证该组件的整个子树渲染输出由props决定,不符合该条件会导致渲染结果可能不一致
而在vue中,组件的依赖在渲染过程中自动跟踪,默认自动获得shouldComponentUpdate,没有子树问题限制
HTML&CSS
在react中,一切皆JavaScript,不仅HTML用JSX来表达,CSS也被纳入JavaScript中,Vue是拥抱经典web技术,并进行扩展JSX vs Templates
在react中,组件渲染依赖与JSX,JSX是使用XML语法编写的欧中语法糖,而JSX渲染函数,有以下优点
(1)可以用完成的JavaScript功能构建试图页面
(2)开发工具对JSX支持比现有的vue模板先进
在vue中,其实也提供了渲染函数以及支持JSX,但是还是默认推荐模板,任何合乎HTML的都是vue模板
(1)模板比JSX读起来自然,能提升传统HTML开发者的效率
(2)基于HTML的模板易于迁移vue
(3)设计师和新人开发容易理解和参与到项目
(4)可以使用其他模板预处理器,如Pug书写vue
(5)组件第一种为偏视图,推荐使用模板;第二种为偏逻辑,推荐使用JSX或者渲染函数,而表现类的组件多于偏逻辑组件作用域内的CSS
在react中,CSS作用域通过CSS-in-JS的方案实现,但在 JavaScript 灵活处理样式的同时,也需要权衡 bundle 的尺寸和运行时的开销
而vue设置样式的默认方法是单文件组件里类似style的标签,单文件组件可以在同一个文件里完全控制CSS,将其作为组建的一部分
在一个,vue单文件的样式设置是非常灵活的,通过vue-loader,可以使用任意预处理器,后处理器,甚至深度集成都在<style>标签内
- 规模
- 向上扩展
vue和react都提供强大的路由应对大型项目,react在状态管理非常创新,但是却更容易集成在vue中。而vue更深入的集成了状态管理解决方案vuex
vue的路由和状态管理由官方维护支持且与核心库同步更新。
react将这些问题交给社区维护,因此更为分散但有更为繁荣
vue提供vue-cli脚手架,更加容易的搭建项目
react虽然提供了create-react-app,但局限性也很明显(故意设计):
(1)不允许项目生成时进行任何配置,而vue支持 Yeoman-like 定制
(2)只提供一个构件单页面应用的唯一模板,而vue提供各种用途模板
(3)它不能用用户自建的模板构建项目,而自建模板对企业环境下预先建立协议是特别有用的
- 向下扩展
react学习曲线陡峭,需要了解JSX和ES2015,需要学习构建系统
vue向上扩展类似react,向下扩展类似jquery,可以快速建立简单的应用程序
- 原生渲染
React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发。相应地,Vue 和 Weex 会进行官方合作,Weex 是阿里巴巴发起的跨平台用户界面开发框架,同时也正在 Apache 基金会进行项目孵化,Weex 允许你使用 Vue 语法开发不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用的组件。
在现在,Weex 还在积极发展,成熟度也不能和 React Native 相抗衡。但是,Weex 的发展是由世界上最大的电子商务企业的需求在驱动,Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。
另一个 Vue 的开发者们很快就会拥有的选项是 NativeScript,这是一个社区驱动的插件。
- Mobx
Mobx 在 React 社区很流行,实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上,React + Mobx 也可以被认为是更繁琐的 Vue,所以如果你习惯组合使用它们,那么选择 Vue 会更合理。
Angular
TypeScript
Angular必须用TypeScript开发,因为文档和虚席资源几乎都面向TS(TSLint是typescript格式验证工具)
TS好处是静态类型检查在大规模应用中非常有用,也可以对有java和c#北京开发者提升效率
但是,在小规模项目中,TS的优势不太明显,vue会是更好的选择,不使用TS去使用Angular会比较困难运行时性能
这两个框架都很快,有非常类似的 benchmark 数据。你可以浏览具体的数据做更细粒度的对比,不过速度应该不是决定性的因素。体积
最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多,优化的 angular-cli 生成的默认项目尺寸 (~65KB)
一个包含了 Vuex + Vue Router 的 Vue 项目 (gzip 之后 30kB)灵活性
Vue 相比于 Angular 更加灵活,Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范,但也有开发者喜欢更灵活自由的方式。学习曲线
学习 Vue,你只需要有良好的 HTML 和 JavaScript 基础。有了这些基本的技能,你就可以非常快速地通过阅读 指南 投入开发。
Angular 的学习曲线是非常陡峭的,作为一个框架,它的 API 面积比起 Vue 要大得多,因此需要理解更多的概念才能开始有效率地工作。当然,Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用;但不可否认的是,这也使得它对于经验不甚丰富的开发者相当的不友好。