前端面试题集，（常见面试题，Vue.js面试题）仅供参考

常见面试

1）HTTP服务器响应消息 ?
　　HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

2）什么是原型链？
　　因为_proto_是任何对象独有的属性，而js里万物皆对象，因此会造成一条_proto_连起来的链条，递归访问_proto_必须最终到头，而且值是null。
　　当js引擎查找对象的属性时，先查找对象自己是否存在该属性，若是不存在，会在圆形链上查找，但不会查找自身的的prototype。

3）什么是闭包？如何理解闭包？
　　闭包就是可以读取其余函数内部变量的函数
　　一、定义和用法：当一个函数的返回值是另一个函数，而返回的那个函数若是调用了其父函数内部的其它变量，若是返回的这个函数在外部被执行，就产生了闭包。
　　二、表现形式：使函数外部可以调用函数内部定义的变量
　　三、变量的做用域等　　全局变量和局部变量。

4）undefined 和 null 区别？
　　undefined 就是一个应该有的值，但没有被定义
　　null 表示“没有对象”，（该处不该该有值）

5）js有几种数据类型，其中基本数据类型有哪些?
　　5个简单数据类型（基本数据类型） undefiend number string null boolean
　　1个复杂数据类型————Object

6）基本的两列自适应布局?
　　左定右适应：
　　例：#div1{
　　　　width: 100px;
　　　　display: inline-block;
　　　　background-color: black;
　　}

7）什么是jquery对象？
　　jquery将一个DOM对象转化为jquery对象后就可使用jquery类库提供的各类函数。

8）线程与进程的区别？
　　线程是进程的一个实体。
　　进程——资源分配的最小单位，线程——程序执行的最小单位。

9）进程与线程的选择取决如下几点：
　　一、须要频繁建立销毁的优先使用线程；由于对进程来讲建立和销毁一个进程代价是很大的。
　　二、线程的切换速度快，因此在须要大量计算，切换频繁时用线程，还有耗时的操做使用线程可提升应用程序的响应
　　三、由于对CPU系统的效率使用上线程更占优，因此可能要发展到多机分布的用进程，多核分布用线程；
　　四、并行操做时使用线程，如C/S架构的服务器端并发线程响应用户的请求；
　　五、须要更稳定安全时，适合选择进程；须要速度时，选择线程更好。

10）html5新特性？CSS3新特性？
　　一、html5新特性：
　　　　(1)语义标签
　　　　(2)加强型表单
　　　　(3)视频和音频
　　　　(4)Canvas绘图
　　　　(5)SVG绘图
　　　　(7)拖放API
　　　　(8)Web Worker
　　　　(9)Web Storage
　　　　(10)WebSocket
　　　　(11)地理定位
　　二、CSS3新特性：
　　　（1）圆角（border-radius）
　　　（2）阴影（box-shadow）
　　　（3）文字特效（text-shadow）
　　　（4）线性渐变（gradient）
　　　（5）旋转
　　　（6）缩放 等以及增长了更多的css选择器

11） 拖拽会用到哪些事件？
　　dragstart 、dragenter 、dragover 、dragleave 、drag 、drop 、dragend

12）请描述一下sessionStorage和localstorage区别?
　　localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
　　sessionStorage 数据在当前浏览器窗口关闭后自动删除。
　　sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

13）什么是ajax?
　　ajax(异步javascript xml) 可以刷新局部网页数据而不是从新加载整个网页。

14）xml和json的区别?
　　JSON的速度要远远快于XML
　　JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
　　JSON相对于XML来说，数据的体积小，传递的速度更快些

15）清楚浮动的方法？
　　一、父级div定义 height
　　二、结尾处加空div标签 clear:both
　　三、父级div定义 伪类:after 和 zoom
　　四、父级div定义 overflow:hidden

16）css选择器的权重的优先级?
　　一、 第一等：表明内联样式，如: style=””，权值为1000。

　　二、 第二等：表明ID选择器，如：#content，权值为0100。

　　三、 第三等：表明类，伪类和属性选择器，如.content，权值为0010。

　　四、 第四等：表明类型选择器和伪元素选择器，如div p，权值为0001。

　　五、 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

　　六、 继承的样式没有权值。

17）三个盒子，左右定宽，中间自适应有几种方法?
　　第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。
　　第二种：左右两侧采用绝对定位 中间一样采用margin-left margin-right方法
　　第三种负的margin

18）常见的HTTP状态码？

　　2开头 （请求成功）表示成功处理了请求的状态代码。

　　　　200   （成功）  服务器已成功处理了请求。 一般，这表示服务器提供了请求的网页。

　　　　201   （已建立）  请求成功而且服务器建立了新的资源。 

　　　　202   （已接受）  服务器已接受请求，但还没有处理。 

　　　　203   （非受权信息）  服务器已成功处理了请求，但返回的信息可能来自另外一来源。 

　　　　204   （无内容）  服务器成功处理了请求，但没有返回任何内容。 

　　　　205   （重置内容） 服务器成功处理了请求，但没有返回任何内容。

　　　　206   （部份内容）  服务器成功处理了部分 GET 请求。

　　3开头 （请求被重定向）表示要完成请求，须要进一步操做。 一般，这些状态代码用来重定向。

　　　　300 （多种选择） 针对请求，服务器可执行多种操做。 服务器可根据请求者 (user agent) 选择一项操做，或提供操做列表供请求者选择。

　　　　301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

　　　　302 （临时移动） 服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。

　　　　303 （查看其余位置） 请求者应当对不一样的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

　　　　304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。

　　　　305 （使用代理） 请求者只能使用代理访问请求的网页。 若是服务器返回此响应，还表示请求者应使用代理。

　　　　307 （临时重定向） 服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。

　　　4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

　　　　400 （错误请求） 服务器不理解请求的语法。

　　　　401   （未受权） 请求要求身份验证。 对于须要登陆的网页，服务器可能返回此响应。 

　　　　403   （禁止） 服务器拒绝请求。

　　　　404   （未找到） 服务器找不到请求的网页。

　　　　405   （方法禁用） 禁用请求中指定的方法。 

　　　　406   （不接受） 没法使用请求的内容特性响应请求的网页。 

　　　　407   （须要代理受权） 此状态代码与 401（未受权）相似，但指定请求者应当受权使用代理。

　　　　408   （请求超时）  服务器等候请求时发生超时。 

　　　　409   （冲突）  服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 

　　　　410   （已删除）  若是请求的资源已永久删除，服务器就会返回此响应。 

　　　　411   （须要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 

　　　　412   （未知足前提条件） 服务器未知足请求者在请求中设置的其中一个前提条件。 

　　　　413   （请求实体过大） 服务器没法处理请求，由于请求实体过大，超出服务器的处理能力。 

　　　　414   （请求的 URI 过长） 请求的 URI（一般为网址）过长，服务器没法处理。 

　　　　415   （不支持的媒体类型） 请求的格式不受请求页面的支持。 

　　　　416   （请求范围不符合要求） 若是页面没法提供请求的范围，则服务器会返回此状态代码。 

　　　　417   （未知足指望值） 服务器未知足"指望"请求标头字段的要求。

　　5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误多是服务器自己的错误，而不是请求出错。

　　　　500   （服务器内部错误）  服务器遇到错误，没法完成请求。 

　　　　501   （还没有实施） 服务器不具有完成请求的功能。 例如，服务器没法识别请求方法时可能会返回此代码。 

　　　　502   （错误网关） 服务器做为网关或代理，从上游服务器收到无效响应。 

　　　　503   （服务不可用） 服务器目前没法使用（因为超载或停机维护）。 一般，这只是暂时状态。 

　　　　504   （网关超时）  服务器做为网关或代理，可是没有及时从上游服务器收到请求。 

　　　　505   （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

19）如何进行网站性能优化？
　　一、从用户角度而言，优化可以让页面加载得更快、对用户的操做响应得更及时，可以给用户提供更为友好的体验。
　　二、从服务商角度而言，优化可以减小页面请求数、或者减少请求所占带宽，可以节省可观的资源

　　1、页面级优化

　　　　一、JavaScript 压缩和模块打包

　　　　二、按需加载资源

　　　　三、在使用 DOM 操做库时用上 array-ids

　　　　四、缓存

　　　　五、启用 HTTP/2

　　　　六、应用性能分析

　　　　七、使用负载均衡方案

　　　　八、为了更快的启动时间考虑一下同构

　　　　九、使用索引加速数据库查询

　　　　十、使用更快的转译方案

　　　　十一、避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

　　　　十二、用于将来的一个建议：使用 service workers + 流

　　　　1三、图片编码优化

　　二，减小页面加载时间的方

　　　　一、使用多域名负载网页内的多个文件、图片
　　　　二、使用CDN
　　　　三、在服务器端配置control-cache last-modify-date
　　　　四、在服务器配置Entity-Tag if-none-match
　　　　五、尽量减小DCOM元素
　　　　六、Ajax采用缓存调用
　　　　七、Javascript脚本放在文件末尾
　　　　八、尽可能减小页面中重复的HTTP请求数量
　　　　九、服务器开启gzip压缩
　　　　十、Javascript脚本放在文件末尾
　　　　十一、css样式的定义放置在文件头部

20）px和em的区别?
　　　　px表示像素 ，是绝对单位，不会由于其余元素的尺寸变化而变化
　　　　em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其余元素尺寸来决定的相对值

21）优雅降级和渐进加强?它们的区别？
　　　　渐进加强： 针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
　　　　优雅降级： 一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。
　　　　区别：优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的、可以起做用的版本开始，并不断扩充，以适应将来环境的须要。

22）浏览器缓存有哪些，一般缓存有哪几种?
　　一、http缓存
　　二、websql
　　cookie、 localstorage、sessionstorage、flash缓存

23）localstorage和sessionstorage区别?
　　localstorage , 适用于长期存储数据，浏览器关闭数据不丢失
　　sessionstorage ， 存储的数据再浏览器关闭后自动删除

24）bootstrap响应式实现的原理?
　　百分比布局+媒体查询

25）关于JS事件冒泡与JS事件代理?
　　事件冒泡：
　　　　通俗易懂的来说，就是当一个子元素的事件被触发的时候，该事件会从被点击的子元素开始逐级向上传播，触发父级元素的点击事件。
　　事件委托:
　　　　就是将子元素的事件经过冒泡的形式交由父元素来执行。

26）怎样添加、移除、移动、复制、建立和查找节点？
　　一、建立新节点

　　　　createDocumentFragment() 　　//建立一个DOM片断

　　　　createElement()　　 //建立一个具体的元素

　　　　createTextNode() 　　//建立一个文本节点

　　　二、添加、移除、替换、插入

　　　　appendChild()　　 //添加

　　　　removeChild()　　 //移除

　　　　replaceChild()　　 //替换

　　　　insertBefore()　　 //插入

　　三、查找

　　　　getElementsByTagName() 　　//经过标签名称

　　　　getElementsByName() 　　//经过元素的Name属性的值

　　　　getElementById() 　　//经过元素Id，惟一性

27）浏览器是如何渲染页面的？
　　一、解析HTML文件，建立DOM树。
　　二、解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
　　三、将CSS与DOM合并，构建渲染树（Render Tree）
　　四、布局和绘制，重绘（repaint）和重排（reflow）

28）为何要初始化CC样式？
　　由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是每队CSS初始化每每会出现浏览器之间的页面显示差别
　　最简单的初始化方法就是：*（padding：0；margin：0；）

29）说说你对语义化的理解？
　　一、去掉或丢失样式的时候可以让页面呈现出清晰的结构
　　二、有利于SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖与标签来肯定上下文和各个关键字的权重
　　三、方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
　　四、便于团队开发和维护，语义化更可读性，是进一步开发网页的必要步骤，遵循W3C标准的团队都遵循这个标准，能够减小差别化

30）数组的操做方法？
　　一、pop()尾部删除
　　二、push()尾部添加
　　三、unshift()头部添加
　　四、shift()头部删除
　　五、splice()从数组中添加

31）如何让div排成一排？
　　再两个div的宽度加起来没超过父级的宽度的状况下使用：
　　　　一、display : inline
　　　　二、浮动
　　　　三、定位 position（子级向父级定位）
　　　　四、display : inline-block
　　　　五、display : fiex

32）什么是原型链？
　　　　说白了，其实就是有限的的实例对象和原型之间组成的有限链，就是用来实现共享属性和继承的

33）请描述一下this对象是什么？不一样的场景的区别？
　　　　this是当前执行上下文对象
　　　　在全局做用域下，它指向window
　　　　在函数调用时，谁调用的就指向谁
　　　　在经过apply或call调用时，this指向第一个参数
　　　　在经过bind返回的函数里，this始终指向在bind函数生成时传进去的第一个参数

34）css怎么实现水平垂直居中？
　　一、元素水平居中
　　　　　margin: 0 auto;
　　二、元素水平垂直居中
　　　　position 元素已知宽度
　　　　父元素设置为：position: relative;
　　　　子元素设置为：position: absolute;
　　　　距上50%，据左50%，而后减去元素自身宽度的距离就能够实现
　　　　例：
　　　　<div class="box">

　　　　　　<div class="content"></div>

　　　　</div>

　　　　.box {

　　　　　　background-color: #FF8C00;

　　　　　　width: 300px;

　　　　　　height: 300px;

　　　　　　position: relative;

　　　　}

　　　　.content {

　　　　　　background-color: #F00;

　　　　　　width: 100px;

　　　　　　height: 100px;

　　　　　　position: absolute;

　　　　　　left: 50%;

　　　　　　top: 50%;

　　　　　　margin: -50px 0 0 -50px;

　　　　}
　　三、position transform 元素未知宽度
　　　　若是元素未知宽度，只需将上面例子中的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
　　四、flex布局
　　例：
　　　　.box {

　　　　　　background-color: #FF8C00;

　　　　　　width: 300px;

　　　　　　height: 300px;

　　　　　　display: flex;　　//flex布局

　　　　　　justify-content: center;//使子项目水平居中

　　　　　　align-items: center;//使子项目垂直居中

　　　　}

　　　　.content {

　　　　　　background-color: #F00;

　　　　　　width: 100px;

　　　　　　height: 100px;

　　　　　}
　　　五、table-cell布局
　　　　   由于table-cell至关与表格的td，td为行内元素，没法设置宽和高，因此嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用

35）var和let区别？
　　let : 变量只能声明一次
　　var : 变量能够屡次声明

36）一个网站通过哪些流程上线？
　　　　市场调研，需求讨论，功能模块划分，技术选型，版本迭代（开发 测试 部署 发布）

37）你是怎么理解html5的？
　　　　简单理解就是html（超文本标记语言）的第五次重大修改的版本语言，04年正式提出，07年正式被W3C接纳，相比html4，主要增长了新元素互操做性，主要时针对移动设备和多媒体，更好的语义化和SEO，有更完善的标签和更强大的API

38）简述同步和异步的区别?
　　同步是阻塞模式，异步是非阻塞模式。
　　同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去； 异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。

39）js原型继承的几种方式？
　　一、原型链继承
　　二、构造函数继承（对象冒充继承）
　　三、组合继承（原型链继承+构造函数继承）
　　四、原型式继承
　　五、寄生组合式继承

40）JavaScript中的定时器有哪些？它们的区别？
　　setTimeout 只执行一次
　　setLnterval 会一直重复执行

41）Java变量的做用域?
　　变量的做用域指 可使用此变量的简单名称来引用它的 程序区域。
　　变量声明 在程序中的位置 决定了变量的做用域。
　　按做用域来分，变量能够有下面4种：局部变量、成员变量、方法参数和异常处理参数。
　　局部变量在方法或方法的一块代码中声明，它的做用域为它所在的代码块（代码块是整个方法或方法中的某块代码，即以{厎包括的代码）。
　　成员变量是一个类的成员。它在一个类的内部，但在任何方法或构造器以外声明。成员变量的做用域是整个类。
　　方法参数被传递给方法或构造器，它的做用域就是它所在方法或构造器的代码。
　　异常处理参数被传递给异常处理代码，它的做用域是异常处理部分，也就是catch语句后面的{厎之间的代码块。
　　在一个肯定的域中，变量名应该是唯一的。一般，一个域用大括号{}来划定。

42）请说几种经常使用JQ事件？有什么做用？
　　一、children() 获取返回备选元素的因此直接子元素
　　二、parent() 获取当前匹配元素集合中的每一个元素的父元素
　　三、next() 获取查找每一个段落的下一个同胞元素
　　四、fine() 获取当前元素集合中每一个元素的后代
　　五、siblings() 获取匹配集合中每一个元素的同胞
　　六、parents() 获取当前元素集合中的每一个元素的祖先元素
　　七、eq() 获取将匹配元素集合缩减值制定index上的一个
　　其他请参考 　　 http://www.w3school.com.cn/jquery/jquery_ref_events.asp

43）什么是gulp？
　　Gulp 是基于node.js的一个前端自动化构建工具，开发这可使用它构建自动化工做流程（前端集成开发环境）。 使用gulp你能够简化工做量，让你把重点放在功能的开发上，从而提升你的开发效率和工做质量。
　　例如：你能够用gulp能够网页自动刷新，和MVVM开发模式很类似，若是你对vue.js有所了解的话，那么你必定不会陌生。你也可使用gulp对sass进行预处理、代码检测、图片优化压缩、只须要一个简单的指令就能所有完成。

如下针对Vue.js进行面试题

1、vue.js有哪些钩子函数？（通常只须要说三四个就能够）
　　一、beforecreate : 能够在这加个loading事件，在加载实例时触发 //初始化以后
　　二、created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 //建立完成
　　三、mounted : 挂载元素，获取到DOM节点 //挂载以后
　　四、updated : 若是对数据统一处理，在这里写上相应函数 //数据被更新后
　　五、beforeDestroy : 能够作一个确认中止事件的确认框 //数据更新前
　　六、nextTick : 更新数据后当即操做dom
　　七、activated //组件激活时调用
　　八、deactivated //组件中止时调用
　　九、beforeDestroy //销毁以前
　　十、destroyed //销毁以后

2、vue有哪些指令？（通常只须要说四五个就能够）
　　经常使用指令：
　　　　一、v-if指令　　根据表达式的真假来删除和插入元素
　　　　二、v-show指令　　切换元素的 display CSS 属性来显示隐藏目标。
　　　　三、v-else指令
　　　　四、v-for指令　　基于一个数组渲染一个列表，和JavaScript的遍历语法
　　　　五、v-bind指令　　能够在其名称后面带一个参数，中间放一个冒号隔开，这个参数一般是HTML元素的特性
　　　　六、v-model指令　　让表单元素和数据实现双向绑定（映射关系）
　　　　七、v-on指令　　用于给监听DOM事件
　　　　八、v-text指令　　主要是防止页面首次加载时 {{}} 出如今页面上。将对象中数据变量值显示在绑定的标签内容上。
　　　　九、v-html指令　　用来插入标签的
　　余下指令：
　　　　十、v-pre指令　　对此标签原样输出
　　　　十一、v-cloak指令　　渲染完成后才显示
　　　　十二、v-once指令　　只渲染一次

3、mvvm和mvc区别？哪些场景适合？
　　区别：vue数据驱动，经过数据来显示视图层而不是节点操做。
　　场景：数据操做比较多的场景，更加便捷

4、vue的优势是什么？
　　一、低耦合。（视图（View）能够独立于Model变化和修改，一个ViewModel能够绑定到不一样的"View"上，当View变化的时候Model能够不变，当Model变化的时候View也能够不变。）
　　二、可重用性。（能够把一些视图逻辑放在一个ViewModel里面，让不少view重用这段视图逻辑。）
　　三、独立开发。（开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计。）
　　四、可测试。（界面素来是比较难于测试的，而如今测试能够针对ViewModel来写。）

5、组件之间的传值？
　　一、父组件与子组件传值
　　　　父组件经过标签上面定义传值
　　　　子组件经过props方法接受数据
　　二、子组件向父组件传递数据
　　　　子组件经过$emit方法传递参数

6、路由之间跳转？
　　一、声明式（标签跳转）
　　二、编程式（ js跳转）

7、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
　　第一步：在components目录新建你的组件文件（indexPage.vue），script必定要export default {}

　　第二步：在须要用的页面（组件）中导入：import indexPage from '@/components/indexPage.vue'

　　第三步：注入到vue的子组件的components属性上面,components:{indexPage}

　　第四步：在template视图view中使用，

　　例若有indexPage命名，使用的时候则index-page

 

8、vue如何实现按需加载配合webpack设置？

　　webpack中提供了require.ensure()来实现按需加载。之前引入路由是经过import 这样的方式引入，改成const定义的方式进行引入。

　　不进行页面按需加载引入方式：import home from '../../common/home.vue'、

　　进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r

　　(require('../../common/home.vue')))

9、vuex是什么？怎么使用？哪一种功能场景使用它？
　　vue框架中状态管理。
　　在main.js引入store，注入。新建一个目录store，….. export 。
　　场景有：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车

10、vuex有哪几种属性？
　　有五种，分别是 State、 Getter、Mutation 、Action、 Module

11、不用Vuex会带来什么问题？
　　一、可维护性会降低，想修改数据要维护三个地方；
　　二、可读性会降低，由于一个组件里的数据，根本就看不出来是从哪来的；
　　三、增长耦合，大量的上传派发，会让耦合性大大增长，原本Vue用Component就是为了减小耦合，如今这么用，和组件化的初衷相背。

12、v-show和v-if指令的共同点和不一样点？
　　v-show指令是经过修改元素的display的CSS属性让其显示或者隐藏
　　v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

十3、如何让CSS只在当前组件中起做用？
　　将当前组件的<style>修改成<style scoped>

十4、<keep-alive></keep-alive>的做用是什么?
　　<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免从新渲染。

十5、Vue中引入组件的步骤?
　　一、采用ES6的import ... from ...语法或CommonJS的require()方法引入组件
　　二、对组件进行注册,代码以下
　　　　Vue.component('my-component', {
　　　　　　template: '<div>A custom component!</div>'
　　　　})
　　三、使用组件<my-component></my-component>

十6、指令v-el的做用是什么?
　　提供一个在页面上已存在的 DOM 元素做为 Vue 实例的挂载目标.能够是 CSS 选择器，也能够是一个 HTMLElement 实例

十7、在Vue中使用插件的步骤？
　　一、采用ES6的import ... from ...语法或CommonJSd的require()方法引入插件
　　二、使用全局方法Vue.use( plugin )使用插件,能够传入一个选项对象Vue.use(MyPlugin, { someOption: true })

十8、active-class是哪一个组件的属性？
　　vue-router模块的router-link组件。

十9、怎么定义vue-router的动态路由以及如何获取传过来的动态参数？
　　在router目录下的index.js文件中，对path属性加上/:id。
　　使用router对象的params.id。

二10、vue-router有哪几种导航钩子？
　　三种，
　　第一种是全局导航钩子：router.beforeEach(to,from,next)，做用：跳转前进行判断拦截。
　　第二种：组件内的钩子；
　　第三种：单独路由独享组件

二11、生命周期相关面试题
　　（1）、什么是vue生命周期？
　　　　　　答： Vue 实例从建立到销毁的过程，就是生命周期。也就是从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，咱们称这是 Vue 的生命周期。

　　（2）、vue生命周期的做用是什么？
　　　　　　答：它的生命周期中有多个事件钩子，让咱们在控制整个Vue实例的过程时更容易造成好的逻辑。

　　（3）、vue生命周期总共有几个阶段？
　　　　　　答：能够总共分为8个阶段：建立前/后, 载入前/后,更新前/后,销毁前/销毁后

　　（4）、第一次页面加载会触发哪几个钩子？
　　　　　　答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

　　（5）、DOM 渲染在 哪一个周期中就已经完成？
　　　　　　答：DOM 渲染在 mounted 中就已经完成了。

　　（6）、简单描述每一个周期具体适合哪些场景？
　　　　　　答：生命周期钩子的一些使用方法：
　　　　　　beforecreate : 能够在这加个loading事件，在加载实例时触发

　　　　　　created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

　　　　　　mounted : 挂载元素，获取到DOM节点

　　　　　　updated : 若是对数据统一处理，在这里写上相应函数

　　　　　　beforeDestroy : 能够作一个确认中止事件的确认框

　　　　　　nextTick : 更新数据后当即操做dom

二12、说出至少4种vue当中的指令和它的用法？
　　v-if：判断是否隐藏；
　　v-for：数据循环；
　　v-bind:class：绑定一个属性；
　　v-model：实现双向绑定

二十3、vue-loader是什么？使用它的用途有哪些？
　　解析.vue文件的一个加载器。
　　用途：js能够写es六、style样式能够scss或less、template能够加jade等

二十4、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
　　答：css的预编译。

　　使用步骤：

　　　　第一步：先装css-loader、node-loader、sass-loader等加载器模块

　　　　第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

　　　　第三步：在同一个文件，配置一个module属性

　　　　第四步：而后在组件的style标签加上lang属性 ，例如：lang=”scss”

　　特性:

　　　　能够用变量，例如（$变量名称=值）；

　　　　能够用混合器，例如（）

　　　　能够嵌套

二十5、为何使用key？
　　当有相同标签名的元素切换时，须要经过 key 特性设置惟一的值来标记以让 Vue 区分它们，不然 Vue 为了效率只会替换相同标签内部的内容。

二十6、为何避免 v-if 和 v-for 用在一块儿？
当 Vue 处理指令时，v-for 比 v-if 具备更高的优先级，经过v-if 移动到容器元素，不会再重复遍历列表中的每一个值。取而代之的是，咱们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

二十7、VNode是什么？虚拟 DOM是什么？ 　　　　Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。 　　　　“虚拟 DOM”是由 Vue 组件树创建起来的整个 VNode 树的称呼。