Vue和React、Angular的综合对比

Vue.js 作为一个优秀的前端框架，方便前端开发者快速开发应用的前端，在实际项目中使用得比较普遍。

当然 Vue.js 也不是实际项目中唯一的前端框架，比较优秀的前端框架还有 React、AngularJS 和 Angular等。接下来就介绍一下 Vue.js 同这3个框架的对比。

1. Vue.js 同 React 的对比

React 和 Vue.js 有许多相似之处，主要有下几点：

• 使用虚拟 DOM。
• 提供了响应式（Reactive）和组件化（Composable）的视图组件。
• 将注意力集中在核心库，而将其他功能（如路由和全局状态管理）交给相关的库。

Vue.js 同 React 的不同之处有以下几方面。

1) 运行时性能

React 和 Vue.js 的运行速度都是非常快的，所以速度并不是在它们之间做选择的决定性因素，但是在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件的子树。如果要避免不必要的子组件重新渲染，开发者需要使用 PureComponent 或手动实现 shouldComponentUpdate() 方法，而且需要非常细心。

而在 Vue.js 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重新渲染，从而使开发者不再需要考虑此类优化，只需更好地专注于应用本身。

2) HTML & CSS

在 React 中，所有组件的渲染都依靠 JSX（JavaScript XML）完成。使用 JSX 的渲染函数有下面几点优势。

• 可以使用完整的编程语言 JavaScript 的功能来构建视图页面。例如可以使用临时变量、JS 自带的流程控制，以及直接引用当前 JS 作用域中的值等。
• 开发工具对 JSX 的支持相比于现有可用的其他 Vue.js 模板还是比较先进的（例如，linting、类型检查、编辑器的自动完成等）。

Vue.js 中默认推荐的是模板（Vue.js 内部也提供了渲染函数，甚至支持JSX）。任何合乎规范的 HTML 都是合法的 Vue.js模板，这也带来了以下几点特有的优势。

• 对于很多习惯了 HTML 的开发者来讲，模板比 JSX 读写起来更自然。
• 基于 HTML 的模板使将已有的应用逐步迁移到 Vue.js 更为容易。
• 使设计师和新人开发者更容易理解和参与到项目中。
• 可以使用其他模板预处理器（例如 Pug）来书写 Vue.js 的模板。

在 React 中通过 CSS-in-JS 方案实现 CSS 作用域，这引入了一个新的面向组件的样式范例，它和普通的 CSS 的撰写过程是有区别的。

另外，虽然在构建时支持将 CSS 提取到一个单独的样式表，但 bundle 中通常还需要一个运行时程序来让这些样式生效。开发者在能够利用 JavaScript 灵活处理样式的同时，也需要权衡 bundle 的大小和运行时的开销。

Vue.js 样式设置的默认方式是在单文件组件里，用 style 的标签定义。同时还可以使用 style 标签的 scoped 属性，来指定样式的作用域。

3) 规模

从向上扩展的角度来讲，Vue.js 和 React 都提供了强大的路由来应对大型应用。

• React 社区在状态管理方面非常有创新精神（例如 Flux、Redux），而这些状态管理模式使得甚至 Redux 本身也可以非常容易地被集成在 Vue.js 应用中。
• 实际上，Vue.js 更进一步地采用了这种模式（Vuex），更加深入集成了 Vue.js 的状态管理解决方案 Vuex，能为开发者带来更好的开发体验。

两者的另一个重要差异是：

• Vue.js 的路由库和状态管理库都由官方维护且与核心库同步更新。
• React 则选择把这些问题交给社区维护，因此创建了一个更分散的生态系统；但相对地，React 的生态系统相比 Vue.js 更加繁荣。

最后，Vue.js 提供了 CLI 脚手架，能让开发者通过交互式的脚手架引导非常容易地构建项目。开发者甚至可以使用它快速开发组件的原型。

React 在这方面也提供了 createreact-app，但是现在还存在以下局限性：

• 它不允许在项目生成时进行任何配置，而 Vue CLI 运行于可升级的运行时依赖之上，该运行时可以通过插件进行扩展。
• 它只提供了一个构建单页面应用的默认选项，而 Vue.js 提供了各种用途的模板。
• 它不能用用户自建的预设配置构建项目，而这对企业环境下预先建立约定是特别有用的。

从向下扩展的角度来讲，React 学习曲线陡峭，在开发者开始学 React 前，需要知道 JSX 和 ES2015，因为许多示例用的是这些语法。开发者需要学习构建系统，虽然在技术上可以用 Babel 来实时编译代码，但是这种做法并不推荐用于生产环境。

就像 Vue.js 向上扩展后类似于 React 一样，Vue.js 向下扩展后就类似于 jQuery。开发者只要把如下标签放到页面中就可以运行。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

然后就可以编写 Vue.js 代码并应用到生产中，只要用 min 版 Vue.js 文件替换掉即可，不用担心其他的性能问题。

由于起步阶段不需学习 JSX、ES2015 及构建系统，所以开发者只需不到一天的时间阅读指南就可以建立简单的应用程序。

4) 原生渲染

React Native 能使开发者用相同的组件模型编写有本地渲染能力的 App（iOS和Android）。能同时跨多平台开发，对开发者来讲是非常棒的。

相应地，Vue.js 和 Weex 会进行官方合作。

Weex 是阿里巴巴发起的跨平台用户界面开发框架，同时也正在 Apache 基金会进行项目孵化，Weex 允许使用 Vue.js 语法开发，不仅可以运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用的组件，而且 Weex 还在积极发展，尽管成熟度还不能和 React Native 相抗衡，但是，Weex 的发展是由世界上最大的电子商务企业的需求在驱动，而 Vue.js 团队也会和 Weex 团队积极合作，相信会为开发者带来更好的开发体验。

2. Vue.js 同 AngularJS（Angular 1）的对比

Vue.js 的一些语法和 AngularJS 的语法很相似（例如 v-if VS ng-if），因为 AngularJS 是 Vue.js 早期开发的灵感来源，而 AngularJS 中存在的许多问题在 Vue.js 中已经得到解决。

Vue.js 同 AngularJS 的区别可以体现在如下几方面。

1)复杂性

在 API 与设计两方面上，Vue.js 都比 AngularJS 简单得多，因此开发者可以快速地掌握它的全部特性并投入开发。

2) 灵活性和模块化

Vue.js 是一个更加灵活开放的解决方案。它允许开发者以希望的方式组织应用程序，而不是在任何时候都必须遵循 AngularJS 制定的规则，这让 Vue.js 能适用于各种项目。

由开发者把握决定权是非常必要的。

Vue CLI 旨在成为 Vue.js 生态系统中标准的基础工具。它使多样化的构建工具通过妥善的默认配置无缝协作在一起，这样开发者就可以专注于应用本身，而不会在配置上花费太多时间。

同时，它也提供了根据实际需求调整每个工具配置的灵活性。

3) 数据绑定

AngularJS 使用双向绑定，而 Vue.js 在不同组件间强制使用单向数据流，这使应用中的数据流更加清晰易懂。

4) 指令与组件

在 Vue.js 中指令和组件分得更清晰。指令只封装了 DOM 操作，而组件代表了一个自给自足的独立单元——有自己的视图和数据逻辑。

在 AngularJS 中，每件事都由指令来做，而组件只是一种特殊的指令。

5) 运行时性能

Vue.js 有更好的性能，并且非常容易优化，因为它不使用脏检查。

在 AngularJS 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化之后，所有 watcher 都要重新计算，并且，如果一些 watcher 触发了另一个更新，则脏检查循环（Digest Cycle）可能要运行多次。

AngularJS 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且采用异步队列更新的方式，所有的数据变化都是独立触发的，除非它们之间有明确的依赖关系。

3. Vue.js 同 Angular（Angular 2）的对比

Angular 同 AngularJS 的名称虽然差不多，但是它们是两个完全不同的框架。Angular 具有优秀的组件系统，并且很多实现都重写了，API 也完全改变了。

Vue.js 同 Angular 的区别主要体现在以下几方面。

1) TypeScript

Angular 事实上必须用 TypeScript 来开发，因为它的文档和学习资源绝大部分是面向 TypeScript 的。TypeScript 有很多好处——静态类型检查在大规模的应用中非常有用，同时对于拥有 Java 和 C# 背景的开发者也非常容易提升开发效率。

然而，并不是所有人都想用 TypeScript——在中小型项目中，引入 TypeScript 可能并不会带来太多明显的优势。在这种情况下，用 Vue.js 会是更好的选择，因为在不用 TypeScript 的情况下使用 Angular 会很有挑战性。

最后，虽然 Vue.js 和 TypeScript 的整合可能不如 Angular 那么深入，但 Vue.js 也提供了官方的类型声明和组件装饰器，并且已有大量用户在生产环境中使用 Vue.js+TypeScript 的组合。

Vue.js 也和微软的 TypeScript/VSCode 团队进行着积极的合作，其目标是为 Vue.js+TypeScript 用户提供更好的类型检查和 IDE 开发体验。

2) 体积

在体积方面，最近的 Angular 版本在使用了 AOT 和 tree-shaking 技术后最终的代码体积减小了许多，但即使如此，一个包含了 Vuex+Vue Router 的 Vue.js 项目的大小（gzip 之后在大约为 30KB）相比上述优化后的 angular-cli 生成的默认项目的大小（大约为65KB）还是要小得多。

3) 灵活性

Vue.js 相比于 Angular 更加灵活，Vue.js 官方提供了构建工具来协助开发者构建项目，但它并不限制开发者如何组织他们的应用代码。

有人可能喜欢严格的代码组织规范，但也有开发者喜欢更灵活自由的方式。

4) 学习曲线

要学习 Vue.js，开发者只需有良好的 HTML 和 JavaScript 基础。有了这些基本的技能，开发者就可以非常快速地通过阅读指南投入开发。

Angular 的学习曲线是非常陡峭的——作为一个框架，它的 API 比 Vue.js 要大得多，开发者也因此需要理解更多的概念才能开始有效率地工作。

当然，Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用，但不可否认的是，这也使它对于经验不甚丰富的开发者相当不友好。