vue react angular比较

VUE

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM

Vue.js是当下很火的一个JavaScript MVVMModel-View-ViewModel),它是以数据驱动和组件化的思想构建的。学习Vue.js时请先抛开jQuery手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery。

使用Vue的过程就是定义MVVM各个组成部分的过程。

1)定义View

2)定义Model

3创建一个Vue实例或"ViewModel",它用于连接View和Model在创建Vue实例时,需要传入一个选项对象,选项对象可以包含数据、挂载元素、方法、生命周期钩子等等。

 

Vue特点

1、轻量级的框架

2、双向数据绑定  比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值

3、组件化  页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来

4、单向响应的数据流

5、指令

6、插件化

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的特性。

VUEreact差异

性能

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

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

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

HTML&CSS

1、 React 中,一切都是 JavaScriptHTML 可以用 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)

VUEangular1比较

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

VUEangular2比较

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 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用;但不可否认的是,这也使得它对于经验不甚丰富的开发者相当的不友好。




猜你喜欢

转载自blog.csdn.net/qqwan7/article/details/80803027