为何用vue.js，为何前端开发46%的人都在用？

一句话总结：用数据绑定的思想，vue能够简单写单个页面，也能够写一个大的前端系统，也能够作手机app的界面。

一、Vue.js是什么？

渐进式框架

自底向上增量开发的设计

易学习

易整合

Vue.js（读音 /vjuː/, 相似于 view） 是一套构建用户界面的 渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

二、vue.js到底适合作哪一种类型的界面？

a、表单项繁多

b、内容须要根据用户的操做进行修改

Vue.js就是一个用于搭建相似于网页版知乎这种表单项繁多，且内容须要根据用户的操做进行修改的网页版应用。

三、单页应用程序（SPA）是什么？

一个页面就是应用（子应用）

顾名思义，单页应用通常指的就是一个页面就是应用，固然也能够是一个子应用，好比说知乎的一个页面就能够视为一个子应用。单页应用程序中通常交互处理很是多，并且页面中的内容须要根据用户的操做动态变化。

四、 前面说的网页版知乎我也能够用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，那么这些抱怨将不复存在。

五、前端里面常说的视图层是什么？

咱们把HTML中的DOM就能够与其余的部分独立开来划分出一个层次，这个层次就叫作视图层。

Vue 的核心库只关注视图层

六、使用jquery开发完整页面的流程？

a、html写构架

b、css装饰

c、js交互

讲到JQuery，就不得不说到JavaScript的DOM操做了。若是你用JQuery来开发一个知乎，那么你就须要用JQuery中的各类DOM操做方法去操做HTML的DOM结构了。

如今咱们把一个网页应用抽象一下，那么HTML中的DOM其实就是视图，一个网页就是经过DOM的组合与嵌套，造成了最基本的视图结构，再经过CSS的修饰，在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分，就须要用到JavaScript来接受用户的交互请求，而且经过事件机制来响应用户的交互操做，而且在事件的处理函数中进行各类数据的修改，好比说修改某个DOM中的innerHTML或者innerText部分。

七、Vue.js为何能让基于网页的前端应用程序开发起来这么方便？

a、有声明式

b、响应式的数据绑定

c、组件化的开发

d、Virtual DOM

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

八、vue.js中常说的数据动态绑定是什么？

就是vue.js会自动响应数据的变化状况，而且根据用户在代码中预先写好的绑定关系，对全部绑定在一块儿的数据和视图内容都进行修改。而这种绑定关系，在图上是以input 标签的v-model属性来声明的，所以你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

九、前端中为何要组件化开发？

a、非组件化开发代码和工做量都很是大

b、修改起来生不如死

可是如今咱们作单页应用，页面交互和结构十分复杂，一个页面上就有许许多多的模块须要编写，并且每每一个模块的代码量和工做量就很是庞大，若是还按照原先的方法来开发，那么会累死人。并且遇到之后的产品需求变动，修改起来也很是麻烦，生怕动了其中一个div以后，其余div跟着雪崩，整个页面所有乱套，或者因为JavaScript的事件冒泡机制，致使修改一些内层的DOM事件处理函数以后，出现各类莫名其妙的诡异BUG。

十、前端中如何进行组件化开发？

a、借用的后端的面向对象中的模块化思想（把一些大功能拆分红许多函数，而后分配给不一样的人来开发）

b、把一个单页应用中的各类模块拆分到一个一个单独的组件（component）中，咱们只要先在父级应用中写好各类组件标签（占坑），而且在组件标签中写好要传入组件的参数（就像给函数传入参数同样，这个参数叫作组件的属性），而后再分别写好各类组件的实现（填坑）

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

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

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

十一、为何有Virtual DOM技术？

a、问题

如今的网速愈来愈快了，不少人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，并且浏览器自己还会缓存不少资源文件，那么几十M的光纤为何打开一个以前已经打开过，已经有缓存的页面仍是感受很慢呢？

b、缘由

（1）、浏览器自己处理DOM也是有性能瓶颈的

（2）、用JQuery或者原生的JavaScript DOM操做函数对DOM进行频繁操做的时候，浏览器要不停的渲染新的DOM树

这就是由于浏览器自己处理DOM也是有性能瓶颈的，尤为是在传统开发中，用JQuery或者原生的JavaScript DOM操做函数对DOM进行频繁操做的时候，浏览器要不停的渲染新的DOM树，致使页面看起来很是卡顿。

十二、Virtual DOM如何实现？

a、预计算dom的各类操做，把最后一次的结果渲染出来（减小dom的渲染次数）

而Virtual DOM则是虚拟DOM的英文，简单来讲，他就是一种能够预先经过JavaScript进行各类计算，把最终的DOM操做计算出来并优化，因为这个DOM操做属于预处理操做，并无真实的操做DOM，因此叫作虚拟DOM。最后在计算完毕才真正将DOM操做提交，将DOM操做变化反映到DOM树上。

1三、到底该怎么用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、看网上各类实战视频以及文章还有别人开源的源代码

最后组件部分先大体看一遍，了解组件里面都有哪些概念以后，开始看网上各类实战视频以及文章还有别人开源的源代码。

1四、ECMAScript是啥？

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。平常场合，这两个词是能够互换的。

而ECMAScript6就是新一代的JavaScript语言。

1五、Webpack是啥？

a、前端打包工具

Webpack是一个前端打包和构建工具。若是你以前一直是手写HTML，CSS，JavaScript，而且经过link标签将CSS引入你的HTML文件，以及经过Script标签的src属性引入外部的JS脚本，那么你确定会对这个工具感到陌生。没关系，咱们先来了解一下为何要用Webpack，而后带着缘由去学习就行了。

1六、为何要用Webpack？

a、方便管理各类素材

b、打包以便减小浏览器的访问次数

前面说了，作一个单页应用程序自己就至关复杂，并且在作的时候确定会使用到不少素材和别的第三方库，咱们该如何去管理这些东西呢？

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

1七、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

1八、Vue-CLi是啥？

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

npm install vue-cli -g

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

1九、Vuex和Vue-route是什么

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

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

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