您的位置:首页 > 产品设计 > UI/UE

vue对比与其他框架

2017-07-10 14:30 260 查看

简单对比其他框架

一、React

React特点

1.声明式设计 −React采用声明范式,可以轻松描述应用。

2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX
是 JavaScript 语法的扩展。React开发不一定使用 JSX ,但我们建议使用它。

5.组件 − 通过 React
构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React
实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

React 和 Vue
有许多相似之处

1、使用 Virtual DOM(虚拟 DOM通过 diff 比对,找到变更节点,重新渲染)

2、提供了响应式(Reactive)和组件化(Composable)的视图组件。

3、将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。

4、使用Prop传递数据,prop 是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来。子组件不应该直接改变prop的值。

5、都提供了路由、状态管理器(react对应的redux,vue对应vuex)等。

6、都提供合理的钩子函数,可以让开发者定制化地去处理需求。

7、在组件开发中都支持mixins的特性。

VUE与react差异

性能上
1、React
和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

2、在 React
应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,有相应的处理机制PureComponent。在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染

3、用 Vue
和 React 开发大多数应用的速度都是足够快的。假如你要开发一个对性能要求比较高的数据可视化或者动画的应用时,你需要了解到下面这点:在开发中,Vue 每秒最高处理 10 帧,而React 每秒最高处理不到 1 帧。

HTML&CSS

1、在 React
中,一切都是 JavaScript。HTML 可以用 JSX 来表达。Vue 的整体思想是拥抱经典的 Web 技术(采用template方式,比如v-on 的各种修饰符,在 JSX
中实现对应的功能会需要多得多的代码),事实上 Vue 也提供了render渲染函数 ,甚至支持
JSX。

2、在 React
中,现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理(有其优越性,具体不详说),通过依赖引入css模块,而Vue 可以让你在每个单文件组件中完全访问
CSS
,方便的规定css作用域,也可引入css模块。

其他

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

2、从两者提供的路由、状态管理器等向上扩展来看,Vue、React做得都比较完善,从向下扩展来看,Vue就类似于 jQuery。你只要把如下标签放到页面就可以运行:

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

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

4、Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。

二、Angular

Angular1 是比较新的技术,版本 1.0
是在 2012 年发布的。
AngularJS2 发布于2016年9月份,它是基于ES6来开发的。
Angular2.x与Angular1.x
的区别:Angular2.x与Angular1.x 的区别类似 Java 和 JavaScript 或者说是雷锋与雷峰塔的区别。

AngularJS2组成

1、模块 (Modules)

2、组件 (Components)

3、模板 (Templates)

4、元数据 (Metadata)

5、数据绑定 (Data Binding)

6、指令 (Directives)

7、服务 (Services)

8、依赖注入 (Dependency Injection)

VUE与angular1比较

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

VUE与angular2比较

1、Angular
事实上必须用 TypeScript
(TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程)来开发,因为它的文档和学习资源几乎全部是面向
TS 的。TS 有很多显而易见的好处—— 静态类型检查在大规模的应用中非常有用,同时对于 Java 和 C# 背景的开发者也是非常提升开发效率的。

2、在大小和性能上,在性能方面,这两个框架都非常的快,我们也没有足够的实际应用数据来下一个结论。如果你一定想看些数据的话,你可以参考这个第三方跑分。单就这个跑分来看,Vue
似乎比 Angular 要更快一些。在大小方面,最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此,一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 Angular CLI 生成的默认项目尺寸 (~130kb) 还是要小的多。

3、灵活性。Vue
相比于 Angular 更加灵活,Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范,但也有开发者喜欢更灵活自由的方式。

4、学习曲线。要学习 Vue,你只需要有良好的 HTML 和 JavaScript 基础。Angular 的学习曲线是非常陡峭的
—— 作为一个框架,它的 API 面积比起 Vue 要大得多,你也因此需要理解更多的概念才能开始有效率地工作。当然,Angular本身的复杂度是因为它的设计目标就是只针对大型的复杂应用;但不可否认的是,这也使得它对于经验不甚丰富的开发者相当的不友好。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: