三种Web前端框架比较与介绍--Vue, react, angular

 

1、Angular

一、MVVM（Model）(View)(View-model)；

二、模块化（Module）控制器（Contoller）依赖注入；

三、双向数据绑定：界面的操做能实时反映到数据，数据的变动能实时展示到界面；

四、指令(ng-click ng-model ng-href ng-src ng-if...)；

五、服务Service($compile $filter $interval $timeout $http...)。

备注：

(1) api比较全，功能比较完善。关于数据绑定，使用双向绑定，可是vue不一样组件间强制使用单向数据流。
同时关于性能方面：angular观察数据是使用脏检查，而vue是使用基于依赖追踪的观察系统而且异步更新，左右的数据变化都是独立触发。

(2) 学习曲线很是陡峭，api面积相对于vue大不少，但angular适合构建复杂的大型应用。

2、React

React 起源于 Facebook 的内部项目，由于该公司对市场上全部 JavaScript MVC 框架，都不满意，就决定本身写一套，用来架设Instagram 的网站。作出来之后，发现这套东西很好用，就在2013年5月开源了。

这个项目自己也越滚越大，从最先的UI引擎变成了一整套先后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，但愿用写 Web App 的方式去写 Native App。若是可以实现，整个互联网行业都会被颠覆，由于同一组人只须要写一次 UI ，就能同时运行在服务器、浏览器和手机。

React主要用于构建UI。你能够在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也能够是静态的HTML DOM元素、也能够传递动态变量、甚至是可交互的应用组件。

 

3、Vue

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有很是容易上手的API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。；

Vue.js是一个构建数据驱动的Web界面的库。

Vue.js是一套构建用户界面的 渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

 

特色：

一、模块化，目前最热的方式是在项目中直接使用ES6的模块化，结合Webpack进行项目打包；

二、组件化，创造单个component后缀为.vue的文件，包含template(html代码)，script(es6代码),style(css样式)；

三、路由。

 

 

4、比较

1 angular和vue的差异

　　Angular是mvvm框架, 而vue是一个渐进式的框架, 至关于view层, 都有双向数据绑定,  可是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现, 而angular是有本身实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低, vue须要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue能够有过个vue实例；

注：angular能够进行自动化的测试，就是通常作移动端应用时，ui-router路由方面难以处理，常常出错，这块是一个大坑。

2  Vue & React

总体上看Vue与react比较，相同之处在于：
- 都使用了virtual DOM
- 提供了响应式和组件化的视图组件
- 将注意力集中在核心库，而将其余功能如路由和全局状态管理交给相关的库

 

在性能方面，React中，某个组件发生变化，它会以该组件为根，从新渲染整个组件子树。而在Vue组件的依赖是在渲染过程当中自动追踪的，全部能知道哪一个组件确实须要被渲染。

在模板方面，vue中html,css,js是分开的，而react中全部组件渲染都依靠JSX,HTML，css,js都是利用jsx.

在规模方面的话，vue和react都提供了强大的路由来应对大型应用。在状态管理方面，分别使用vuex和Redux来进行全局状态管理。vue的生态系统库没有react繁荣。

同时react学习曲线陡峭，vue相对而言比较好上手。

 

具体来说：

类似之处

• 他们都是JavaScript的UI框架，专一于创造前端的富应用
• 不一样于早期的JavaScript框架“功能齐全”，Reat与Vue只有框架的骨架，其余的功能如路由、状态管理等是框架分离的组件。
• Vue.js(2.0版本)与React的其中最大一个类似之处，就是他们都使用了一种叫’Virtual DOM’的东西
• 都鼓励组件化
• 看到React和Vue都有’props’的概念，这是properties的简写。props在组件中是一个特殊的属性，容许父组件往子组件传送数据。
• React和Vue都有本身的构建工具，你可使用它快速搭建开发环境
• React和Vue都有很好的Chrome扩展工具去帮助你找出bug。
• Vue与React最后一个类似但略有不一样之处是它们配套框架的处理方法。相同之处在于，两个框架都专一于UI层，其余的功能如路由、状态管理等都交由同伴框架进行处理。

react

• 数据流单向
• React推广了Virtual DOM，并创造了新的语法——JSX，JSX容许开发者在JavaScript中书写HTML
• React同样由如Facebook这类大公司维护
• props对于子组件来讲是必须的，由于它依赖一个“单一数据源”做为它的“状态”
• React可使用Create React App (CRA)
• 而React的react-router和react-redux则是由社区成员维护，它们都不是官方维护的。
• React与Vue最大的不一样是模板的编写
• 在React中你须要使用setState()方法去更新状态
• 多数状况下，框架内置的状态管理是不足以支撑大型应用的，Redux或Vuex等状态管理方案是必须使用的。

vue

• 数据双向绑定
• Vue使用模板系统而不是JSX，使其对现有应用的升级更加容易,这是由于模板用的就是普通的HTML，经过Vue来整合现有的系统是比较容易的，不须要总体重构
• Vue主要是由一位开发者进行维护的
• 而在Vue中，props略有不一样。它们同样是在组件中被定义，但Vue依赖于模板语法，你能够经过模板的循环函数更高效地展现传入的数据。
• Vue对应的则是vue-cli
• Vue的核心团队维护着vue-router和vuex
• React与Vue最大的不一样是模板的编写
• 在Vue中，state对象并非必须的，数据由data属性在Vue对象中进行管理。
• Vue的）解决方案适用于小型应用，但对于对于大型应用而言不太适合。

 

具体可参考文章 Vue.js与React的全面对比

 

 

 

参考文章

AngularJS与Vue的比较

Vue,react,angular三种框架比较

vue和react 类似和区别