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
Vue.JS 对比其他框架的更多相关文章
- Ember.js和Vue.js对比,哪个框架更优秀?
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...
- 使用Angularjs和Vue.js对比
使用Angularjs和Vue.js对比 之前项目都是使用Angularjs,(注明此处主要讲Angularjs 1)在初步使用Vue.js后做一个简答的对比笔记. 首先从理论上简单说一下各自的特点, ...
- Vue.js前端MVVM框架实战篇
相信大家对vue.js这个前端框架有了一定的了解.想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法. 我们一起来看看“Webpack+Vue”的开发模式相比以往 ...
- ale.js 对比其他框架
欢迎!我们相信你来这里的目的就是为了解 Ale 与其他大型框架的区别,这也正是我们想要在此回答的. 客观来说,作为 Ale 的核心开发者,我们肯定会更偏爱 Ale,认为对于某些问题来讲用 Ale 解决 ...
- 移动端 | Vue.js对比微信小程序基础语法
(1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...
- Liferay 7:如何在Liferay Portlet中使用Angular, React, Vue.js等前端框架
https://web.liferay.com/zh/web/ivan.zaera/blog/-/blogs/modern-frontend-workflows-in-liferay-portal L ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要
像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...
- Web前端-Vue.js必备框架(一)
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
随机推荐
- nodejs 中自定义事件
经常看到 req.on('error', function(){...}); 这种代码. 在nodejs中,可以使用 EventEmitter来实现. 具体的关键词有如下几个: var reqEven ...
- Linux MySQL源码安装缺少ncurses-devel包
在Red Hat Enterprise Linux Server release 5.7 上用源码安装MySQL-5.6.23时,遇到了" remove CMakeCache.txt and ...
- TCP首部解析
TCP首部: TCP数据被封装在一个IP数据报中,如下: TCP首部数据格式: 16位源都口号,16为目的端口号用于寻找发送端和接收端的应用进程,加上IP首部的源端IP及终端IP,唯一的确认一个TCP ...
- ubuntu下设置开机启动服务
原文:http://blog.csdn.net/dante_k7/article/details/7213151 在ubuntu10.04之前的版本都是使用chkconfig来进行管理,而在之后的版本 ...
- 【转载】4412开发板嵌入式QtE应用开发环境搭建
本文转自迅为iTOP-4412开发板实战教程书籍:http://topeetboard.com QtE应用需要使用开发工具qtcreator,本文介绍qtcreator-3.2.2的安装和使用.1. ...
- POJ2677 Tour[DP 状态规定]
Tour Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4307 Accepted: 1894 Description ...
- UVALive - 3942 Remember the Word[树状数组]
UVALive - 3942 Remember the Word A potentiometer, or potmeter for short, is an electronic device wit ...
- unity 绘制三角形
哎 该学的还是要学 参考:http://www.narkii.com/club/thread-369573-1.html unity 顶点绘制三角形 脚本绘制; 其实filter和render就是进行 ...
- jdbc执行Statement接口的步骤
jdbc执行Statement接口的步骤如下: 1)驱动注册程序: Class.forName(com.mysql.jdbc.Driver); 2)获取连接对象: Connection conn = ...
- Codeforces Training S03E01泛做
http://codeforces.com/gym/101078 和ysy.方老师一起打的virtual 打的不是很好...下面按过题顺序放一下过的题的题(dai)解(ma). A 给两个1~n的排列 ...