互联网发展速度是非常快的，程序员用的前端框架也在不断的迭代和变化，以前大家常用的是JQuery、Bootstrap框架，

现在形成React、Vue、Angular三大主流框架，这三个框架各有各的优势，而且较为成熟

01、React

React框架是起源于Facebook的项目，当时在公司内部盛行JavaScript框架，但是感觉不是很满意，就写了React框架。React可以轻易的解决跨浏览器兼容的问题，主要是通过对DOM的模拟减少与DOM的交互做到的。

React的模块化把组件进行了隔离，出现问题的时候更方便程序员对其进行修改，而且由于JavaScript，因此更有利于搜索引擎的优化。

02、Vue

Vue是相对比较轻量级的框架，是通过进行双向数据绑定来达到驱动页面的效果，大多程序员在学习新框架的时候都会先从Vue开始。

Vue比较简单，官方文档介绍的很清楚，可以非常快速的通过异步批处理的方式对DOM进行更新，也能把可复用的、解耦的组件组合在一起使用，更能允许多种模块的安装，场景使用也更加灵活。

03、Angular

Angular拥有很好的应用程序，是一个以JavaSpript编写的库，模板功能也异常强大，本身就带有丰富的Angular指令。一方面可以通过指令扩宽HTML，一方面可以通过表达式绑定数据到HTML。因为引入了Java的相关内容，因此更容易些出复用的代码，不仅方便了以后的工作，也可以提高团队项目开发的速度。

Vue和React对⽐：

一，两者的共同点

1: 都使用Virtual DOM 2: 都提供了响应式和组件化的视图组件 3:
核心集中在UI层面，类似于路由，状态管理，数据请求都交给其他库 4: 都是单向数据流

二，两者的不同

1: PureComponent && shouldComponentUpdate

在React应用中，当某个组件的状态发生变化时，它会以这个组件为根，重新渲染整组组件子树。如果想要避免这一行为，需要使用PureComponent或者实现shouldComponentUpdate方法。

但是使用PureComponent或者shouldComponentUpdate的前提是，需要保证改组件的渲染结果都由props所决定。如果此组件不符合这个条件，可能就会得不到你想要的渲染结果。

于此相反的是，是否需要重新渲染子组件，是由Vue自己完成的，而不需要开发者特定地写代码去实现，使得开发者可以专注于业务的实现上。

2: 视图表现和逻辑要不要分开

这一点可能大家用眼睛一看就知道，在Vue里，我们创建一个组件就是创建一个.vue文件，然后把这个组件需要的HTML，
JS逻辑，CSS都放到这一个文件内，和我们传统的WEB保持一致。Vue的组件也被叫做“视图表现组件”。

而React的作者认为对于UI来说，视图表现，数据和逻辑天然就是耦合的，所以没必要把它们分开，所以React创造了JSX。任何的JSX在编译取值之后都成为JS对象，所以JSX相当于变成了JS里面的一种新的数据类型。它可以像JS里面的其他数据类型一样，被赋值给一个JS变量，可以作为函数参数，可以作为函数返回值，也可以用在if或者for等流控制语句。

现在我们看到了表面的现象，但是或许要去问一句，为什么这2者在这点上的差别有点大。这跟这2个库的设计初衷，或者直接说这2个库背后的作者背景有很大关系。

我们都知道React是由Facebook的人开发的，React最开始的口号是"Rethinking Best
Practices"，而他们想要开发者去rethink。他们想要传达的是一种新的理念。你第一次接触JSX的时候，你至少得去看以下这个新概念是什么，它又是基于ES6的，所以可能在你写下第一行代码之前，至少得先花点时间学习一下新知识。

“Vue
从一开始的定位就是尽可能的降低前端开发的门槛，让更多的人能够更快地上手开发”。所以尽量地不引入新的概念，让熟悉web开发的人能更快速和简单地过渡到使用Vue开发。

3: 单向数据绑定和双向数据绑定

在这里首先要说一点，经常有人把单向数据流和单向数据绑定搅和到一起。
React是单向数据流的，那能不能实现双向数据绑定呢？ 怎么？难道假如React是双向数据流，那自然就是双向数据绑定了吗？
接下来我们来理清一下概念：

A: 数据绑定—是指在一个组件范围内，数据（model）和视图（view）之间的同步关系。
React是单向数据绑定，在React里面，假如我们有一个input，用户操作input改变了input的值，state上面的相应的数据并不会自动改变，需要开发者在input的handler方法里通过“event.target.value”获取input的值，再通过setState()方法来改变。
Vue提供了双向数据绑定，通过指令v-model来实现，例如：。假如用户操作input，修改了input里面的内容，不需要开发者手动去获取input的value，这里的message变量会自动更新。
B: 数据流----是指父组件和子组件之间的数据传递
Vue和React都是单向数据流，数据都是只能从父组件传到子组件，都是通过props传递的。
如果子组件想要向父组件传递数据，Vue和React里面都可以通过callback函数来完成。当我们在父组件里面拿到了某个子组件传递的数据，想要怎么用就取决了父组件了。
子组件做不到（更不应该）去直接改变父组件的数据。因为对于同一个父组件来说，可能很多个子组件都使用了同一个prop，假如子组件能改变父组件的其中一个数据，那么这就会影响到其他所有的使用了这个数据的子组件。
所以数据绑定和数据流是两个独立的概念，互相之间不影响，更没有因果关系。

不过我个人还是比较喜欢Vue框架的，所以