Vue.JS 对比其余框架

Angular

选择 Vue 而不选择 Angular，有下面几个缘由，固然不是对每一个人都适合：

• 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多，所以你能够快速地掌握它的所有特性并投入开发。

• Vue.js 是一个更加灵活开放的解决方案。它容许你以但愿的方式组织应用程序，而不是任什么时候候都必须遵循 Angular 制定的规则。它仅仅是一个视图层，因此你能够将它嵌入一个现有页面而不必定要作成一个庞大的单页应用。在配合其余库方面它给了你更大的的空间，但相应，你也须要作更多的架构决策。例如，Vue.js 核心默认不包含路由和 Ajax 功能，而且一般假定你在应用中使用了一个模块构建系统。这多是最重要的区别。

• Angular 使用双向绑定，Vue 也支持双向绑定，不过默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。

• 在 Vue.js 中指令和组件分得更清晰。指令只封装 DOM 操做，而组件表明一个自给自足的独立单元 —— 有本身的视图和数据逻辑。在 Angular 中二者有很多相混的地方。

• Vue.js 有更好的性能，而且很是很是容易优化，由于它不使用脏检查。Angular，当 watcher 愈来愈多时会变得愈来愈慢，由于做用域内的每一次变化，全部 watcher 都要从新计算。而且，若是一些 watcher 触发另外一个更新，脏检查循环（digest cycle）可能要运行屡次。 Angular 用户经常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的做用域。Vue.js 则根本没有这个问题，由于它使用基于依赖追踪的观察系统而且异步列队更新，全部的数据变化都是独立地触发，除非它们之间有明确的依赖关系。惟一须要作的优化是在 v-for 上使用 track-by。

有意思的是，Angular 2 和 Vue 用类似的设计解决了一些 Angular 1 中存在的问题。

React

React.js 和 Vue.js 确实有一些类似 —— 它们都提供数据驱动、可组合搭建的视图组件。固然它们也有许多不一样。

首先，内部实现本质上不一样。React 的渲染创建在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 从新渲染 Virtual DOM，比较计算以后给真实 DOM 打补丁。

Virtual DOM 提供了一个函数式的方法描述视图，这真的很棒。由于它不使用数据观察机制，每次更新都会从新渲染整个应用，所以从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。

Vue.js 不使用 Virtual DOM 而是使用真实 DOM 做为模板，数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。可是，相对于常见的误解——Virtual DOM 让 React 比其它的都快， Vue.js 实际上性能比 React 好，并且几乎不用手工优化。而 React，为了最优化的渲染须要到处实现 shouldComponentUpdate 和使用不可变数据结构。

在 API 方面，React（或 JSX）的一个问题是，渲染函数经常包含大量的逻辑，最终看着更像是程序片段（实际上就是）而不是界面的视觉呈现。对于部分开发者来讲，他们可能以为这是个优势，但对那些像我同样兼顾设计和开发的人来讲，模板能让咱们更好地在视觉上思考设计和 CSS。JSX 和 JavaScript 逻辑的混合干扰了我将代码映射到设计的思惟过程。相反，Vue.js 经过在模板中加入一个轻量级的 DSL (指令系统)，换来一个依旧直观的模板，且能将逻辑封装进指令和过滤器中。

React 的另外一个问题是：因为 DOM 更新彻底交给 Virtual DOM 管理，当想要本身控制 DOM 时就有点棘手了（虽然理论上能够作到，可是这样作就本质上违背了 React 的设计思想）。若是应用须要特别的自定义 DOM 操做，特别是复杂时间控制的动画，这个限制就很讨厌。在这方面，Vue.js 更灵活，有许多用 Vue.js 制做的 FWA/Awwwards 获奖站点。

再多说几句：

• React 团队雄心勃勃，计划让 React 成为通用平台的 UI 开发工具，而 Vue 专一于为 Web 提供实用的解决方案。

• React，因为它的函数式特质，能够很好地使用函数式编程模式。可是对于初级开发者和初学者这也致使较大的学习难度。Vue 更易学习并能快速投入开发。

• 对于大型应用，React 社区已经创造了大量的状态管理方案，例如 Flux/Redux。Vue 自己不解决这个问题（React 内核也是），可是能够轻松地修改状态管理模式，实现一个相似的架构。Vue 有本身的状态管理方案 Vuex，并且 Vue 也能够与 Redux 一块儿用。

• React 的开发趋势是将全部东西都放在 JavaScript 中，包括 CSS。已经有许多 CSS-in-JS 方案，可是全部的方案多多少少都有它的问题。并且更重要的是，这么作脱离了标准的 CSS 开发经验，而且很难和 CSS 社区的已有工做配合。Vue 的 单文件组件 在把 CSS 封装到组件模块的同时仍然容许你使用你喜欢的预处理器。

Ember

Ember 是一个全能框架。它提供大量的约定，一旦你熟悉了它们，开发会很高效。不过，这也意味着学习曲线较高，并且不灵活。在框架和库（加上一系列松散耦合的工具）之间权衡选择。后者更自由，可是也要求你作更多的架构决定。

也就是说，最比如较 Vue.js 内核和 Ember 的模板与数据模型层：

• Vue 在普通 JavaScript 对象上创建响应，提供自动化的计算属性。在 Ember 中须要将全部东西放在 Ember 对象内，而且手工为计算属性声明依赖。

• Vue 的模板语法能够用全功能的 JavaScript 表达式，而 Handlebars 的语法和帮助函数语法相比之下很是受限。

• 在性能上，Vue 甩开 Ember 几条街，即便是 Ember 2.0 最新的 Glimmer 引擎。Vue 自动批量更新，在性能比较关键时 Ember 要手工管理循环。

Polymer

Polymer 是另外一个由 Google 支持的项目，实际上也是 Vue.js 的灵感来源之一。Vue.js 的组件能够类比为 Polymer 中的自定义元素，它们提供相似的开发体验。最大的不一样在于，Polymer 依赖最新的 Web 组件特性，在不支持的浏览器中，须要加载笨重的 polyfill，性能也会受到影响。相对的，Vue.js 无需任何依赖，最低兼容到IE9。

另外，在 Polymer 1.0 中，为了性能开发团队严格限制了它的数据绑定系统。例如，Polymer 模板支持的表达式仅有逻辑逆运算和简单的方法调用。它的计算属性实现得也不是很灵活。

最后，当发布到生产环境时，Polymer 元素须要用专用工具 vulcanizer 打包。相比之下，单文件 Vue 组件能与 Webpack 无缝整合，于是你能够轻松在组件中使用 ES6 及任意 CSS 预处理器。

Riot

Riot 2.0 提供相似的基于组件的开发模式（Riot 称之为“标签”），API 小而美。我认为 Riot 与 Vue 在设计思路上有许多相同点。不过，尽管比 Riot 重一点，Vue 提供了一些显著优处：

• 真实的条件渲染，Riot 渲染全部的分支，而后简单地显示/隐藏它们。
• 一个强大得多的路由器，Riot 的路由 API 过于简陋。
• 更成熟的工具链支持，见 Webpack + vue-loader。
• 过渡效果系统，Riot 没有。
• 更佳的性能。Riot 实际上使用脏检查而不是 Virtual DOM，于是遭受跟 Angular 同样的性能问题。

原文地址http://www.cnblogs.com/shikyoh/p/5841105.html