对比其它框架

Angular

选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合:

有意思的是,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 获奖站点

再多说几句:

Ember

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

也就是说,最好比较 Vue.js 内核和 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 提供了一些显著优处: