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

一、Angular

1、MVVM(Model)(View)(View-model);

2、模块化(Module)控制器(Contoller)依赖注入;

3、双向数据绑定:界面的操作能实时反映到数据,数据的变更能实时展现到界面;

4、指令(ng-click ng-model ng-href ng-src ng-if...);

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

备注:

(1) api比较全,功能比较完善。关于数据绑定,使用双向绑定,但是vue不同组件间强制使用单向数据流。

同时关于性能方面:angular观察数据是使用脏检查,而vue是使用基于依赖追踪的观察系统并且异步更新,左右的数据变化都是独立触发。

(2) 学习曲线非常陡峭,api面积相对于vue大很多,但angular适合构建复杂的大型应用。

二、React

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机。

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

三、Vue

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

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

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

特点:

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

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

3、路由。

四、比较

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 相似和区别