Vue与其他其他框架对比(二)

请关注DeveloperQ公众号

DeveloperQ公众号

规模

向上扩展

Vue 和 React 都提供了强大的路由来应对大型应用。React 社区在状态管理方面非常有创新精神(比如Flux、Redux),而这些状态管理模式甚至 Redux 本身也可以非常容易的集成在 Vue 应用中。实际上,Vue 更进一步地采用了这种模式(Vuex),更加深入集成 Vue 的状态管理解决方案 Vuex 相信能为你带来更好的开发体验。

两者另一个重要差异是,Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。

最后,Vue 提供了Vue-cli 脚手架,能让你非常容易地构建项目,包含了 WebpackBrowserify,甚至 no build system。React 在这方面也提供了create-react-app,但是现在还存在一些局限性:

  • 它不允许在项目生成时进行任何配置,而 Vue 支持 Yeoman-like 定制。

  • 它只提供一个构建单页面应用的单一模板,而 Vue 提供了各种用途的模板。

  • 它不能用用户自建的模板构建项目,而自建模板对企业环境下预先建立协议是特别有用的。

而要注意的是这些限制是故意设计的,这有它的优势。例如,如果你的项目需求非常简单,你就不需要自定义生成过程。你能把它作为一个依赖来更新。如果阅读更多关于不同的设计理念

向下扩展

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

就像 Vue 向上扩展好比 React 一样,Vue 向下扩展后就类似于 jQuery。你只要把如下标签放到页面就可以运行:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

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


本地渲染

ReactNative 能使你用相同的组件模型编写有本地渲染能力的 APP(iOS 和 Android)。能同时跨多平台开发,对开发者是非常棒的。相应地,Vue 和 Weex 会进行官方合作,Weex 是阿里的跨平台用户界面开发框架,Weex 的 JavaScript 框架运行时用的就是 Vue。这意味着在 Weex 的帮助下,你使用 Vue 语法开发的组件不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用。

在现在,Weex 还在积极发展,成熟度也不能和 ReactNative 相抗衡。但是,Weex 的发展是由世界上最大的电子商务企业的需求在驱动,Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。


MobX

Mobx 在 React 社区很流行,实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上,React + Mobx 也可以被认为是更繁琐的 Vue,所以如果你习惯组合使用它们,那么选择 Vue 会更合理。


Angular 1

Vue 的一些语法和 Angular 的很相似(例如 v-if vs ng-if)。因为 Angular 是 Vue 早期开发的灵感来源。然而,Angular 中存在的许多问题,在 Vue 中已经得到解决。


复杂性

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


灵活性和模块化

Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是在任何时候都必须遵循 Angular 1 制定的规则,这让 Vue 能适用于各种项目。我们知道把决定权交给你是非常必要的。
这也就是为什么我们提供 
Webpack template,让你可以用几分钟,去选择是否启用高级特性,比如热模块加载、linting、CSS 提取等等。


数据绑定

Angular 1 使用双向绑定,Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。


指令与组件

在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。


性能

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

在 Angular 1 中,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

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

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


Angular 2

我们单独将 Angular 2 作分类,因为它完全是一个全新的框架。例如:它具有优秀的组件系统,并且许多实现已经完全重写,API 也完全改变了。


TypeScript

Angular 1 面向的是较小的应用程序,Angular 2 已转移焦点,面向的是大型企业应用。在这一点上 TypeScript 经常会被引用,它对那些喜欢用 Java 或者 C# 等类型安全的语言的人是非常有用的。

Vue 也十分适合制作企业应用,你也可以通过使用官方类型官方装饰器来支持 TypeScript,这完全可由你的方案来定。


大小和性能

在性能方面,这两个框架都非常的快。但目前尚没有足够的数据用例来具体展示。如果你一定要量化这些数据,你可以查看第三方参照,它表明 Vue 2 相比 Angular2 是更快的。

在大小方面,虽然 Angular 2 使用 tree-shaking 和离线编译技术使代码体积减小了许多。但包含编译器和全部功能的 Vue2(23kb) 相比 Angular 2(50kb) 还是要小的多。但是要注意,用 Angular 2 的 App 的体积缩减是使用了 tree-shaking 移除了那些框架中没有用到的功能,但随着功能引入的不断增多,尺寸会变得越来越大。


灵活性

Vue 相比于 Angular 2 则更加灵活,Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何构建。有人可能喜欢用统一的方式来构建,也有很多开发者喜欢这种灵活自由的方式。


学习曲线

开始使用 Vue,你使用的是熟悉的 HTML、符合 ES5 规则的 JavaScript(也就是纯 JavaScript)。有了这些基本的技能,你可以快速地掌握它(指南)并投入开发 。

Angular 2 的学习曲线是非常陡峭的。即使不包括 TypeScript,它的开始指南中所用的就有 ES2015 标准的 JavaScript,18个 NPM 依赖包,4 个文件和超过 3 千多字的介绍,这一切都是为了完成个 Hello World。而Vue’s Hello World就非常简单。甚至我们并不用花费一整个页面去介绍它。


Ember

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

也就是说,我们最好比较的是 Vue 内核和 Ember 的模板数据模型层:

  • Vue 在普通 JavaScript 对象上建立响应,提供自动化的计算属性。在 Ember 中需要将所有东西放在 Ember 对象内,并且手工为计算属性声明依赖。

  • Vue 的模板语法可以用全功能的 JavaScript 表达式,而 Handlebars 的语法和帮助函数相比来说非常受限。

  • 在性能上,Vue 甩开 Ember 几条街,即使是 Ember 2.0 的最新 Glimmer 引擎。Vue 能够自动批量更新,而 Ember 在关键性能场景时需要手动管理。


Knockout

Knockout 是 MVVM 领域内的先驱,并且追踪依赖。它的响应系统和 Vue 也很相似。它在浏览器支持以及其他方面的表现也是让人印象深刻的。它最低能支持到 IE6,而 Vue 最低只能支持到 IE9。

随着时间的推移,Knockout 的发展已有所放缓,并且略显有点老旧了。比如,它的组件系统缺少完备的生命周期事件方法,尽管这些在现在是非常常见的。以及相比于 Vue 调用子组件的接口它的方法显得有点笨重。

如果你有兴趣研究,你还会发现二者在接口设计的理念上是不同的。这可以通过各自创建的 simple Todo List 体现出来。或许有点主观,但是很多人认为 Vue 的 API 接口更简单结构更优雅。


Polymer

Polymer 是另一个由谷歌赞助的项目,事实上也是 Vue 的一个灵感来源。Vue 的组件可以粗略的类比于 Polymer 的自定义元素,并且两者具有相似的开发风格。最大的不同之处在于,Polymer 是基于最新版的 Web Components 标准之上,并且需要重量级的 polyfills 来帮助工作(性能下降),浏览器本身并不支持这些功能。相比而言,Vue 在支持到 IE9 的情况下并不需要依赖 polyfills 来工作。

在 Polymer 1.0 版本中,为了弥补性能,团队非常有限的使用数据绑定系统。例如,在 Polymer 中唯一支持的表达式只有布尔值否定和单一的方法调用,它的 computed 方法的实现也并不是很灵活。

Polymer 自定义的元素是用 HTML 文件来创建的,这会限制使用 JavaScript/CSS(和被现代浏览器普遍支持的语言特性)。相比之下,Vue 的单文件组件允许你非常容易的使用 ES2015 和你想用的 CSS 预编译处理器。

在部署生产环境时,Polymer 建议使用 HTML Imports 加载所有资源。而这要求服务器和客户端都支持 Http 2.0 协议,并且浏览器实现了此标准。这是否可行就取决于你的目标用户和部署环境了。如果状况不佳,你必须用 Vulcanizer 工具来打包 Polymer 元素。而在这方面,Vue 可以结合异步组件的特性和 Webpack 的代码分割特性来实现懒加载(lazy-loaded)。这同时确保了对旧浏览器的兼容且又能更快加载。

而 Vue 和 Web Component 标准进行深层次的整合也是完全可行的,比如使用 Custom Elements、Shadow DOM 的样式封装。然而在我们做出严肃的实现承诺之前,我们目前仍在等待相关标准成熟,进而再广泛应用于主流的浏览器中。


Riot

Riot 2.0 提供了一个类似于基于组件的开发模型(在 Riot 中称之为 Tag),它提供了小巧精美的 API。Riot 和 Vue 在设计理念上可能有许多相似处。尽管相比 Riot ,Vue 要显得重一点,Vue 还是有很多显著优势的:

  • 过渡效果系统。Riot 现在还没有提供。
    -功能更加强大的路由机制,Riot 的路由功能的 API 是极少的。

  • 更好的性能。Riot 使用了 遍历 DOM 树 而不是虚拟 DOM,但实际上用的还是脏检查机制,因此和 Angular 1 患有相同的性能问题。

  • 更多成熟工具的支持。Vue 提供官方支持Webpack 和 Browserify,而 Riot 是依靠社区来建立集成系统。

    长按图识别二维码

    文章来源于网络,如有侵权请及时联系管理员删除。







相关问题推荐