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://cn.vuejs.org/guide/comparison.html#Riot

VUE框架与其他前端框架比较的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. 移动HTML5前端框架—MUI的使用

    这篇文章主要介绍了移动HTML5前端框架—MUI的使用的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. HTML5给汉字加拼音收起展开组件的实现代码

    HTML 规范是 W3C 与 WHATWG 合作共同产出的,HTML5 因此也不例外,这篇文章主要介绍了HTML5给汉字加拼音收起展开组件的实现代码,需要的朋友可以参考下

  4. ios – React native链接到另一个应用程序

    如果是错误的,有人知道如何调用正确的吗?

  5. ios – React Native – 在异步操作后导航

    我正在使用ReactNative和Redux开发移动应用程序,我正面临着软件设计问题.我想调用RESTAPI进行登录,如果该操作成功,则导航到主视图.我正在使用redux和thunk所以我已经实现了异步操作,所以我的主要疑问是:我应该把逻辑导航到主视图?我可以直接从动作访问导航器对象并在那里执行导航吗?.我对组件中的逻辑没有信心.似乎不是一个好习惯.有没有其他方法可以做到这一点?

  6. 在ios中使用带有React Native(0.43.4)的cocoapods的正确方法是什么?

    我已经挖掘了很多帖子试图使用cocoapods为本地ios库设置一个反应原生项目,但我不可避免地在#import中找到了丢失文件的错误.我的AppDelegate.m文件中的语句.什么是使用反应原生的可可豆荚的正确方法?在这篇文章发表时,我目前的RN版本是0.43.4,而我正在使用Xcode8.2.1.这是我的过程,好奇我可能会出错:1)

  7. ios – React Native WebView滚动行为无法按预期工作

    如何确保滚动事件的行为与ReactNative应用程序中的浏览器相同?

  8. ios – React Native – BVLinearGradient – 找不到’React/RCTViewManager.h’文件

    谢谢.解决方法几天前我遇到了完全相同的问题.问题是在构建应用程序时React尚未链接.试试这个:转到Product=>Scheme=>管理方案…=>点击你的应用程序Scheme,然后点击Edit=>转到Build选项卡=>取消选中ParallelizeBuild然后点击标志添加目标=>搜索React,选择第一个名为React的目标,然后单击Add然后在目标列表中选择React并将其向上拖动到该列表中的第一个.然后转到Product=>再次清理并构建项目.这应该有所帮助.

  9. ios – React Native – NSNumber无法转换为NSString

    解决方法在你的fontWeight()函数中也许变成:

  10. ios – React native error – react-native-xcode.sh:line 45:react-native:command not found命令/ bin/sh失败,退出代码127

    尝试构建任何(新的或旧的)项目时出现此错误.我的节点是版本4.2.1,react-native是版本0.1.7.我看过其他有相同问题的人,所以我已经更新了本机的最新版本,但是我仍然无法通过xcode构建任何项目.解决方法要解决此问题,请使用以下步骤:>使用节点版本v4.2.1>cd进入[你的应用]/node_modules/react-native/packager>$sh./packager.s

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部