¶ 为什么要讨论VUE

首先我之前并不是搞前端的，十几年前开始接触编程，从C到C++、Delphi、C#、Java到WEB开发的HTML、JavaScript、少量CSS，JSP、JAVA等框架，数据库等等。那时候除了计算机基础知识外，判断一个软件开发工程师是游击队还是正规军的标准还是是不是科班出身，学没学过算法、数据结构、图论等等。面试的时候问的问题大部分都是算法和编程语言相关的。当C#、Java、PHP出现一段时间后，随着互联网的发展WEB开发崛起，给国内第一代程序员带来了巨大的压力，当时他们感觉编程未来是愚钝化、便捷化、拖拉拽就能解决的，开源会使编程代价更低，开源到一定时间，代码就会‘云化’集成在IDE工具里，各个功能拽一下就有了甚至会有业务逻辑的轻松实现（当时据说微软提出了一个概念，类似于把代码都存储在互联网上，让更多的业务人员学会使用IDE自行拖拉拽就完事了，没有程序员毛事。），看着手里的VC6.0或Delphi的IDE匆匆的合上了电脑有的下海了，有的干上了管理，极少数的创业了。

还有一个C/C++程序员曾经跟我说过他放弃软件开发工作的原因是到了一个尴尬的处境，硬件变得的不值钱，服务器都集群化，之前写的程序抠抠搜搜研究了几个星期尽量节省内存的事情显得没有那么大的意义。导致他放弃的原因我认为有几个：

• 一是向底层或算法进展，玩到最后是数学，物理，宇宙。觉得脑子不够用，不行。

• 二是向业务层进展，和客户/业务人员终于磨合了半年明白对方的意图之后，新招聘的JAVA程序员乐呵的一个月整出来个大概，而看着自己手里擅长的C/C++感觉得整三五个月。

• 三是排斥新的东西，放弃了学习。

• 四是觉得干管理或者干业务干好了比软件开发工程师寿命长，这个属于职业规划上的，我相信当时他没想那么远。

另外关于“前端工程师/中台工程师/后端工程师”，这都是随着软件工程的系统化针对互联网业务的发展衍生出来的职业岗位，也可以理解为是程序员们给自己多创造了几倍的就业岗位。
说了这么多就是为了勉励一下自己，要不停的学习。VUE出来这么久，之前也在一些小项目上应用了一下，并没有深入的去系统性或者从实用性的角度去学习和记录。

¶ Vue是干什么的，用来解决什么问题？

¶ 官方的解释是：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

这里边吧，有好多名词“渐进式框架”“自底向上逐层应用”“视图层”“工具链”等等。不太容易理解，因为他们也找不到什么看起来更高大上的次了，总写PPT的人知道，title一定要响亮，贾跃亭最明白，生态系统、逆向生态，大数据等等。都是一些老的业务包装了一下，显得高大上了。所以这里暂时不用去费劲巴力的理解那些名词，还没等理解可能你就准备放弃了

¶ Vue到底是什么？

VUE是一个工具，基于JavaScript语言的。

VUE能够解决过去用JavaScript拼装HTML代码的典型问题。我想大多数人都写过类似的代码吧。

var trs = '';
$(xxx).each(function(o,n){
  trs+='<tr><td>'+n+'</td>';
  trs+='<td>'+o.xxx+'</td>';
  trs+='<td>'+o.yyy+'</td>';
  trs+='<td>'+o.zzz+'</td>';
  trs+='</tr>';
});
$(id).append(trs);

这样的代码，每次写起来很方便，逻辑简单，但是就是维护起来太差劲。随着系统的工程化，这种动态拼装HTML的情况会越来越多。
另外在工程化的时候尽量要做到前后端的分离，是因为这个活不是一个人干了，同时代码可读性会更好。

以前看别人写的JSP程序的时候会看到这种<% balabala…%>在页面上直接写java代码，这给我的感觉是崩溃的，读起来非常费劲，总想用JSTL重写了，尽量把数据在后端组织好。

在这里要区分，免得误人子弟，上述JSTL和balabala…的写法，用户浏览器端发出请求的时候是服务器渲染好HTML代码后给用户端浏览器的，这里需要消耗服务器额外的性能。而基于JavaScript的都是在用户端的浏览器上运行，消耗的是用户设备的性能。现在浏览器变得越来越强大，用户端的配置也越来越高，所以这种前后端的分离会大大减少服务器的开销。这在互联网行业显得尤为重要，而对我们这种传统的IT服务供应商来讲，其实区别不大。

再聊回VUE，之前用JQuery的时候感觉也是很方便的，Vue和jQuery有什么不同吗。

当然有JQuery是JS工具箱，现在我们把一个网页应用抽象一下，那么HTML中的DOM其实就是视图，一个网页就是通过DOM的组合与嵌套，形成了最基本的视图结构，再通过CSS的修饰，在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到数据交互部分，就需要用到JavaScript来接受用户的交互请求，并且通过事件机制来响应用户的交互操作，并且在事件的处理函数中进行各种数据的修改，比如说修改某个DOM中的innerHTML或者innerText部分。

这里把HTML中的DOM就可以与其他的部分独立开来划分出一个层次，这个层次就叫做视图层。

*** Vue 的核心库只关注视图层 ***

¶ 为什么只关注视图层

因为现在项目的功能越来越多，页面不再是单一的条件列表，尤其是互联网项目，尽量小的篇幅要有尽量多的信息量，结构很庞大，数据和视图如果全部混杂在一起，像传统开发一样全部混合在HTML中，那么要对它们进行处理会十分的费劲，并且如果其中有几个结构之间存在藕断丝连的关系，那么会导致代码上出现更大的问题。

你是否还记得你当初写JQuery的时候，有$('#xxx').parent().parent().parent()这种代码呢？当你第一次写的时候，你觉得页面元素不多，不就是找这个元素的爸爸的爸爸的爸爸吗，我大不了在注释里面写清楚这个元素的爸爸的爸爸的爸爸不就好了。但是万一过几天之后你的项目组长或者你的产品经理突然对你做的网页提出修改要求，这个修改要求将会影响页面的结构，也就是DOM的关联与嵌套层次要发生改变，那么$('#xxx').parent().parent().parent()可能就会变成
$('#xxx').parent().parent().parent().parent().parent()了。

这还不算什么，等以后产品迭代越来越快，修改越来越多，而且页面中类似的关联和嵌套DOM元素不止一个，那么修改起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的，可能到时候打开这个页面，会变得越来越卡，而你却无从下手。

当你在编写项目的时候遇到了这种问题，你一定会抱怨，为什么世上会有HTML这种像盗梦空间一样的需要无数div嵌套才能做出页面的语言，为什么当初学JQuery看中的是它简洁的DOM操作，现在却一点也不觉得它有多简洁，难道我学的是假的JQuery？为什么写个代码这么难，你想砸电脑，你想一键盘拍在产品狗的脑袋上，责怪他天天改需求才让你原本花清香茶清味的代码变得如此又臭又长。

*** Vue的初衷就是要解决这种问题的 ***

¶ Vue为什么能让前端视图层开发起来这么方便？

因为Vue.js有声明式，响应式的数据绑定，与组件化的开发，并且还使用了Virtual DOM这个看名字就觉得高大上的技术。

¶ 数据绑定

就是数据绑也可以称为赋值，双向赋值，所谓双向的就是有变化自动更新，就像刚才我们实现表格一样，当表格里td的内容变化了，我们需要重新去执行一遍那个each方法，而vue就不用，JS里变量值变了，页面上那个值就跟着变了。不用你去干什么。是不是省事了。

就像整了一个监听器，一直监听那个变量有没有变化，有变化了就把所有用到这个变量的地方都重新执行以下。同样反过来也是，当页面有值变化了，不用去取value，自动的js里对应的这个变量也跟着变化。这就是双向绑定。

¶ 组件化开发

还记得在传统前端开发的时候，我们都是每个人做一个页面，然后最后套入各种后端模版引擎，比如说C#的.NET或者Java的JSP等等。

但是现在我们做单页应用，页面交互和结构十分复杂，一个页面上就有许许多多的模块需要编写，而且往往一个模块的代码量和工作量就非常庞大，如果还按照原先的方法来开发，那么会累死人。而且遇到以后的产品需求变更，修改起来也非常麻烦，生怕动了其中一个div之后，其他div跟着雪崩，整个页面全部乱套，或者由于JavaScript的事件冒泡机制，导致修改一些内层的DOM事件处理函数之后，出现各种莫名其妙的诡异BUG。

在面向对象编程中，我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中，我们也可以把一些大功能拆分成许多函数，然后分配给不同的人来开发。

在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。

Vue通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

¶ Virtual DOM

现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript
DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。

而Virtual
DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。

对于vue.js的Virtual DOM，目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架，引入Virtual
DOM会加大Vue.js本身的代码尺寸，也会消耗更多CPU（手机上会更耗电）（注意：消耗更多的CPU并不意味着会更卡，因为JavaScript计算是后台计算，他的计算量还不至于让DOM操作变得卡顿），并且在操作单个DOM元素的时候，反而多了一道计算工序，会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素，肯定操作的DOM量级普遍较大，平均一下还是比较划算的。

¶ 我到底该怎么用Vue.js做单页应用开发？

说了这么多，我还是不知道怎么用它做出一个像知乎那样的页面啊，到底怎么学它呢？

前面我们看了一个响应式的数据绑定案例，那只是一个DEMO，而且也看不出有什么实际意义，离真正的单页应用程序还差得远，到底怎么用它开发真实的项目呢？

我的建议是，先把介绍 - vue.js官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外，前面几章完全就是把Vue.js当作一个模版引擎来用。

然后开始学习ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好对Node.js也要有所了解。

最后组件部分先大致看一遍，了解组件里面都有哪些概念之后，开始看网上各种实战视频以及文章还有别人开源的源代码。
在前面你提到过好几次ECMAScript，这是啥？

¶ 在前面你提到过好几次ECMAScript，这是啥？

ECMAScript听名字好像和JavaScript很像，难不成他们有什么千丝万缕的联系？

引用阮一峰老师的教程：ECMAScript 6入门

要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript
提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA
发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是1.0版。
该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。

• 一是商标，Java 是 Sun
  公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被
  Netscape 公司注册为商标。
• 二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。
而ECMAScript6就是新一代的JavaScript语言。

这里也强烈推荐大家学习ECMAScript6的时候参考这本书ECMAScript 6入门。

¶ 我在学习Vue的时候老是听到Webpack，这是啥？

Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML，CSS，JavaScript，并且通过link标签将CSS引入你的HTML文件，以及通过Script标签的src属性引入外部的JS脚本，那么你肯定会对这个工具感到陌生。不要紧，我们先来了解一下为什么要用Webpack，然后带着原因去学习就好了。

¶ 为什么要用Webpack

前面说了，做一个单页应用程序本身就相当复杂，而且在做的时候肯定会使用到很多素材和别的第三方库，我们该如何去管理这些东西呢？

还有前面讲到了Webpack是一个前端打包工具，前端代码为什么要打包呢？因为单页应用程序中用到很多素材，如果每一个素材都通过在HTML中以src属性或者link来引入，那么请求一个页面的时候，可能浏览器就要发起十多次请求，往往请求的这些资源都是一些脚本代码或者很小的图片，这些资源本身才几k，下载连1秒都不需要，但是由于HTTP是应用层协议，它的下层是TCP这个运输层协议，TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长，所以需要把这些小文件全部打包成一个文件，这样只要一次TCP握手和挥手的过程，就把多个资源给下载下来了，并且多个资源由于都是共享一个HTTP请求，所以head等部分也是共享的，相当于形成了规模效应，让网页展现更快，用户体验更好。

前面说到Webpack还有构建的功能，这就不得不提到了ECMAScript6这个新版本的JavaScript，但是现在国内外还有很多人用着老版本的浏览器，这些浏览器并不支持ECMAScript6，那么我们的前端项目如何在这种浏览器上运行呢？这就需要Webpack的Loader自动载入一个转换器来将我们写的ECMAScript6转换成浏览器能支持的老版本JavaScript语言，这个转换器的名字叫做babel，如果你以后听到或者看到了这个单词，应该要知道它就是一个ECMAScript6
to 老版本JavaScript的转换器了。这也是Webpack的构建功能。当然对前端有更深入的同学还会知道Sass，Less，stylus之类的CSS预处理器，我们也可以通过在Loader中编写特定的规则来实现自动将这些CSS预处理语言转换成普通浏览器能识别的CSS代码。

开头的介绍提到了vue.js可以使用单文件组件开发项目，其实也是通过Webpack将单文件组件中的模版，样式以及JS转换到主页面中。

当然Webpack不止这点功能，它还可以通过安装各种插件来扩展，比如说热加载技术，就是解放键盘的F5键。让我们修改代码，并且按Ctrl+S保存之后，浏览器页面自动刷新变化，不需要我们去手动刷新，还有一些插件可以自动添加注释，自动给CSS代码加上一些浏览器内核对CSS3兼容前缀，就像webkit-xxx之类的一样。

¶ NPM和Node.js又是什么？它们是什么关系？

首先讲讲Node.js。我们知道通常情况下，JavaScript的运行环境都是浏览器，因此JavaScript的能力也就局限于浏览器能赋予它的权限了。比如说读写本地系统文件这种操作，一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的。如果我们想用JavaScript写出一些能够运行在操作系统上的，能够具有像PHP，JAVA之类的编程语言具有的功能的程序该怎么办呢？Node.js就解决了这个问题。Node.js是一个服务端的JavaScript运行环境，通过Node.js可以实现用JavaScript写独立程序。像我们之前提到的Webpack就是Node.js写的，所以作为一个前端开发，即使你不用Node.js写独立程序，也得配一个Node.js运行环境，毕竟很多前端工具都是使用它写的。

NPM是一个node.js的包管理器。我们在传统开发的时候，JQuery.js大多都是百度搜索，然后去官网下载，或者直接引入CDN资源，这种方法太过于麻烦。如果以后遇到其他的包，这个包的代码本身可能还调用了其他的包（也称这个包和其他的那几个包存在依赖关系），那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器，直接可以通过

npm install xxx包名称

的方式引入它，比如说

npm install vue

就自动在当前项目文件夹下导入了这个包，并且npm自动下载好了vue这个包依赖的其他包。

至于有的人在按照网上的npm教程配置的时候踩坑了，发现下载速度很慢或者完全下载不了，那是因为我国有着众所周知的原因，网上也有各种解决方法可以解决这个问题，大家多善用搜索引擎。

前面提到了Webpack可以安装各种插件来扩展功能，其实也是通过这种方式扩展。
如果你习惯用Linux系统的话，NPM就和CentOS下的yum和Ubuntu下的apt-get差不多。

¶ Vue-CLi又是啥？

它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具，它可以通过

npm install vue-cli -g

的方式安装，后面的-g表示全局安装的意思，意味着你可以打开命令行之后直接通过vue命令调用它。

¶ Vue怎么火起来的？

Vue的创始人是中国人！中国人！

很多大厂为它背书！为它背书！

原生的中文文档！中文文档！

关于这个问题，网上说法很多，我自己认为主要还是前些年大前端变革太快，而最近一年开始Vue.js+Webpack这个组合开始逐渐稳定下来了，而且已经有了很多中文资料。

对比它的竞争对手AngularJS，新旧版本项目无法平滑升级，变革太大让用户感觉不安稳。

而React本身主流推荐用的是JSX，需要额外学习一门语法（什么？学Vue.js还要学ECMAScript6？现在ECMAScript6是趋势，并不是因为Vue.js才要学的），并且React本身用的是render写法编写模版代码，这让很多用习惯了Smarty等后端模版引擎得人来使用感觉很不适应，现在看来React本身在中国一些论坛社区的火爆程度还是没有Vue.js高。

当然也并不是说除了Vue.js以外其他框架都很差。像知乎新版也是用React开发的，他还是有各自优秀的地方大家可以深入学习之后做出自己的判断。

¶ 我在很多地方还看到Vuex和Vue-route，它们又是什么？

Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

Vue-route是vue的一个前端路由器，这个路由器不是我们上网用的路由器，而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。

要讲清楚这两个东西，又得花费大量篇幅，所以这里只是简单提一下，先学好vue.js本身才是最重要的。

¶ Vue-resource和Axios，它们又是什么？

我们在传统的前后端不分离的开发中，后端直接把数据通过模版引擎拼接进了返回的HTML中。而现在做单页应用程序属于前后端分离开发，那么这个单页应用程序中的数据就得通过ajax的方式获取，也要通过ajax的方式提交到后端。

在传统开发中我们都是通过xmlhttprequest手动操作，或者通过JQuery的ajax方法来进行数据提交获取。

vue.js本身没有封装ajax操作库，所以我们要通过Vue-resource和Axios来进行ajax操作，而因为种种原因，现在vue.js2.0已经将axios作为官方推荐的ajax库了。

¶ 写Vue.js用什么开发工具和电脑呢？

参照我另外一篇文章：
Vue的IDE和项目结构大纲

¶ 结束语

可能包括我在内的很多人在看到Vue.js那神奇的双向绑定优雅写法都会有一种非常惊艳，而看到中文文档发布之后有种想立马学习的冲动。可惜大前端终究是大前端，如果一个对于前端各个方面没有深入认识就想着能一步登天，肯定对不起大前端的“大”字。原本看着只想学一个Vue.js，没想到顺带把ECMAScript6，Webpack配置，ESLint配置，bable配置，npm使用，node.js语法，以后vue全家桶中的vuex，vue-route等等等等都学了一遍。前段时间网上也流传出了一个职位叫做Webpack配置工程师，从这里也可以看出弄懂前端这个大杂烩确实不是那么容易。大家一起加油，有什么问题也可以在评论区回复，我会抽空补充在文章内容中。谢谢各位的支持！~