InfoQ Vue、React和Angular:该选择哪个框架?( 二 )
Angular
Angular的组件命名为directive(指令) , 它们是由Angular跟踪的DOM元素上的标记 。 Angular将组件的UI部分作为HTML标签的属性 , 并将UI和组件的行为以JavaScript代码的形式分离开来 。
React
与Angular相反 , React结合了UI和组件的行为 。 简单地说 , 同一部分代码负责UI元素的创建并控制其行为 。
Vue.js
在Vue.js中 , UI和行为是组件的一部分 。 该框架也是高度可定制的 , 允许在脚本中结合UI和组件行为 。
性能和框架大小
Angular
Angular使用真实DOM , 因此它最适合用于内容不时更新的单页应用程序 。 这会使更新过程变得非常缓慢 , 并且在丢失流的情况下 , 将需要花费很长时间才能找出问题所在 。 值得庆幸的是 , 双向数据绑定过程将模型中所做的所有更改都以一种安全高效的方式复制到视图中 。 由于可用的特性范围很广 , 与Vue和React相比 , 应用程序要“重”得多(约500KB) , 这会稍微降低性能 。
React
与Angular相反 , React使用了虚拟DOM , 增强了需要定期更新内容的所有应用程序(不论大小)的性能 。 单向数据可以更好地控制项目 。 缺点可能是开发人员需要不断升级他们的技能 , 以适应React不断发展的特性 。 由于React没有提供大量的库 , 所以 , 它的大小比Angular要小得多(只有约100KB) 。
Vue.js
Vue也使用虚拟DOM , 因此在项目中的更改不会正式对DOM产生影响 。 Vue在这三者中 , 大小最小(大约80KB) , 这大大提高了它的性能 。
总之 , 考虑到性能 , Vue和React在开发易于维护和无Bug的Web应用程序更加方便 。
对于正在考虑学习新框架的人来说 , 掌握一个新框架的过程是否足够简单非常重要 。 那么 , 在它们三个中 , 哪一个最适合学习呢?
学习曲线
Vue.js可能是最容易学的 , 这主要有两个原因:
它不需要特殊的设置 。 首先 , 你只需将Vue库导入到HTML文件中 , 并添加一些JS(对于较大的Vue项目)即可 。
无需学习大型特殊语法 。 Vue的用法基于JavaScript和HTML , 通过v-for之类的指令进行了增强 , 这些指令都很容易解释 。
Angular和React都需要更为复杂的项目设置 。 不过 , 安装设置的可用性简化了这项任务:create-react-app、AngularCLI和VueCLI(用于更复杂的项目) 。
要掌握Angular和React , 还需要学习相应的TypeScript或JSX语法 。
其中 , Angular的学习曲线被认为比React要陡峭得多 。 Angular是一个不断发展的复杂框架 , 为解决单个问题提供了多种选择 。
React也需要开发者持续学习 , 因为它经常更新 , 但若有初学者教程和基本的JavaScript知识 , 学习起来就会容易得多 。 主要困难在于Redux库 。
应用案例
Angular
Angular由Google开发 , 并在其AdWords应用程序中大量使用 , 以最大限度地提高性能 。 其他使用Angular的著名网站 , 我们可以列举如下:Guardian、Lego、Nike、PayPal和Weather.com 。
React
React最初是为Facebook设计的 , 现在仍被该公司积极用于创建各种产品 , 包括Twitter、Instagram、Whatapp和WordPress都采用了这个框架 。
Vue.js
与Angular和React不同 , Vue并没有强大的客户在其每个产品中实现它 。 不过 , 值得庆幸的是它的灵活性 。 它已经在这些流行品牌中得到了普及:9Gag、Nintendo、GitLab和Grammarly等 。
小结:Vue、React、Angular的对照表
文章图片
Vue、React和Angular的对照表
我们希望本文对Vue、React和Angular的比较能对你有所帮助 。
参考阅读:
https://medium.com/swlh/vue-vs-react-vs-angular-what-framework-would-you-choose-5d77a3680b0d
- InfoQ 22款好用的CLI工具
- InfoQVue、React和Angular:该选择哪个框架?
- InfoQ去Oracle实录:如何在线更换金融核心场景中的数据库?
- InfoQ Gateway,云原生时代的流量入口:Envoy
- 轻拔琴弦|混淆保护需正确命名!看.NET代码保护工具.NET Reactor如何规定
- InfoQ低门槛构建云端生态:华为云为企业铺就生产力提升捷径 | Q推荐
- InfoQiOS工程师的自我修养 | 极客时间
- InfoQ如何基于 DDD 构建微服务?
- tablevue element-ui实现Table表格行内编辑
- InfoQNo Code革命为什么现在爆发?