vue.js有什么用，是用来做什么的（整理）
vue.js 有什么用，是用来做什么的（整理）
目录
- 一、总结
- 一句话总结：用数据绑定的思想，vue 可以简单写单个页面，也可以写一个大的前端系统，也可以做手机 app 的界面。
- 1、Vue.js 是什么？
- 2、vue.js 到底适合做哪种类型的界面？
- 3、单页应用程序（SPA）是什么？
- 4、 前面说的网页版知乎我也可以用 JQuery 写啊，为什么要用 Vue.js 呢？
- 5、前端里面常说的视图层是什么？
- 6、使用 jquery 开发完整页面的流程？
- 7、Vue.js 为什么能让基于网页的前端应用程序开发起来这么方便？
- 8、vue.js 中常说的数据动态绑定是什么？
- 9、前端中为什么要组件化开发？
- 10、前端中如何进行组件化开发？
- 11、为什么有 Virtual DOM 技术？
- 12、Virtual DOM 如何实现？
- 13、到底该怎么用 Vue.js 做单页应用开发？
- 14、ECMAScript 是啥？
- 15、Webpack 是啥？
- 16、为什么要用 Webpack？
- 17、NPM 和 Node.js 又是什么？它们是什么关系？
- 18、Vue-CLi 是啥？
- 19、Vuex 和 Vue-route 是什么（暂时了解即可）？
- 二、vue.js 到底有什么用
- 三、什么是 vue.js？
- 1.Vue.js 是什么？
- 2.Vue.js 到底是什么？
- 3. 单页应用程序（SPA）
- 4. 你前面说的网页版知乎我也可以用 JQuery 写啊，为什么要用 Vue.js 呢？
- 5.Vue.js 为什么能让基于网页的前端应用程序开发起来这么方便？
- 6. 响应式的数据绑定
- 7. 组件化开发
- 8.Virtual DOM
- 9. 我到底该怎么用 Vue.js 做单页应用开发？
- 10. 在前面你提到过好几次 ECMAScript，这是啥？
- 11. 我在学习 Vue.js 的时候老是听到 Webpack，这是啥？
- 12. 为什么要用 Webpack
- 13.NPM 和 Node.js 又是什么？它们是什么关系？
- 14.Vue-CLi 又是啥？
- 15. 我该不该学 Vue.js？
- 16.Vue.js 怎么火起来的？
- 17. 我在很多地方还看到 Vuex 和 Vue-route，它们又是什么？
- 18. 我还在一些地方看到过 Vue-resource 和 Axios，它们又是什么？
- 19. 我该学 Vue.js2.0 还是 1.0 呢？
- 20. 写 Vue.js 用什么开发工具和电脑呢？
- 结语：
一、总结
一句话总结：用数据绑定的思想，vue 可以简单写单个页面，也可以写一个大的前端系统，也可以做手机 app 的界面。
1、Vue.js 是什么？
渐进式框架
自底向上增量开发的设计
易学习
易整合
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
2、vue.js 到底适合做哪种类型的界面？
a、表单项繁多
b、内容需要根据用户的操作进行修改
Vue.js 就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。
3、单页应用程序（SPA）是什么？
一个页面就是应用（子应用）
顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多，而且页面中的内容需要根据用户的操作动态变化。
4、 前面说的网页版知乎我也可以用 JQuery 写啊，为什么要用 Vue.js 呢？
a、产品是绝对需要反复修改的
b、修改可能会导致DOM 的关联与嵌套层次要发生改变从而使 jquery 结构相关代码变的异常复杂
c、vue.js 可以解决这个问题
你是否还记得你当初写 JQuery 的时候，有写过('#xxx').parent().parent().parent()这种代码呢？当你第一次写的时候，你觉得页面元素不多，不就是找这个元素的爸爸的爸爸的爸爸吗，我大不了在注释里面写清楚这个元素的爸爸的爸爸的爸爸不就好了。但是万一过几天之后你的项目组长或者你的产品经理突然对你做的网页提出修改要求，这个修改要求将会影响页面的结构，也就是 DOM 的关联与嵌套层次要发生改变，那么 (‘#xxx’).parent().parent().parent()可能就会变成 $(‘#xxx’).parent().parent().parent().parent().parent()了。
这还不算什么，等以后产品迭代越来越快，修改越来越多，而且页面中类似的关联和嵌套 DOM 元素不止一个，那么修改起来将非常费劲。而且 JQuery 选择器查找页面元素以及 DOM 操作本身也是有性能损失的，可能到时候打开这个页面，会变得越来越卡，而你却无从下手。
这个时候如果你学过 Vue.js，那么这些抱怨将不复存在。
5、前端里面常说的视图层是什么？
我们把 HTML 中的 DOM 就可以与其他的部分独立开来划分出一个层次，这个层次就叫做视图层。
Vue 的核心库只关注视图层
6、使用 jquery 开发完整页面的流程？
a、html 写构架
b、css 装饰
c、js 交互
讲到 JQuery，就不得不说到 JavaScript 的 DOM 操作了。如果你用 JQuery 来开发一个知乎，那么你就需要用 JQuery 中的各种 DOM 操作方法去操作 HTML 的 DOM 结构了。
现在我们把一个网页应用抽象一下，那么 HTML 中的 DOM 其实就是视图，一个网页就是通过 DOM 的组合与嵌套，形成了最基本的视图结构，再通过 CSS 的修饰，在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分，就需要用到 JavaScript 来接受用户的交互请求，并且通过事件机制来响应用户的交互操作，并且在事件的处理函数中进行各种数据的修改，比如说修改某个 DOM 中的 innerHTML 或者 innerText 部分。
7、Vue.js 为什么能让基于网页的前端应用程序开发起来这么方便？
a、有声明式
b、响应式的数据绑定
c、组件化的开发
d、Virtual DOM
因为 Vue.js 有声明式，响应式的数据绑定，与组件化的开发，并且还使用了 Virtual DOM 这个看名字就觉得高大上的技术。
8、vue.js 中常说的数据动态绑定是什么？
就是 vue.js 会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，在图上是以 input 标签的 v-model 属性来声明的，因此你在别的地方可能也会看到有人粗略的称 vue.js 为声明式渲染的模版引擎。
9、前端中为什么要组件化开发？
a、非组件化开发代码和工作量都非常大
b、修改起来生不如死
但是现在我们做单页应用，页面交互和结构十分复杂，一个页面上就有许许多多的模块需要编写，而且往往一个模块的代码量和工作量就非常庞大，如果还按照原先的方法来开发，那么会累死人。而且遇到以后的产品需求变更，修改起来也非常麻烦，生怕动了其中一个 div 之后，其他 div 跟着雪崩，整个页面全部乱套，或者由于 JavaScript 的事件冒泡机制，导致修改一些内层的 DOM 事件处理函数之后，出现各种莫名其妙的诡异 BUG。
10、前端中如何进行组件化开发？
a、借用的后端的面向对象中的模块化思想（把一些大功能拆分成许多函数，然后分配给不同的人来开发）
b、把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑）
在面向对象编程中，我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中，我们也可以把一些大功能拆分成许多函数，然后分配给不同的人来开发。
在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。
Vue.js 通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
11、为什么有 Virtual DOM 技术？
a、问题
现在的网速越来越快了，很多人家里都是几十甚至上百 M 的光纤，手机也是 4G 起步了，按道理一个网页才几百 K，而且浏览器本身还会缓存很多资源文件，那么几十 M 的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？
b、原因
（1）、浏览器本身处理 DOM 也是有性能瓶颈的
（2）、用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树
这就是因为浏览器本身处理 DOM 也是有性能瓶颈的，尤其是在传统开发中，用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。
12、Virtual DOM 如何实现？
a、预计算 dom 的各种操作，把最后一次的结果渲染出来（减少 dom 的渲染次数）
而 Virtual DOM 则是虚拟 DOM 的英文，简单来说，他就是一种可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计算出来并优化，由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM。最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。
13、到底该怎么用 Vue.js 做单页应用开发？
其实可以直接看学习视频开始干，应该是最好的
a、介绍 - vue.js官方文档的基础部分硬着头皮看一遍
我的建议是，先把介绍 - vue.js官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外，前面几章完全就是把 Vue.js 当作一个模版引擎来用。
b、ECMAScript6，Webpack，NPM 以及 Vue-Cli 的基本用法，最好对Node.js也要有所了解
然后开始学习 ECMAScript6，Webpack，NPM 以及 Vue-Cli 的基本用法，最好对Node.js也要有所了解。
c、看网上各种实战视频以及文章还有别人开源的源代码
最后组件部分先大致看一遍，了解组件里面都有哪些概念之后，开始看网上各种实战视频以及文章还有别人开源的源代码。
14、ECMAScript 是啥？
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。
而 ECMAScript6 就是新一代的 JavaScript 语言。
15、Webpack 是啥？
a、前端打包工具
Webpack 是一个前端打包和构建工具。如果你之前一直是手写 HTML，CSS，JavaScript，并且通过 link 标签将 CSS 引入你的 HTML 文件，以及通过 Script 标签的 src 属性引入外部的 JS 脚本，那么你肯定会对这个工具感到陌生。不要紧，我们先来了解一下为什么要用 Webpack，然后带着原因去学习就好了。
16、为什么要用 Webpack？
a、方便管理各种素材
b、打包以便减少浏览器的访问次数
前面说了，做一个单页应用程序本身就相当复杂，而且在做的时候肯定会使用到很多素材和别的第三方库，我们该如何去管理这些东西呢？
还有前面讲到了 Webpack 是一个前端打包工具，前端代码为什么要打包呢？因为单页应用程序中用到很多素材，如果每一个素材都通过在 HTML 中以 src 属性或者 link 来引入，那么请求一个页面的时候，可能浏览器就要发起十多次请求，往往请求的这些资源都是一些脚本代码或者很小的图片，这些资源本身才几 k，下载连 1 秒都不需要，但是由于 HTTP 是应用层协议，它的下层是 TCP 这个运输层协议，TCP 的握手和挥手过程消耗的时间可能比下载资源本身还要长，所以需要把这些小文件全部打包成一个文件，这样只要一次 TCP 握手和挥手的过程，就把多个资源给下载下来了，并且多个资源由于都是共享一个 HTTP 请求，所以 head 等部分也是共享的，相当于形成了规模效应，让网页展现更快，用户体验更好。
17、NPM 和 Node.js 又是什么？它们是什么关系？
a、Node.js 是一个服务端的 JavaScript 运行环境
Node.js 是一个服务端的 JavaScript 运行环境，通过 Node.js 可以实现用 JavaScript 写独立程序。
b、Node.js 可以写独立程序（Webpack 就是 Node.js 写的）
像我们之前提到的 Webpack 就是 Node.js 写的，所以作为一个前端开发，即使你不用 Node.js 写独立程序，也得配一个 Node.js 运行环境，毕竟很多前端工具都是使用它写的。
c、NPM 是一个 node.js 的包管理器（类似 java 的 maven（包的依赖管理），php 也有一个类似的）。
NPM 是一个 node.js 的包管理器。我们在传统开发的时候，JQuery.js 大多都是百度搜索，然后去官网下载，或者直接引入 CDN 资源，这种方法太过于麻烦。如果以后遇到其他的包，这个包的代码本身可能还调用了其他的包（也称这个包和其他的那几个包存在依赖关系），那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了 NPM 这个包管理器，直接可以通过
npm install xxx包名称
的方式引入它，比如说
npm install vue
18、Vue-CLi 是啥？
它是一个 vue.js 的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好 Webpack，以及各种依赖包的工具，它可以通过
npm install vue-cli -g
的方式安装，后面的 -g 表示全局安装的意思，意味着你可以打开命令行之后直接通过 vue 命令调用它。
19、Vuex 和 Vue-route 是什么（暂时了解即可）？
Vuex 是 vue 的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。
Vue-route 是 vue 的一个前端路由器，这个路由器不是我们上网用的路由器，而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。
要讲清楚这两个东西，又得花费大量篇幅，所以这里只是简单提一下，先学好 vue.js 本身才是最重要的。
二、vue.js 到底有什么用
1、问题
2、解答
vue 可以简单写单个页面，也可以写一个大的前端系统，个人建议如果写小的页面（零基础学习 vue 的话）可以看看 vue 官网提供样例：https://github.com/vuejs/vue/...，如果稍微大点的项目，推荐看看https://github.com/bailicangd...这个项目。
换一个角度来收，你可以直接用 vue.js 写一个页面，而不用 jQuery 来搞事（简单页面）
Vue 可以做从简单到复杂的前端单页应用，随处可见的 Web 前端都可以用 Vue 来开发。
而且 Vue 上手速度快、功能强大，且提供了非常好用的脚手架 vue-cli，很简单就可以构建并让自己的项目跑起来。
刚学 Vue 的时候做了一个简单的练手项目，https://github.com/answershut...，类似市面上的易企秀，根据用户设计产生精美的页面。
这个是我学习 angularjs1.x 练手的项目，一个 HTML5 播放器，使用了数据绑定思想。你可参考下
http://ngdemo.sinaapp.com/audio/
三、什么是 vue.js？
Vue.js 新手入门指南
在做的过程中也对 Vue.js 的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+ 模版引擎为主的开发，从一个从未接触过除 HTML+CSS+JavaScript+jQuery以外的前端技术的人到现在可以独立使用 Vue.js 以及各种附属的 UI 库来开发项目，我总结了一些知识和经验想与大家分享。
下面我就以问答的形式来分享吧。这里假设你仅仅只掌握了 HTML+CSS+JavaScript，如果你对 JQuery 这个前端库，以及各种后端模版语言比如说 PHP，JSP 还有所了解并且使用过的话那就太好了。
1.Vue.js 是什么？
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
这是官网的介绍，是不是觉得非常的抽象非常的官方？看完之后可能还是有很多人不是很懂这个框架到底是用来做什么的，什么是“渐进式框架”？什么是“自底向上增量开发”？什么是“视图层”？什么是“单文件组件”？什么是“复杂的单页应用？”第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥？还有最后一段话，“Vue.js 与其它库 / 框架的区别”究竟是什么？
不要担心，如果你慢慢看完这里面的所有问答，一定会对前面那些可能你从未听说过的专业术语有一种恍然大悟的感觉。
2.Vue.js 到底是什么？
想必现在能看到我这篇文章的人，都是用着 APP 或者网页版知乎在阅读把。Vue.js 就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。
3. 单页应用程序（SPA）
顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多，而且页面中的内容需要根据用户的操作动态变化。
4. 你前面说的网页版知乎我也可以用 JQuery 写啊，为什么要用 Vue.js 呢？
讲到 JQuery，就不得不说到 JavaScript 的 DOM 操作了。如果你用 JQuery 来开发一个知乎，那么你就需要用 JQuery 中的各种 DOM 操作方法去操作 HTML 的 DOM 结构了。
现在我们把一个网页应用抽象一下，那么 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.js，那么这些抱怨将不复存在。
5.Vue.js 为什么能让基于网页的前端应用程序开发起来这么方便？
因为 Vue.js 有声明式，响应式的数据绑定，与组件化的开发，并且还使用了 Virtual DOM 这个看名字就觉得高大上的技术。
可是这些名词都是啥？
6. 响应式的数据绑定
这里的响应式不是 @media 媒体查询中的响应式布局，而是指 vue.js 会自动对页面中某些数据的变化做出响应。至于是如何响应的，大家可以先把下面这段代码随便粘贴到一个扩展名为 html 的文件然后用浏览器打开，随便在文本框里面输入一些文字，观察一下页面变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js测试 - 代码之美专栏</title>
<!-- author:昌维 代码之美 https://zhuanlan.zhihu.com/codes -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
<hr>
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
是不是会发现一个很神奇的现象，文本框里面输入的文字和后面的 p 标签中的内容一起变化？
换句话说，p 标签里面通过 {{message}} 这个写法与 input 标签中的 value 绑定在了一起，其中变化，另外一个和它绑定的数据就跟着变化。
结合标题来说，就是 vue.js 会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，在图上是以 input 标签的 v-model 属性来声明的，因此你在别的地方可能也会看到有人粗略的称 vue.js 为声明式渲染的模版引擎。
7. 组件化开发
还记得在传统前端开发的时候，我们都是每个人做一个页面，然后最后套入各种后端模版引擎，比如说 PHP 的 Smarty 或者Java的 JSP 等等。
但是现在我们做单页应用，页面交互和结构十分复杂，一个页面上就有许许多多的模块需要编写，而且往往一个模块的代码量和工作量就非常庞大，如果还按照原先的方法来开发，那么会累死人。而且遇到以后的产品需求变更，修改起来也非常麻烦，生怕动了其中一个 div 之后，其他 div 跟着雪崩，整个页面全部乱套，或者由于 JavaScript 的事件冒泡机制，导致修改一些内层的 DOM 事件处理函数之后，出现各种莫名其妙的诡异 BUG。
在面向对象编程中，我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中，我们也可以把一些大功能拆分成许多函数，然后分配给不同的人来开发。
在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。
Vue.js 通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
8.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 量级普遍较大，平均一下还是比较划算的。
9. 我到底该怎么用 Vue.js 做单页应用开发？
说了这么多，我还是不知道怎么用它做出一个像知乎那样的页面啊，到底怎么学它呢？
前面我们看了一个响应式的数据绑定案例，那只是一个 DEMO，而且也看不出有什么实际意义，离真正的单页应用程序还差得远，到底怎么用它开发真实的项目呢？
我的建议是，先把介绍 - vue.js官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外，前面几章完全就是把 Vue.js 当作一个模版引擎来用。
然后开始学习 ECMAScript6，Webpack，NPM 以及 Vue-Cli 的基本用法，最好对Node.js也要有所了解。
最后组件部分先大致看一遍，了解组件里面都有哪些概念之后，开始看网上各种实战视频以及文章还有别人开源的源代码。
10. 在前面你提到过好几次 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 入门
11. 我在学习 Vue.js 的时候老是听到 Webpack，这是啥？
Webpack 是一个前端打包和构建工具。如果你之前一直是手写 HTML，CSS，JavaScript，并且通过 link 标签将 CSS 引入你的 HTML 文件，以及通过 Script 标签的 src 属性引入外部的 JS 脚本，那么你肯定会对这个工具感到陌生。不要紧，我们先来了解一下为什么要用 Webpack，然后带着原因去学习就好了。
12. 为什么要用 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 之类的一样。
13.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 可以安装各种插件来扩展功能，其实也是通过这种方式扩展。
如果你学过 PHP 的话，NPM 就和 PHP 里面的 Composer 差不多。也和 CentOS 下的 yum 和 Ubuntu 下的 apt-get 差不多。
14.Vue-CLi 又是啥？
它是一个 vue.js 的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好 Webpack，以及各种依赖包的工具，它可以通过
npm install vue-cli -g
的方式安装，后面的 -g 表示全局安装的意思，意味着你可以打开命令行之后直接通过 vue 命令调用它。
15. 我该不该学 Vue.js？
现在 Vue.js 无论是发展势头还是作者支持还是很好的，而且它本身中文资料就比较多，教程也很多，现在随随便便打开几个和前端开发有关的知乎专栏，基本上都能见到相关文章，社区也很活跃。
至于你该不该学，取决于你自己，如果你当前只是做做以内容展示为主的项目，或者就是成天用各种 CMS 建站仿站，并且以后都不打算更换更好的工作，那么可以暂时不用学。如果你开发的项目交互非常多，而且前后端开发都对前后端分离有很清楚的认识，那么可以大胆的学习，并且在实际项目中运用。
16.Vue.js 怎么火起来的？
关于这个问题，网上说法很多，我自己认为主要还是前些年大前端变革太快，而最近一年开始 Vue.js+Webpack 这个组合开始逐渐稳定下来了，而且已经有了很多中文资料。
对比它的竞争对手AngularJS，新旧版本项目无法平滑升级，变革太大让用户感觉不安稳。
而React本身主流推荐用的是 JSX，需要额外学习一门语法（什么？学 Vue.js 还要学 ECMAScript6？现在 ECMAScript6 是趋势，并不是因为 Vue.js 才要学的），并且 React 本身用的是 render 写法编写模版代码，这让很多用习惯了 Smarty 等后端模版引擎得人来使用感觉很不适应，现在看来 React 本身在中国一些论坛社区的火爆程度还是没有 Vue.js 高。
当然也并不是说除了 Vue.js 以外其他框架都很差。像知乎新版也是用 React 开发的，他还是有各自优秀的地方大家可以深入学习之后做出自己的判断。
17. 我在很多地方还看到 Vuex 和 Vue-route，它们又是什么？
Vuex 是 vue 的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。
Vue-route 是 vue 的一个前端路由器，这个路由器不是我们上网用的路由器，而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。
要讲清楚这两个东西，又得花费大量篇幅，所以这里只是简单提一下，先学好 vue.js 本身才是最重要的。
18. 我还在一些地方看到过 Vue-resource 和 Axios，它们又是什么？
我们在传统的前后端不分离的开发中，后端直接把数据通过模版引擎拼接进了返回的 HTML 中。而现在做单页应用程序属于前后端分离开发，那么这个单页应用程序中的数据就得通过 ajax 的方式获取，也要通过 ajax 的方式提交到后端。
在传统开发中我们都是通过 xmlhttprequest 手动操作，或者通过 JQuery 的 ajax 方法来进行数据提交获取。
vue.js 本身没有封装 ajax 操作库，所以我们要通过 Vue-resource 和 Axios 来进行 ajax 操作，而因为种种原因，现在 vue.js2.0 已经将 axios 作为官方推荐的 ajax 库了。
19. 我该学 Vue.js2.0 还是 1.0 呢？
现在很多框架和语言都是学新不学旧（Python慢慢也变得如此），因此如果不是为了维护老旧项目，肯定推荐学 Vue.js2.0。而且学会了 Vue.js2.0，再去学习 Vue.js1.0 也不是什么难事。
20. 写 Vue.js 用什么开发工具和电脑呢？
前端开发基本上不需要太高端的电脑都能胜任，现在这个时代是台电脑，装个编辑器都可以做前端开发的。
Vue.js 的组件文件本质上还是普通的代码文件，所以各种编辑器配合一些语法检查插件就足够了。我自己用的是 sublime text 3，安装一些插件之后可以实现.vue 单文件组件高亮代码以及各种自动完成。Webstorm 中也有类似插件，大家可以在网上各种教学文章的指导下配置好环境。
我用的主题是 Monokai，这个主题在大部分显示器下长时间观看眼睛不会很疼。我使用的显示器是 LG IPS236，部分显示器有亮度色标调节，我这款显示器调到 2.0 左右会比较舒适，过低会导致底部的茶色背景变黑，反差较大更加疲劳，过高会导致对比度不足，画面泛白影响调色。
结语：
可能包括我在内的很多人在看到 Vue.js 那神奇的双向绑定优雅写法都会有一种非常惊艳，而看到中文文档发布之后有种想立马学习的冲动。可惜大前端终究是大前端，如果一个对于前端各个方面没有深入认识就想着能一步登天，肯定对不起大前端的“大”字。原本看着只想学一个 Vue.js，没想到顺带把 ECMAScript6，Webpack 配置，ESLint 配置，bable 配置，npm 使用，node.js 语法，以后 vue 全家桶中的 vuex，vue-route 等等等等都学了一遍。前段时间网上也流传出了一个职位叫做 Webpack 配置工程师，从这里也可以看出弄懂前端这个大杂烩确实不是那么容易。大家一起加油，有什么问题也可以在评论区回复，我会抽空补充在文章内容中。谢谢各位的支持！~
参考：https://blog.csdn.net/wxl1555/article/details/79964818