vue.js 对比 angularJS、react 前端框架 - 小苏打的博客 - CSDN博客
vue.js 对比 angularJS、react 前端框架
JavaScript
React 和 Vue 有许多相似之处，它们都有：
使用 Virtual DOM提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方，比如更丰富的生态系统。
React 社区为我们准确进行平衡的考量提供了，特别感谢来自 React 团队的 Dan Abramov 。他非常慷慨的花费时间来贡献专业知识来帮助我们完善这篇文档。
React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势，因为 Vue 的 Virtual DOM 实现相对更为轻量一些。如果你对数据感兴趣，可以参考这个专门测试渲染和更新性能的。注意这个跑分并不包含针对大量复杂组件树的情况，因此只建议作为参考。
在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。
如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用&PureComponent，或是手动实现&shouldComponentUpdate&方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。
然而，使用&PureComponent&和&shouldComponentUpdate&时，需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。
在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了&shouldComponentUpdate，并且没有上述的子树问题限制。
Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。
在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。
Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。我们下面会详细分析一下。
JSX vs Templates
在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。
JSX 说是手写的渲染函数有下面这些优势：
你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的（比如，linting、类型检查、编辑器的自动完成）。
事实上 Vue 也提供了&，甚至。然而，我们默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了一些特有的优势：
对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。
基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
这也使得设计师和新人开发者更容易理解和参与到项目中。
你甚至可以使用其他模板预处理器，比如 Pug 来书写 Vue 的模板。
有些开发者认为模板意味着需要学习额外的 DSL (Domain-Specific Language, 领域特定语言）才能进行开发 —— 我们认为这种区别是比较肤浅的。首先，JSX 并不是免费的 —— 它是基于 JS 之上的一套额外语法，因此也有它自己的学习成本。同时，正如同熟悉 JS 的人学习 JSX 会很容易一样，熟悉 HTML 的人学习 Vue 的模板语法也是很容易的。最后，DSL 的存在使得我们可以让开发者用更少的代码做更多的事，比如&v-on&的各种修饰符，在
JSX 中实现对应的功能会需要多得多的代码。
更抽象一点来看，我们可以把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。
CSS 的组件作用域
除非你把组件分布在多个文件上 (例如&)，要不在 React 中作用域内的 CSS 就会产生警告。非常简单的 CSS 还可以工作，但是稍微复杂点的，比如悬停状态、媒体查询、伪类选择符等要么通过沉重的依赖来重做要么就直接不能用。
而 Vue 可以让你在每个中完全访问 CSS。
@media (min-width: 250px) {
.list-container:hover {
background:
这个可选&scoped&属性会自动添加一个唯一的属性（比如&data-v-21e5b78）为组件内 CSS 指定作用域，编译的时候&.list-container:hover&会被编译成类似&.list-container[data-v-21e5b78]:hover。
如果你已经熟悉 CSS Modules，Vue 单文件组件也有&。
最后，就像 HTML 一样，你可以选择自己偏爱的 CSS 预处理器（或后处理器）编写 CSS，这些生态系统允许您利用现有的库。这可以让你围绕设计为中心展开工作，比如您的构建过程中颜色操作，而不是引入专门的库来增加你应用的体积和复杂度。
Vue 和 React 都提供了强大的路由来应对大型应用。React 社区在状态管理方面非常有创新精神（比如Flux、Redux），而这些状态管理模式甚至也可以非常容易的集成在 Vue 应用中。实际上，Vue 更进一步地采用了这种模式（），更加深入集成
Vue 的状态管理解决方案 Vuex 相信能为你带来更好的开发体验。
两者另一个重要差异是，Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。
最后，Vue 提供了，能让你非常容易地构建项目，包含了&，，甚至&。React 在这方面也提供了，但是现在还存在一些局限性：
它不允许在项目生成时进行任何配置，而 Vue 支持&-like 定制。它只提供一个构建单页面应用的单一模板，而 Vue 提供了各种用途的模板。它不能用用户自建的模板构建项目，而自建模板对企业环境下预先建立协议是特别有用的。
而要注意的是这些限制是故意设计的，这有它的优势。例如，如果你的项目需求非常简单，你就不需要自定义生成过程。你能把它作为一个依赖来更新。如果阅读更多关于。
React 学习曲线陡峭，在你开始学 React 前，你需要知道 JSX 和 ES2015，因为许多示例用的是这些语法。你需要学习构建系统，虽然你在技术上可以用 Babel 来实时编译代码，但是这并不推荐用于生产环境。
就像 Vue 向上扩展好比 React 一样，Vue 向下扩展后就类似于 jQuery。你只要把如下标签放到页面就可以运行：
&script src=&/vue/dist/vue.js&&&/script&
然后你就可以编写 Vue 代码并应用到生产中，你只要用 min 版 Vue 文件替换掉就不用担心其他的性能问题。
由于起步阶段不需学 JSX，ES2015 以及构建系统，所以开发者只需不到一天的时间阅读就可以建立简单的应用程序。
React Native 能使你用相同的组件模型编写有本地渲染能力的 APP（iOS 和 Android）。能同时跨多平台开发，对开发者是非常棒的。相应地，Vue 和&&会进行官方合作，Weex 是阿里的跨平台用户界面开发框架，Weex
的 JavaScript 框架运行时用的就是 Vue。这意味着在 Weex 的帮助下，你使用 Vue 语法开发的组件不仅仅可以运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用。
在现在，Weex 还在积极发展，成熟度也不能和 React Native 相抗衡。但是，Weex 的发展是由世界上最大的电子商务企业的需求在驱动，Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。
Mobx 在 React 社区很流行，实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上，React + Mobx 也可以被认为是更繁琐的 Vue，所以如果你习惯组合使用它们，那么选择 Vue 会更合理。
vue.js对比AngularJS (Angular 1)
Vue 的一些语法和 AngularJS 的很相似（例如&v-if&vs&ng-if）。因为 AngularJS 是 Vue 早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。
在 API 与设计两方面上 Vue.js 都比 AngularJS 简单得多，因此你可以快速地掌握它的全部特性并投入开发。
灵活性和模块化
Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是在任何时候都必须遵循 AngularJS 制定的规则，这让 Vue 能适用于各种项目。我们知道把决定权交给你是非常必要的。
这也就是为什么我们提供&，让你可以用几分钟，去选择是否启用高级特性，比如热模块加载、linting、CSS 提取等等。
AngularJS 使用双向绑定，Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。
指令与组件
在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 AngularJS 中两者有不少相混的地方。
Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。
在 AngularJS 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。AngularJS 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。
Vue 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。
有意思的是，Angular 和 Vue 用相似的设计解决了一些 AngularJS 中存在的问题。
(原本的 Angular 2)
我们将新的 Angular 独立开来讨论，因为它是一个和 AngularJS 完全不同的框架。例如：它具有优秀的组件系统，并且许多实现已经完全重写，API 也完全改变了。
TypeScript
Angular 事实上必须用 TypeScript 来开发，因为它的文档和学习资源几乎全部是面向 TS 的。TS 有很多显而易见的好处 —— 静态类型检查在大规模的应用中非常有用，同时对于 Java 和 C# 背景的开发者也是非常提升开发效率的。
然而，并不是所有人都想用 TS —— 在中小型规模的项目中，引入 TS 可能并不会带来太多明显的优势。在这些情况下，用 Vue 会是更好的选择，因为在不用 TS 的情况下使用 Angular 会很有挑战性。
最后，虽然 Vue 和 TS 的整合可能不如 Angular 那么深入，我们也提供了官方的&&和&，并且知道有大量用户在生产环境中使用
Vue + TS 的组合。我们也和微软的 TS / VSCode 团队进行着积极的合作，目标是为 Vue + TS 用户提供更好的类型检查和 IDE 开发体验。
大小和性能
在性能方面，这两个框架都非常的快，我们也没有足够的实际应用数据来下一个结论。如果你一定想看些数据的话，你可以参考这个。单就这个跑分来看，Vue
似乎比 Angular 要更快一些。
在大小方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此，一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的&angular-cli&生成的默认项目尺寸 (~130kb) 还是要小的多。
Vue 相比于 Angular 更加灵活，Vue 官方提供了构建工具来协助你构建项目，但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范，但也有开发者喜欢更灵活自由的方式。
要学习 Vue，你只需要有良好的 HTML 和 JavaScript 基础。有了这些基本的技能，你就可以非常快速地通过阅读&&投入开发。
Angular 的学习曲线是非常陡峭的 —— 作为一个框架，它的 API 面积比起 Vue 要大得多，你也因此需要理解更多的概念才能开始有效率地工作。当然，Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用；但不可否认的是，这也使得它对于经验不甚丰富的开发者相当的不友好。
我的热门文章从jQuery到AngularJS，再到React，前端必须走在最前端 - 简书
从jQuery到AngularJS，再到React，前端必须走在最前端
简单分析一下三者的区别jQueryjQuery不能跟AngularJS、 ReactJS归到同一类，因为JQ只是一个库，其他两个才算是重框架；毕竟是“先入为主”，jQuery 存在的时间最早，各种插件、组件、UI库多的根本数不清。也正是因为跟“大白菜”一样的逻辑，jQuery的学习和应用都非常容易，所以很适合初学者使用。AngularJSAngularJS 这个框架比较重且兼容性一般般，比起jquery1.xIE全兼容，这货只能兼容IE8及以上（对于IE8以下版本，使用ng IE补丁插件毕竟是费力不讨好的事情），但无可否认它是能明显提高前端开发效率的工具。它比较适合做前端后台管理界面、或ERP类web app（例如：worktile就是用ng实现）。有一点必须承认，AngularJS最吸引人的是它的编程思想，它把很多后端的思想比如“依赖注入、指令”应用到前端，这使得它的门槛变得有点高，所以初学者不建议直接去学习AngularJS（因为你根本不会用，哈哈）。ReactJSReact是脸谱开发的一种JavaScript框架，它的唯一目标就是构建高性能的用户接口。开发React就是为了解决其他JavaScript框架都未能解决的一个问题-高效地渲染大型数据集。它采用了虚拟文档对象模型(DOM)和拼接机制，这样，每一次对网页做了更改后，React就只更新与更改相关的部分，而不需要重新对整个站点进行渲染。最为最近很火的一个前端解决方案，这货一开始只是Facebook 内部使用的UI库（类似bootstrap），后来慢慢发展成一整套前后端通吃的 Web App 解决方案（野心很大，让现在的Hybrid 之流怎么活？估计之前facebook HTML5大跃进失败了，想要用它继续完成三端同步的梦想），所以这框架适合Web移动开发。（据说ReactJS项目组能调用android ios一些不为人知的接口，从而显著提高android ios原生项目效率）目前使用react在实际应用中，必须使用其扩展插件，而使用了插件的reactjs的确算是重框架React 的大小和 Angular 相当，但 Angular 是一个完整的应用框架。React 显而易见的臃肿，但是你只获得了很少的功能。重点分析AngularJS和React通常认为Angular是一种“固执己见”的框架。意思就是AngularJS的开发者认为一个“好的”应用前端架构就应改像AngularJS这样，他们也在AngularJS的核心也采用的是这样的架构。因此，当你的应用满足上面所说的限制的话，Angular就运行的非常良好。然而，如果你发现你的应用框架构与Angular所期望的架构相差很大，那么你会感觉到非常痛苦。相比之下，React并不打算给你提供一个适合你编码的理想架构。它让你减少要装载的组件，降低装载时间，让你更加自由地管理数据的表现形式。模版Angular的指令（Directive）用于数据驱动显示，通过它来编写显示模版相当容易，这是使用Angular的一大好处。当你为数据构建UI时，使用Angular是非常直接的。对于数据展现而言，只要放弃对某些环节的控制，你就能以一种更直观的方式，给用户界面带来更少的代码以及“显而易见”的感觉。然而，React趋向于由你提供自定义函数来驱动数据的展现。这通常意味着，在数据被通过代码融入DOM前，你得自己定义你的数据将如何被展现。这使得在尝试决定某个元素具体该如何被渲染时，逻辑上会出现一定的断层。性能虽然Angular的数据的表达能够非常紧凑, 但是渲染大型数据集依旧被证明是一个痛点. 由于双向数据绑定需要监听每一个可变元素, 数据量变大就会带来显著的性能问题. React, 在另一方面, 使用虚拟DOM来跟踪元素的变化. 当检测到变化时, React会构建一个针对DOM变化的补丁, 然后应用这些补丁. 由于不必在每个元素每次变化时重新渲染整个巨大的table, React相对于其他JavaScript框架有显著的性能提升.应用架构AngularJS和React还有一个不同点在于它们所选择的架构. 最初AngularJS使用了MVC(模型-视图-控制器)模式构建, 然后逐渐演化成了MVVM(模型-视图-视图模型)-MVC混合架构. React却是另一方面, 它的关注点只在MVC模型的”V”上 – 它被设计用来展现数据, 而将其他方面交由应用架构中编程人员选择的其他组件负责. 有一件值得注意的有趣的事是, 由于这样的架构选型, AngularJS的某些棘手的组件完全可以通过React来增强.结论
Angular 和 React 相同的是 Model Driven View 的套路, 自动维护 View, 减少手工状态维护.把两者都当作是对 Backbone MVP 模式的改进的话, 上边这一点差不多的.不同的地方是 React 采用的方案有点像函数式的做法, Component, Immutable data 等等更着重于将 DOM 封装可以相互组合的 Component, 并且将 DOM 操作抽象为状态的改变.这样抽象之后, 学习和编写复杂应用的成本降下来很多React 的问题主要在它实现功能近似与 jQuery 的 DOM 操作和事件监听,要写完整的应用需要 MVC, 对 React 来说就是后来发布的 Flux 模型,而 Flux 并不是完整的一个框架, 只是 Facebook 发布的一套架构体系所以要写完整的大应用估计还有不少坑要淌过去.. 在这方面 Angular 东西多多了.在为你的应用选择JavaScript框架时，要考虑每个框架的优势和劣势，这需要对相关的知识有深入的了解。正如上文所述，如果应用时常要处理大量的动态数据集，并以相对简便和高性能的方式对大型数据表进行显示和变更，React是相当不错的选择。但是React不像AngularJS那样包含完整的功能，举例来说，React没有负责数据展现的控制器（Controller）层。总而言之，在AngularJS和React之间做出选择意味着回答一个看似简单的问题：为了解决应用潜在的性能问题，是否值得你去花精力学习和使用React？或者说，是否可能将React的组件（Component）在AngularJS中实现（当然这样会使得架构整体变得冗余）[译者注：AngularJS中的指令和React的组件扮演着类似的角色]？要回答这个问题并不容易，你要根据具体的应用场景来做出决定。
码农，女码农，阳光女码农请问 React 和 Angular 各有什么优缺点，各自又适合什么开发场景？ - 知乎1210被浏览219338分享邀请回答512 条评论分享收藏感谢收起在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
类似图示界面,请问数据展示及修改在angularJS,React,vue中选哪个好?或有更好的选择吗?如果有,希望框架成熟,加载速度快,请帮忙推荐,谢谢!
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
CSDN &《程序员》编辑/记者，投稿&纠错等事宜请致邮
你只管努力，剩下的交给时光！
如今的编程是一场程序员和上帝的竞赛，程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止，上帝是赢的。个人网站：。个人QQ群：、
个人大数据技术博客：