Vue.js快速入门
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.2 为什么要使用Vue.js

在本章中，我们会从多个角度思考这个问题。

1.2.1 单页应用

Web的应用分两类：传统Web页面应用和单页应用（Single Page App）。

1. 传统Web页面

传统Web页面就是打开浏览器，整个页面都会打开的应用。例如，笔者的个人网站http://siwei.me就是一个典型的“传统Web应用”，每次单击其中任意一个链接，都会引起页面的整个刷新，如图1-1所示。

图1-1 个人网站

从图1-1中可以看出，传统的页面每次打开，都要把页面中的.js、.css、图片文件、html文件等资源加载一遍。在图1-1的左下角可以看到，本次共加载了10个请求（4个css，2个js，3个png图片及1个html文件），耗时0.837s。这个在PC端可以，但是在手机端就会特别慢，特别是在安卓手机上。

传统页面的特点就是下面任何一个操作，都会引起浏览器对于整个页面的刷新：


•单击链接。

•提交表单。

•触发location.href='...'这样的js代码。


我们来看一个传统Web页面的例子。

<html>
<head>
    <script src="my.js"></script>
    <style src="my.css"></style>
</head>
<body>
    <img src='my.jpg' />
    <p> 你好！ 传统Web页面！ </p>
</body>
</html>

每个浏览器都会从第一行解析到最后一行，然后继续加载my.js、my.css、my.jpg这三个外部资源。

其实很好理解，这个就是大家最初想象的Web页面的打开方式。

2. 单页应用（Single Page App）

单页应用，确切的诞生时间不详，可以肯定的是这个概念2003年就在论坛上被人讨论了。在2002年4月，诞生了一个网站：http://slashdotslash.com，就使用了这种思想。

单页应用的精髓是点/单击任何链接，都不会引起页面的整体刷新，只会通过JavaScript替换页面的局部内容。

3. Ajax和XML

说到这里，就不得不提到另一个概念：Ajax（Asynchronous JavaScript），中文可以称之为“js的异步请求”，国内统一称为Ajax。

Ajax的概念是每次打开新的网页时，不要让页面整体刷新，而是由js发起一个“HTTP异步请求”，这个“异步请求”的特点就是不让当前的网页“卡”死。

用户可以一边上下滚动页面，播放视频一边等待这个请求返回数据。结果被正常返回后，由js控制刷新页面的局部内容。

这样做的好处是：

（1）大大节省了页面的整体加载时间。各种.js、.css等资源文件加载一次就够了。

（2）节省了带宽。

（3）同时减轻了客户端和服务端的负担。

在智能手机和App应用（特别是微信）流行起来之后，大量的网页都需要在手机端打开，Ajax的优势就体现的淋漓尽致。

虽然Ajax的名称本意是“异步js与XML”，但是现在在服务器端返回的数据中几乎都使用JSON，而抛弃了XML。

在2005年，国内的程序员论坛开始提及Web 2.0，其中Ajax技术被人重视。到了2006年初，可以说Ajax是前端程序员的加薪利器。市面上的所有招聘“前端Web程序员”的职位描述中都认为Ajax是重要的加分项。

可惜当时jQuery在国内不是很普及，Prototype也没有流行起来。笔者与北京软件圈子里的各大公司的同行们交流时，发现大家用的都是“原生的JavaScript Ajax”，这种不借助任何第三方框架的代码写起来非常臃肿、累人，而且考虑到浏览器的兼容问题，开发起来也很让人头疼。

例如，当时的代码往往是这样的：

上面的代码仅仅是为了兼容各种浏览器。实际上，后面还有几十行的冗余代码，之后才是正常的业务逻辑代码。

到2008年，国内开始流行Prototype、jQuery之后，发起一个Ajax请求的代码精简成几行：

jQuery.get('http://some_url?para=1', function(data){
    // 正常代码
})

那时候开始，Ajax在国内变得越来越普及。

4. Angular

第一个单页应用（SPA）的知名框架应该是Angular，由Google在2010年10月推出。当时的Gmail、Google Map等应用对于Ajax技术运用到了极致。而Angular框架一经推出，立刻引燃了单页应用这个概念。尽管后来各种SPA框架层出不穷，在2015年之前，Angular稳坐SPA的头把交椅。

5. 当下的SPA技术趋势

SPA框架已经成为了项目开发必不可少的内容，只要有移动端开发，就会面临以下两个选择。


•做成原生App。

•做成SPA H5。


无论是iOS端还是Android端，都对SPA青睐有加。

（1）打开页面速度特别快。打开传统页面，手机端往往需要几秒，而SPA则在0.x秒内。

（2）耗费的资源更少。因为每次移动端只请求接口数据和必要的图片资源。

（3）对于点/单击等操作响应更快。对于传统页面，手机端的浏览器在操作时，点击按钮会有0.1s的卡顿，而使用SPA则不会有卡顿的感觉。

（4）可以保存浏览的历史和状态。不是每一个Ajax框架都有这个功能。例如，QQ邮箱，虽然也是页面的局部刷新，但是每次打开不同的邮件时，浏览器的网址不会变化。而在所有的SPA框架中，都会有专门处理这个问题的模块，叫做router（路由）。

例如：

http://mail.my.com/#/mail_from_boss_on_0620对应老板在6月20日发来的邮件。

http://mail.my.com/#/mail_from_boss_on_0622对应老板在6月22日发来的邮件。

在2011和2012年，各种SPA框架出现了井喷的趋势，包括Backbone、Ember.js等上百个不同的框架。近几年，比较流行的框架是Angular、React和Vue.js。

1.2.2 知名的单页应用（SPA）框架对比

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

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

1. Angular

Angular作为SPA的老大哥，源于Google，在过去若干年发挥了非常大的价值。现在的版本是4.0

它的优点是：


•业内第一个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）+后端。

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

•周边组件很多。


React的缺点是：

（1）html代码（这样的标签）需要写在js文件中。例如：

上面代码的编程方式也叫“多语言混合式编程”。最大的特点是代码难以理解、开发和调试。

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

//前端代码
....

// 后端代码
....

所有做过传统Web框架的人都觉得奇怪。其他表现尚可，学习难度低于Angular，高于Vue.js。官方网站为https://github.com/facebook/react。

3. Vue.js

Vue.js（读音同View）是一个MVVM（Model - View - ModelView）的SPA框架。


•View：视图。

•Model：数据。

•ModelView：连接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，不用React、Angular

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

截止到2018年6月底，三个项目的关注数分别是：


•Angular：3.8万。

•React：10.4万。

•Vue.js：10.5万。


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

其次，我们看一下stars的增长趋势。

根据统计（http://www.timqian.com/star-history/#facebook/react&angular/ angular&Vue.js/vue），截止到2018年6月底，Vue.js的增长趋势一直是最高的，React居中，Angular最低，如图1-2所示的github上三种框架的关注变化曲线。

图1-2 github上三种框架的关注变化曲线

第三，Vue.js的作者是中国人，官方文档也是中文的（地址：http://cn.Vue.js.org）。

读者可以参考以下两篇文章。


•https://cn.Vue.js.org/v2/guide/comparison.html；

•https://www.quora.com/How-does-Vue-js-compare-to-React-js。

1.2.3 被腾讯和阿里巴巴所青睐

Vue.js的思想可以说是对国内互联网巨头产生了较大的冲击。腾讯的微信和阿里巴巴的Weex项目的实现方式与Vue.js是非常相似的。

可以说，学会了Vue.js就基本学会了微信小程序和阿里巴巴的Weex。这个对于需要不断学习新知识的程序员来说，是非常好的消息。有大公司的支持，这个技术一定是非常有前景的。

1. 微信小程序

微信小程序是微信在2017年出现的技术，基于微信。使用SPA的开发技术，就可以运行在安装过微信的手机上。表现效果与原生App几乎一样。

微信小程序的代码特点、文件组织形式及各种概念，与Vue.js是非常相似的。

2. 阿里巴巴Weex

Weex致力于使开发者能基于当代先进的Web开发技术，使用同一套代码来构建Android、iOS和Web应用。

Weex以及支持了对于Vue.js 2.0的直接集成。也就是可以在Weex中直接写Vue.js的代码。Weex与React Native一样，都是使用Web开发的相似代码，让程序以Native App的形式跑起来。

Weex以官方文档的形式告诉大家如何使用Vue.js，链接如下：

https://weex.apache.org/cn/guide/use-vue.html 。

1.2.4 用到Vue.js的项目


•滴滴出行。

•饿了么：开源了一个基于Vue的UI库（https://github.com/ElemeFE/element）。

•阿里巴巴的weex（https://github.com/alibaba/weex）。

•GitLab（https://about.gitlab.com/2016/10/20/why-we-chose-vue/）。

•facebook（https://newsfeed.fb.com/welcome-to-news-feed?lang=en）。

•新浪微博。


更全列表可见https://github.com/Vue.js/awesome-vue#projects-using-Vue.js。

上一章目录下一章