为什么我们要将视图层提取出来，并单独关注它呢？

因为在知乎这种页面元素数量多，结构庞大的网页中，如果像传统开发一样，把数据和视图全部混杂在一起，混杂在 HTML 中，处理起来会非常困难。而且如果其中的几个结构之间存在一些密不可分的关系，那么在代码中就会出现更大的问题。这个是什么问题呢？

还记得当初写的时候，你是这样写的$('#xxx').().().()吗？当初写的时候，你以为页面上的元素不多，只需要找出这个元素的父元素的父元素的父元素，最多在注释里写上这个元素的父元素的父元素的父元素就可以了。但如果过几天你的项目负责人或者产品经理突然让你修改你做的网页，这个修改要求会影响页面的结构，也就是DOM的关联和嵌套层级会发生变化，那么$('#xxx').().().()可能会变成$('#xxx').().().().().()。

这个倒不是大问题，当产品迭代越来越快，修改越来越多，页面上类似的关联嵌套 DOM 元素不止一个时，修改起来就会非常困难。另外，查找页面元素的选择器以及 DOM 操作本身也有性能损耗，打开这个页面可能会越来越卡，不知道从何下手。

当你在写项目的时候遇到这种问题，你肯定会抱怨，世界上为什么会有像 HTML 这样的语言需要无数个 div 嵌套起来才能做成页面，像 这样的语言，为什么当初你因为它的 DOM 操作简单就去学了，现在却觉得它根本没有那么简单，难道我学的都是假的？写代码为什么这么难？你想砸电脑，你想用键盘敲打产品狗的头，怪他天天改需求，让你原本香喷喷的代码变得又长又臭。

这时候如果你学会了Vue.js，这些抱怨就不复存在了。

5.为什么Vue.js让开发基于Web的前端应用程序变得如此简单？

因为Vue.js有声明式、响应式的数据绑定，以及基于组件的开发，而且它还使用了DOM这种听名字就觉得很高级的技术。

但是这些名词是什么？

6. 响应式数据绑定

这里的响应式并不是 @media 媒体查询里的响应式布局，而是指 Vue.js 会自动响应页面上某些数据的变化。至于如何响应，你可以先将下面的代码粘贴到一个扩展名为 html 的文件中并用浏览器打开，在文本框中输入一些文本，观察页面的变化。

你是否发现一个神奇的现象，即文本框中输入的文字会随着后面的p标签中的内容一起发生变化？

也就是说，p标签通过{{ }}语法与input标签中的值进行绑定，如果其中一个发生变化，则与其绑定的另一个数据也会随之变化。

符合标题，vue.js 会根据用户在代码中预先写好的绑定关系，自动响应数据的变化，修改所有绑定的数据和视图内容。这个绑定关系在图中就是用 input 标签的 v-model 属性来声明的，所以你可能也会在其他地方看到有人粗略地把 vue.js 称为声明式渲染模板引擎。

7.基于组件的开发

还记得在传统的前端开发中，我们每个人都做一个页面，然后最后放到各种后端模板引擎中，比如PHP或者Java JSP等等。

但现在我们做的是单页应用，页面交互和结构非常复杂，一个页面要写的模块非常多，往往一个模块的代码量和工作量就非常大。如果还是按照原来的方式来开发，会很累。而且以后如果产品需求有变，修改起来也很麻烦，生怕移动了一个div之后sublime text vue插件，其他的div也跟着移动，整个页面就乱了，或者由于事件冒泡机制，修改了某些内层DOM事件处理函数之后，会出现各种莫名奇妙的bug。

在面向对象编程中，我们可以运用面向对象的思想，把各个模块打包成类或者把一个大的业务模块拆分成更多更小的类；在过程化编程中，我们也可以将一些大的功能拆分成很多个功能，分配给不同的人去开发。

在前端应用中，我们是否也能像编程一样，进行模块封装呢?这就引入了基于组件的开发的思想。

Vue.js 利用组件将单页应用中的各个模块拆分成单独的组件（）。我们只需要在父应用中先写好各个组件标签（占坑），在组件标签中写好需要传入组件的参数（就像给函数传递参数一样，这个参数叫做组件的属性），然后再分别写好各个组件的实现（填坑），整个应用就完成了。

8. DOM

如今网速越来越快，很多人家里都有几十甚至几百兆的光纤，手机也从4G开始。理论上一个网页也就几百KB，而浏览器本身会缓存很多的资源文件。那么为什么打开一个之前打开过并且已经缓存的页面会感觉这么慢呢？这是因为浏览器本身在处理DOM方面存在性能瓶颈。特别是在传统开发中，当使用或者原生的DOM操作函数频繁操作DOM时，浏览器要不断渲染新的DOM树，导致页面看起来非常卡顿。

DOM 是英文虚拟 DOM，简单来说，就是一种可以通过预先进行各种计算来计算和优化的 DOM 操作。由于这种 DOM 操作属于预处理操作，并不真正操作 DOM，所以被称为虚拟 DOM。最终 DOM 操作在计算完成后才真正提交，DOM 操作变化才会反映到 DOM 树中。

业界目前对 vue.js 的 DOM 褒贬不一。有人认为，作为轻量级框架，Vue.js 引入 DOM 会增加 Vue.js 本身的代码大小，而且会消耗更多的 CPU（在手机上更耗电）（注意：消耗更多的 CPU 并不代表更卡顿，因为计算是在后台进行的，它的计算量不足以让 DOM 操作变得卡顿），而且在操作单个 DOM 元素时，多了一个计算过程，会比较慢。不过也有人认为，基本上使用 Vue.js 开发页面中内容很多的元素，DOM 操作量肯定普遍比较大，所以平均下来还是比较划算的。

9.如何使用Vue.js开发单页应用？

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

前面我们看了一个响应式数据绑定的例子，只是一个DEMO，好像没有什么实际意义，离真正的单页应用还差得很远，怎么才能用它来开发真正的项目呢？

我的建议是先看Vue.js官方文档的基础，除了组件部分涉及到很多比较生僻的术语外，前面几章完全是把Vue.js当做模板引擎来用的。

然后开始学习NPM和Vue-Cli的基本使用，最好对Node.js有一定的了解。

最后，先大致看一下组件部分，理解了组件里面的概念之后，开始看网上各种实用的视频和文章，以及别人的开源代码。

10. 你之前提到过几次，这是什么？

这两个名字听起来很相似，难道它们之间有某种关联吗？

是的，你猜对了，他们之间确实有着很深的联系。

引自阮一峰先生：（6入门）

它是新一代的语言。

这里我强烈建议大家在学习的时候参考这本书6入门

11. 我在学习 Vue.js 时经常听到这个。这是什么？

它是一款前端的封装构建工具。如果你之前一直都是手写 HTML 和 CSS，并且通过 link 标签将 CSS 导入到自己的 HTML 文件中，通过标签的 src 属性导入外部 JS 脚本，那么你肯定会对这款工具感到陌生。没关系，我们先了解一下为什么要用它，然后再带着理由去学习它。

12. 为什么使用

之前提到过，制作单页应用本身就比较复杂，而且在制作的时候肯定会用到很多素材和其他第三方库，我们该如何管理这些东西呢？

前面说了它是一个前端打包工具，那为什么要打包前端代码呢？因为一个单页应用会用到很多素材，如果每个素材都是通过 HTML 中的 src 属性或者链接引入的，那么在请求一个页面的时候，浏览器可能要发起十多个请求。而往往请求的资源都是一些脚本代码或者非常小的图片，这些资源本身只有几 KB，下载甚至都用不了 1 秒钟。但是由于 HTTP 是应用层协议，它的下层是传输层协议 TCP，TCP 的握手挥手过程可能比下载资源本身还要耗时，所以需要把这些小文件全部打包成一个文件。这样，只需要一次 TCP 握手挥手过程，就可以下载多个资源。而且由于多个资源共用一个 HTTP 请求，所以头部等部分也是共用的，相当于形成了规模效应，使得网页显示速度更快，用户体验更好。

前面说了还有一个build功能，就不得不提这个新版本了。但是国内外还是有很多人使用老版本的浏览器，这些浏览器是不支持的。那么我们的前端项目怎么才能在这样的浏览器上运行呢？这就需要自动加载一个转换器，把我们写的东西转换成浏览器能够支持的旧版本的语言。这个转换器的名字叫babel，如果以后大家听到或者看到这个词的话，应该知道就是一个到旧版本的转换器。这也是的build功能。当然对前端比较了解的同学还会知道Sass、Less等CSS预处理器。我们也可以通过在中编写特定的规则，将这些CSS预处理语言自动转换成普通浏览器能够识别的CSS代码。

开头的介绍提到了Vue.js可以使用单文件组件来开发项目，其实也是通过单文件组件中的模板、样式和JS来调用到主页面的

当然它的功能不止这些，还可以通过安装各种插件进行扩展，比如热重载技术，可以解放键盘上的F5键，让我们修改代码后按Ctrl+S保存，浏览器页面就会自动刷新修改，无需我们手动刷新。还有一些插件可以自动添加注释，自动在CSS代码中添加一些浏览器内核兼容的前缀，比如-xxx。

13.什么是NPM和Node.js？他们之间有什么关系？

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

npm是node.js的包管理器，传统开发中我们大多在百度上搜索.js，然后去官网下载，或者直接导入CDN资源，这种方式太麻烦了，如果以后遇到其他包，这个包的代码可能还会调用其他包（也就是这个包和其他包有依赖）sublime text vue插件，那么我们在自己的项目中引入一个包就会变得非常困难。现在我们有了包管理器npm，可以直接通过

按照以下方式介绍，例如

该包会自动导入到当前项目文件夹中，并且 npm 会自动下载 vue 包所依赖的其他包。

至于有些人按照网上的npm教程配置时掉坑，发现下载速度很慢或者根本下载不了，这在国内是众所周知的原因，网上有各种解决这个问题的方案，大家要好好利用搜索引擎。

前面说了可以安装各种插件来扩展功能，其实这就是它的扩展方式。

如果你学过 PHP，NPM 和 PHP 类似，也和 yum、apt-get 类似。

14.什么是Vue-CLi？

它是vue.js的脚手架工具，简单来说就是一个自动帮你生成项目目录、配置、各种依赖包的工具，可以使用

最后的-g是全局安装的意思，也就是打开命令行后直接通过vue命令就可以调用。

15.我应该学习Vue.js吗？

目前 Vue.js 的发展势头和作者支持都非常好，而且中文资料和教程也非常丰富，现在你打开几个知乎前端开发相关的专栏，基本都能看到相关文章，社区也很活跃。

是否应该学取决于你自己。如果你目前只在做以内容展示为主的项目，或者整天用各种 CMS 搭建网站，并且不打算以后换一份更好的工作，那么你暂时可以不用学它。如果你开发的项目交互比较多，而且前后端开发人员都对前后端分离有清晰的认识，那么你可以大胆地学习它，并运用到实际项目中。

16.Vue.js 为何变得如此流行？

这个问题网上有很多种说法，个人觉得主要是这几年前端变化太快了，近一年来Vue.js+的组合已经逐渐稳定，而且已经有不少中文资料了。

与竞争对手相比，该项目的新旧版本无法平滑升级，而且变化太大，让用户感到不安。

React 本身主流推荐的是 JSX，这需要学习一门额外的语法（什么？学 Vue.js 也要学它？现在是个潮流，不只是因为 Vue.js），而且 React 本身采用的写法是写模板代码，这让很多习惯使用后端模板引擎的人感觉不适应。现在看来 React 本身在国内一些论坛社区中并不像 Vue.js 那么受欢迎。

当然并不是说除了 Vue.js 之外其他框架就不好，比如知乎新版也是用 React 开发的，它们还是有各自的优势的，大家可以深入研究后自己判断。

17. 我在很多地方也看到 Vuex 和 Vue-route。它们是什么？

Vuex 是 vue 的状态管理器，用于集中管理单页应用中的各种状态。

vue-route是vue的一个前端路由器，这个路由器可不是我们上网用的路由器，而是一个管理请求入口到页面映射关系的东西，它可以在不刷新的情况下替换页面的部分内容，让用户感觉好像切换到了一个网页一样。

这两点要说清楚的话会占用很多篇幅，这里就简单提一下，最重要的是先学好vue.js。

18.我在一些地方还看到了Vue和Axios，它们是什么？

传统的前后端不分离的开发，后端都是通过模板引擎直接把数据拼接到返回的HTML中，而现在的单页应用开发都是前后端分离的，所以单页应用中的数据必须通过ajax来获取，并通过ajax提交给后端。

在传统开发中我们都是手动或者通过ajax的方式提交和获取数据。

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

19.我应该学习 Vue.js 2.0 还是 1.0？

现在很多框架和语言都是学新东西而不是学旧东西（这个正在逐渐成为一种趋势），所以如果你不是在维护旧项目的话，绝对建议学习 Vue.js2.0。而且学完 Vue.js2.0 之后，再学 Vue.js1.0 也不是什么难事。

20.编写Vue.js用什么开发工具和计算机？

前端开发基本上不需要很高端的电脑，这个时代，只要有编辑器的电脑就可以做前端开发。

Vue.js 组件文件本质上就是普通的代码文件，所以各种编辑器加上一些语法检查插件就够了。我自己用的是 text 3，安装一些插件之后可以实现 .vue 单文件组件代码高亮和各种自动补全。 里面也有类似的插件，大家可以按照网上各种教学文章的指导来配置环境。

我使用的主题是，在大多数显示器上长时间观看都不会伤眼。我用的显示器是LG，有些显示器有亮度和色阶调节。我调节到2.0左右感觉比较舒服。太低会导致底部的棕色背景变黑，对比度更大，比较累。太高会导致对比度不足，画面发白，影响色彩调节。

结论：

包括我在内的很多人在看到 Vue.js 神奇的双向绑定优雅写法时可能非常惊叹，看到中文文档发布后更是有种立马想学的冲动。可惜大前端还是大前端，如果不深入了解前端的方方面面，想一步登天，那绝对配不上大前端的“大”字。原本只是想学 Vue.js，没想到以后还要学配置、配置、bable 配置、npm 使用、node.js 语法，以及 vue 全家桶里的 vuex、vue-route 等等。前段时间网上流传着一个叫配置工程师的职位，由此可见想要了解前端这个大杂烩，不是那么容易的。大家加油，有问题可以在评论区回复，谢谢大家的支持！

如有侵权请联系删除！