好程序员web 前端培训分享为什么那么多人 使 用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 本身才是最重要的。

　　 最后喜欢的小伙伴点个关注、收藏、转发哦！