1.2.2　单页应用框架对比

在学习Vue.js之前，我们要知道为什么学习它。

目前市面上比较知名的单页应用框架是Angular、React、Vue.js，我们依次来了解一下。

1．Angular

Angular作为SPA的老大，源于Google，在过去若干年发挥了非常大的作用。它的优点是：

·　业内第一个SPA框架。

·　实现了前端的MVC解耦。

·　双向绑定。Model层的数据发生变化会直接影响View，反之亦然。

缺点也很明显：

·　难学、难用。

·　Angular 1.x的文档很差，从2.0版开始稍微变好一些。

Angular 1.x的文档Directive缺点为文档不全，没有示例代码，很多东西调试起来也没有专门的工具。另外，想使用第三方组件的话，需要单独为Angular做适配。例如，jQuery-Upload前端上传文件的组件非常不好用。

虽然Angular的功能很全面，但是由于学习曲线过于陡峭，上手很慢，维护起来也很麻烦。因此，现在在论坛上的口碑也开始下降。官方网站为https://github.com/angular。

2．React

React是由Facebook推出的SPA框架，宣称的特点是Learn once, write anywhere，很吸引人。

React的优点是：

·　使用JS一种语言就可以写前端（H5、App）+后端。

·　React Native可以直接运行在手机端，性能很棒，接近于原生App，并且可以热更新，免去了手机端App每次都要重新下载和安装的过程。

·　周边组件很多。

React的特点是：

（1）HTML代码需要写在JS文件中。例如：

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}
ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);

上面代码的编程方式也叫“多语言混合式编程”，特点是代码混乱。

（2）把前后端代码写在一起。

//前端代码
…
//后端代码
…

需要说明的是，React在国外非常火爆，其在Google上的搜索热度超过了Vue.js，而在GitHub的关注度上则是Vue.js领先，可能原因在于Vue.js在国内的火爆度超过React。

3．Vue.js

Vue.js是一个MVVM（Model - View - ViewModel）的SPA框架。

·　Model：数据。

·　View：视图。

·　ViewModel：连接View与Model的纽带。

Vue.js一经推出，就获得了各大社区的好评。它的优点是：

（1）简单好学，好用。

·　Angular：学习两到四周。

·　React：学习两周。

·　Vue.js：学习三天到一周。

这三个框架做的事都一样。

（2）Angular、React具备的功能，Vue.js都具备（React Native除外）。

Vue.js在2014年2月被推出的时候，核心文档就具备了两种语言：中文和英文，这对于母语是汉语的国人来说意义重大，可以非常快速地上手。官方网站为https://github.com/vuejs/vue。

4．为什么用Vue.js

首先，我们在评价一个技术的时候，最简单的办法就是看它有多火，这个体现在GitHub的stars数目上。

截至2022年1月底，三个项目的关注数分别是：

·　Angular：7.9万。

·　React：18.2万。

·　Vue.js：19.3万。

可以看出，Vue.js排在第一位。

其次，国内的公司使用Vue.js开发的居多，学习门槛低、上手快、找工作非常方便。

最后，Vue.js的官方文档是中文的（网址：https://cn.vuejs.org/）。