前端面试题集,(常见面试题,Vue.js面试题)仅供参考

常见面试

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


2)什么是原型链?
  由于_proto_是任何对象独有的属性,而js里万物皆对象,所以会形成一条_proto_连起来的链条,递归访问_proto_必须最终到头,并且值是null。
  当js引擎查找对象的属性时,先查找对象本身是否存在该属性,如果不存在,会在圆形链上查找,但不会查找自身的的prototype。


3)什么是闭包?如何理解闭包?
  闭包就是能够读取其他函数内部变量的函数
  1、定义和用法:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量,如果返回的这个函数在外部被执行,就产生了闭包。
  2、表现形式:使函数外部能够调用函数内部定义的变量
  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)进程与线程的选择取决以下几点:
  1、需要频繁创建销毁的优先使用线程;因为对进程来说创建和销毁一个进程代价是很大的。
  2、线程的切换速度快,所以在需要大量计算,切换频繁时用线程,还有耗时的操作使用线程可提高应用程序的响应
  3、因为对CPU系统的效率使用上线程更占优,所以可能要发展到多机分布的用进程,多核分布用线程;
  4、并行操作时使用线程,如C/S架构的服务器端并发线程响应用户的请求;
  5、需要更稳定安全时,适合选择进程;需要速度时,选择线程更好。


10)html5新特性?CSS3新特性?
  1、html5新特性:
    (1)语义标签
    (2)增强型表单
    (3)视频和音频
    (4)Canvas绘图
    (5)SVG绘图
    (7)拖放API
    (8)Web Worker
    (9)Web Storage
    (10)WebSocket
    (11)地理定位
  2、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)清楚浮动的方法?
  1、父级div定义 height
  2、结尾处加空div标签 clear:both
  3、父级div定义 伪类:after 和 zoom
  4、父级div定义 overflow:hidden


16)css选择器的权重的优先级?
  1、 第一等:代表内联样式,如: style=””,权值为1000。

  2、 第二等:代表ID选择器,如:#content,权值为0100。

  3、 第三等:代表类,伪类和属性选择器,如.content,权值为0010。

  4、 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。

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

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


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、从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
  2、从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源

  一、页面级优化

    1、JavaScript 压缩和模块打包

    2、按需加载资源

    3、在使用 DOM 操作库时用上 array-ids

    4、缓存

    5、启用 HTTP/2

    6、应用性能分析

    7、使用负载均衡方案

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

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

    10、使用更快的转译方案

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

    12、用于未来的一个建议:使用 service workers + 流

    13、图片编码优化

  二,减少页面加载时间的方

    1、使用多域名负载网页内的多个文件、图片
    2、使用CDN
    3、在服务器端配置control-cache last-modify-date
    4、在服务器配置Entity-Tag if-none-match
    5、尽可能减少DCOM元素
    6、Ajax采用缓存调用
    7、Javascript脚本放在文件末尾
    8、尽量减少页面中重复的HTTP请求数量
    9、服务器开启gzip压缩
    10、Javascript脚本放在文件末尾
    11、css样式的定义放置在文件头部

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


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


22)浏览器缓存有哪些,通常缓存有哪几种?
  1、http缓存
  2、websql
  cookie、 localstorage、sessionstorage、flash缓存


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


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


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


26)怎样添加、移除、移动、复制、创建和查找节点?
  1、创建新节点

    createDocumentFragment()   //创建一个DOM片段

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

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

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

    appendChild()   //添加

    removeChild()   //移除

    replaceChild()   //替换

    insertBefore()   //插入

  3、查找

    getElementsByTagName()   //通过标签名称

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

    getElementById()   //通过元素Id,唯一性


27)浏览器是如何渲染页面的?
  1、解析HTML文件,创建DOM树。
  2、解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
  3、将CSS与DOM合并,构建渲染树(Render Tree)
  4、布局和绘制,重绘(repaint)和重排(reflow)


28)为什么要初始化CC样式?
  因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果每队CSS初始化往往会出现浏览器之间的页面显示差异
  最简单的初始化方法就是:*(padding:0;margin:0;)


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

30)数组的操作方法?
  1、pop()尾部删除
  2、push()尾部添加
  3、unshift()头部添加
  4、shift()头部删除
  5、splice()从数组中添加


31)如何让div排成一排?
  再两个div的宽度加起来没超过父级的宽度的情况下使用:
    1、display : inline
    2、浮动
    3、定位 position(子级向父级定位)
    4、display : inline-block
    5、display : fiex


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


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


34)css怎么实现水平垂直居中?
  1、元素水平居中
     margin: 0 auto;
  2、元素水平垂直居中
    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;

    }
  3、position transform 元素未知宽度
    如果元素未知宽度,只需将上面例子中的margin: -50px 0 0 -50px;替换为:transform: translate(-50%,-50%);
  4、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;

     }
   5、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原型继承的几种方式?
  1、原型链继承
  2、构造函数继承(对象冒充继承)
  3、组合继承(原型链继承+构造函数继承)
  4、原型式继承
  5、寄生组合式继承


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


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


42)请说几种常用JQ事件?有什么作用?
  1、children() 获取返回备选元素的所以直接子元素
  2、parent() 获取当前匹配元素集合中的每个元素的父元素
  3、next() 获取查找每个段落的下一个同胞元素
  4、fine() 获取当前元素集合中每个元素的后代
  5、siblings() 获取匹配集合中每个元素的同胞
  6、parents() 获取当前元素集合中的每个元素的祖先元素
  7、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进行面试题


一、vue.js有哪些钩子函数?(一般只需要说三四个就可以)
  1、beforecreate : 可以在这加个loading事件,在加载实例时触发 //初始化之后
  2、created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 //创建完成
  3、mounted : 挂载元素,获取到DOM节点 //挂载之后
  4、updated : 如果对数据统一处理,在这里写上相应函数 //数据被更新后
  5、beforeDestroy : 可以做一个确认停止事件的确认框 //数据更新前
  6、nextTick : 更新数据后立即操作dom
  7、activated //组件激活时调用
  8、deactivated //组件停止时调用
  9、beforeDestroy //销毁之前
  10、destroyed //销毁之后


二、vue有哪些指令?(一般只需要说四五个就可以)
  常用指令:
    1、v-if指令  根据表达式的真假来删除和插入元素
    2、v-show指令  切换元素的 display CSS 属性来显示隐藏目标。
    3、v-else指令
    4、v-for指令  基于一个数组渲染一个列表,和JavaScript的遍历语法
    5、v-bind指令  可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性
    6、v-model指令  让表单元素和数据实现双向绑定(映射关系)
    7、v-on指令  用于给监听DOM事件
    8、v-text指令  主要是防止页面首次加载时 {{}} 出现在页面上。将对象中数据变量值显示在绑定的标签内容上。
    9、v-html指令  用来插入标签的
  余下指令:
    10、v-pre指令  对此标签原样输出
    11、v-cloak指令  渲染完成后才显示
    12、v-once指令  只渲染一次


三、mvvm和mvc区别?哪些场景适合?
  区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
  场景:数据操作比较多的场景,更加便捷


四、vue的优点是什么?
  1、低耦合。(视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。)
  2、可重用性。(可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。)
  3、独立开发。(开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。)
  4、可测试。(界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。)


五、组件之间的传值?
  1、父组件与子组件传值
    父组件通过标签上面定义传值
    子组件通过props方法接受数据
  2、子组件向父组件传递数据
    子组件通过$emit方法传递参数


六、路由之间跳转?
  1、声明式(标签跳转)
  2、编程式( js跳转)


七、vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
  第一步:在components目录新建你的组件文件(indexPage.vue),script一定要export default {}

  第二步:在需要用的页面(组件)中导入:import indexPage from '@/components/indexPage.vue'

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

  第四步:在template视图view中使用,

  例如有indexPage命名,使用的时候则index-page

八、vue如何实现按需加载配合webpack设置?

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

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

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

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


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


十、vuex有哪几种属性?
  有五种,分别是 State、 Getter、Mutation 、Action、 Module


十一、不用Vuex会带来什么问题?
  1、可维护性会下降,想修改数据要维护三个地方;
  2、可读性会下降,因为一个组件里的数据,根本就看不出来是从哪来的;
  3、增加耦合,大量的上传派发,会让耦合性大大增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。


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


十三、如何让CSS只在当前组件中起作用?
  将当前组件的<style>修改为<style scoped>


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


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


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


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


十八、active-class是哪个组件的属性?
  vue-router模块的router-link组件。


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


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


二十一、生命周期相关面试题
  (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


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


二十三、vue-loader是什么?使用它的用途有哪些?
  解析.vue文件的一个加载器。
  用途:js可以写es6、style样式可以scss或less、template可以加jade等


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

  使用步骤:

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

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

    第三步:在同一个文件,配置一个module属性

    第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”

  特性:

    可以用变量,例如($变量名称=值);

    可以用混合器,例如()

    可以嵌套


二十五、为什么使用key?
  当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。


二十六、为什么避免 v-if 和 v-for 用在一起?
当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,通过v-if 移动到容器元素,不会再重复遍历列表中的每个值。取而代之的是,我们只检查它一次,且不会在 v-if 为否的时候运算 v-for。


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

猜你喜欢

转载自www.cnblogs.com/stilovey/p/10300067.html