实习生社招疯狂面试两个月挑战一年岗位面试之路 | 掘金技术征文

NeverSettle
2,220 阅读36分钟

看前先点赞，养成好习惯哈哈哈
前言废话有点多，都是从(19年)大二到拿到offer的过程
不想看废话的大佬直接跳过看干货(超用心的JS)
除了前言的废话其他都是满满的干货
收藏总有用武之地
收集不易来个关注和赞鼓励一下吧
在评论区留下您宝贵的建议~

前言

刚上大学时和身边的同学一样，每天玩游戏出去玩，就是没想过将来，在大二经历了比较多事情以后才发现不能这样，每天不务正业太对不起爸妈，对不起以后的自己，一点未来也看不到，这不是我想要的。

因为我是科班出身，大二上半年在宿舍猛补前端三剑客，但宿舍诱惑太大了，室友的一句上号！马上就关掉电脑 timi，导致 玩游戏的时候想着自己还没学习，学习的时候又想和室友玩游戏，发现自己很痛苦游戏也没有玩开心，学习也没有静下心。便开始和其他宿舍的同学去图书馆闭关！

出了社会我才发现在图书馆的日子是我学习效率最高的时候！每天下课赶紧吃完晚饭就带着电脑去了图书馆一直呆到图书馆关门！周末图书馆八点开门，我们就早上七点半起来，吃完早餐等着管理员开门，中午匆匆吃完饭就在图书馆桌子上趴一会继续学习，一直到晚上，大二下半年除了睡觉在宿舍其他时间都在教室和图书馆！

大二下学期过半，我就开始着手准备面试了，每天学习之前先刷半个小时到一个小时面试题，在图书馆关门半个小时前我们一桌子的同学就互相面试，这样持续了一个月。那个时候我特别自信不想走校招，因为专科来的校企合作都是工厂和销售比较多，来了几家外包公司又不中意，我们就准备社招！对，有前辈跟我说过没经验的专科生 出来社招有多难，但我还想试试毕竟这段时间这么努力，不甘于去校招的外包公司。

期间在Boss联系了三百多家只有少些的几个人回复了我，向我要了简历。（真的谢谢好心回复我的前辈们）

我说这么多并不是在抱怨，谁让咱以前上学的时候不好好上，没能考个好点的大学呢，以前偷过的懒迟早都要还的

联系了三百家毫无音讯，我那时有多绝望！于是听着同学的建议开始投一年的岗位，期间也一直在刷题准备，一边面试一边查缺补漏，真的很管用！说了这么多我就奉上疯狂面试两个月的总结！（可能会有遗漏，是工作后才做的总结）

html/css

  • css盒模型

    css盒模型基本概念？

    1. margin、border、padding、content。在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border）元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。4个部分一起构成了css中元素的盒模型。
    2. 分类：标准模型、IE模型

    标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？

    1. 标准模型
    div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化
box-sizing:content-box;  /*设置标准盒子*/
    1. 怪异模型|IE模型
    div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化
box-sizing:border-box; /*IE模型*/

  • BFC（边距重叠解决方案）

BFC的基本概念?

BFC（Block Formatting Context ）:块级格式化上下文
IFC(CSS2.1)：Inline Formating Contexts，内联元素格式化上下文  
GFC(CSS3):GridLayout Formating Contexts，网格布局格式化上下文  
FFC(CSS3):Flex Formatting Contexts，自适应格式化上下文

BFC原理/ BFC渲染规则？

1、BFC元素垂直方向的边距会发生重叠
2、BFC的区域不会与浮动元素的box重叠（可用于清除浮动）
3、BFC为一个独立的元素，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。
4、计算BFC高度的时候，浮动元素也会参与计算。

如何创建BFC？

1、float值不为none，即为left, right
2、position的值不为static(默认值),relative，即为absolute,fixed
3、display为inline-block, flex, inline-flex, table-cell,table-caption
4、overflow不为visible，overflow为auto,hidden，scroll ;
5、使用fieldset元素（可以给表单元素设置环绕边框的html元素）

BFC的使用场景？

1、BFC垂直方向边距重叠
2、BFC不与float重叠
3、清除浮动：子元素是浮动元素的时候，把外层元素设置成BFC的时候，子元素的浮动元素也会参与到父级元素的高度计算上来。

  • css浮动

css浮动原理？

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

浮动元素引起的问题？

1、父元素的高度无法被撑开，影响与父元素同级的元素
2、与浮动元素同级的非浮动元素（内联元素）会跟随其后
3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

css清除浮动的方法？

1、使用空标签
给所有浮动标签后面添加一个空标签，定义CSS clear:both.
但是这种方法会增加一个无意义的标签。
2、设置父级元素为BFC元素
3、使用after伪元素清除浮动
这个方法只适用于非IE浏览器。该方法必须为需要清除浮动元素的伪对象中设置height:0,不然该元素会比实际元素高出若干像素。
#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

  • css经典布局

三栏布局：左右各300px,中间自适应？

  1. 浮动float
<style>
   html * {
     padding:0;
     margin:0;
   }
   .layout{
     margin-top:20px;
   }
   .layout article div{
     min-height:100px;
   }
 </style>
</head>
<body>
<!--浮动解决方案-->
<section class="layout float">
 <style media="screen">
   .layout.float .left{
     float:left;
     width:300px;
     background:red;
   }
   .layout.float .right{
     float:right;
     width:300px;
     background:blue;
   }
   .layout.float .center{ /*块元素自动撑开*/
     background:yellow;
   }
 </style>
 <article class="left-right-center">
   <div class="left"></div>
   <div class="right"></div>
   <div class="center">
     <h1>浮动解决方案</h1>
     1.这是三蓝布局中间部分
     2.这是三蓝布局中间部分
   </div>
 </article>
</section>
  1. 绝对定位position:absolute
<!--绝对定位解决方案-->
<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position:absolute;
    }
    .layout.absolute .left{
      left:0;
      width:300px;
      background:red;
    }
    .layout.absolute .center{
      left:300px;
      right:300px;
      background:yellow;
    }
    .layout.absolute .right{
      right:0;
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>绝对定位解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>
  1. flex布局
<!--flexbox解决方案-->
<section class="layout flexbox">
 <style>
   .layout.flexbox{
     margin-top:140px;
   }
   .layout.flexbox .left-center-right{
     display:flex;
   }
   .layout.flexbox .left{
     width:300px;
     background:red;
   }
   .layout.flexbox .center{
     flex:1; /*中间自适应原理*/
     background:yellow;
   }
   .layout.flexbox .right{
     width:300px;
     background:blue;
   }
 </style>
 <article class="left-center-right">
   <div class="left"></div>
   <div class="center">
     <h2>flexbox解决方案</h2>
     1.这是三蓝布局中间部分
     2.这是三蓝布局中间部分
   </div>
   <div class="right"></div>
 </article>
</section>
  1. 表格布局table-cell
<!--表格布局解决方案-->
<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width:100%;
      display:table;
      height:100px;
    }
    .layout.table .left-center-right>div{
      display:table-cell;
    }
    .layout.table .left{
      width:300px;
      background:red;
    }
    .layout.table .center{
      background:yellow;
    }
    .layout.table .right{
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>表格布局解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
  </article>
</section>
  1. 网格布局grid
<!--网格布局解决方案-->
<section class="layout grid">
  <style media="screen">
    .layout.grid .left-center-right{
      display:grid;
      width:100%;
      grid-template-rows:100px;
      grid-template-columns:300px auto 300px;
    }
    .layout.grid .left{
      background:red;
    }
    .layout.grid .center{
      background:yellow;
    }
    .layout.grid .right{
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>网格布局解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>
  1. 延伸
    这5种方案的优缺点
    ①浮动：清除浮动，兼容性比较好。
    ②绝对定位：快捷，布局已经脱离了文档流，导致下面的元素也要脱离文档流，使用性较差。
    ③flex布局，解决了浮动和绝对定位的缺点，移动端基本已经支持了兼容性。
    ④表格布局：表格布局的兼容性非常好
    ⑤网格布局：新出的
    如果“高度已知”去掉，中间内容高度撑开了，需要左右的高度也自动撑开，哪些方案仍适合
    ①flex、table能用
    ②flex左边有遮挡，所以显示在右边，没有遮挡的时候，就会显示在最左边。创建bfc
  2. 三栏布局
    ①左右宽度固定，中间自适应
    ②上下高度固定，中间自适应。
  3. 两栏布局
    ①左宽度固定，右自适应
    ②右宽度固定，左自适应
    ③上高度固定，下自适应
    ④下高度固定，上自适应

圣杯布局？

  1. 圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。
  2. .left， .right的margin-left是为了让.main .left .right在同一行。
  3. .container的padding-left,padding-right，.left的position和left,right的position和left是为了防止文字被遮挡。
<style>
    .main{
      float:left;
      width:100%;
    }
    .content{
      height:200px;
      margin-left:100px;
      margin-right:200px;
      background-color:green;
    }
    .main::after{
      display:block;
      content: '';
      font-size: 0;
      height:0;
      clear: both;
      zoom:1;
    }
    .left{
      float:left;
      width:100px;
      height:200px;
      margin-left:-100%; /*左栏移到第一行的首部*/
      background-color:red;
    }
    .right{
      float:left;
      width:200px;
      height:200px;
      margin-left:-200px; /*右栏移到和左中一行*/
      background-color:yellow;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="content"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>

  • css兼容

经常遇到的css兼容性的问题在哪些？如何解决的？

本都是ie8及以前的版本会遇到css兼容问题。一般是图片透明、圆角、字体大小，新出的css3样式。
aSuncat：如此老旧浏览器终究会被市场放弃，不花时间在这上面。

  • css hack

什么是CSS hack？

针对不同的浏览器或浏览器不同版本写相应的CSS的过程，就是CSS hack

CSS hack分类？
3种：条件hack、属性级hack、选择符hack。

// 1、条件hack
<!--[if IE]>
<style>
	.test{color:red;}
</style>
<![endif]-->

// 2、属性hack（类内部hack）
.test{
	color:#090\9; /*For IE8*/
	*color:#f00; /*For IE7 and earlier*/
	_color:#ff0; /*For IE6 and earlier*/
}

// 3、选择符hack（选择器属性前缀法）
* htm .test{color:#0f90;} /*For IE6 and earlier*/
* + html .test{color:#ff0;} /*For IE7*/

CSS hack书写顺序？

CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。

  • html、css基础

link和@import的区别？

1、从属关系区别：
link属于html标签，而@import是css提供的。
2、加载顺序区别：
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
3、兼容性区别：
import只在IE5以上才能识别，而link是html标签，无兼容问题。
4、dom可操作性区别：
可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
5、权重区别：
如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。
（aSuncat：简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）

如何理解标签语义，它有哪些好处？

1、语义元素清楚地向浏览器和开发者描述其意义。
2、好处：
（1）html结构清晰，代码可读性较好。
（2）有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
（3）无障碍阅读，样式丢失的时候能让页面呈现清晰的结构。
（4）方便其他设备解析，如盲人阅读器根据语义渲染网页
（5）便于团队维护和开发，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

css的选择符有哪些，优先级如何计算，哪些属性可以继承？

  1. css选择符类型
1、通用选择器：*
2、类别选择器：.class
3、id选择器：#id
4、标签选择器：p
5、后代选择器：div p
6、子选择器：div > p
7、群组选择器：div , p
8、相邻同胞选择器：div +p
9、伪类选择器：:link :visited :active :hover :focus :first-child
10、伪元素选择器：:first-letter :first-line:before :after :lang(language)
11、属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]
  1. 优先级计算
!important > 内联样式 > id > class > tag
3、属性继承
（1）所有元素可继承：visibility、cursor
（2）块级元素可继承：text-indent、text-align
（3）内联元素可继承：
①字体系列属性：font、font-family、font-size、font-style、font-variant、font-weight、font-stretch、font-size-adjust
②除text-indent、text-align之外的文本系列属性：
letter-spacing、word-spacing、white-space、line-height、color、text-transform、direction

扩展：
一、不可继承的样式属性：
1、display
2、文本属性：vertical-align、text-decoration、text-shadow、unicode-bidi
3、盒子模型属性：border、padding、margin、width、height
4、背景属性：background
5、定位属性：float、clear、position
6、生成内容属性：content
7、轮廓样式属性：outlien-style
8、页面样式属性：size
9、声音样式属性：pause-before

行内元素和块级元素举几个例子？

行内元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select,lable
块级标签：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr

伪类和伪元素？

伪类：:active :focus :hover :link :visited :first-child
伪元素：:before :after :first-letter :first-line

svg和canvas的区别？

1、canvas时h5提供的新的绘图方法 ；svg已经有了十多年的历史
2、canvas画图基于像素点，是位图，如果进行放大或缩小会失真 ；svg基于图形，用html标签描绘形状，放大缩小不会失真
3、canvas需要在js中绘制 ；svg在html绘制
4、canvas支持颜色比svg多
5、canvas无法对已经绘制的图像进行修改、操作 ；svg可以获取到标签进行操作

flex实现原理？

1、容器上有主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。
2、其中所有的孩子的布局都会受到这两个轴的影响。
3、有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。

src与href的区别？

1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

JavaScript总结（超用心）

1.如何理解 JS 中的this关键字？

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象。
全局环境：全局环境就是在里面，这里的this始终指向的是window对象。
局部环境：
1.在全局作用域下直接调用函数，this指向window。
2.对象函数调用，哪个对象调用就指向哪个对象。
3.使用 new 实例化对象，在构造函数中的this指向实例化对象。
4.使用call或apply改变this的指向。

2. JavaScript 中的作用域（scope）是指什么？

在 JavaScript 中，每个函数都有自己的作用域。作用域基本上是变量以及如何通过名称访问这些变量的规则的集合。只有函数中的代码才能访问函数作用域内的变量。

同一个作用域中的变量名必须是唯一的。一个作用域可以嵌套在另一个作用域内。如果一个作用域嵌套在另一个作用域内，最内部作用域内的代码可以访问另一个作用域的变量。

3.什么是闭包

我第一次解释闭包时，我常说函数中的函数;但是，它没有正确地描述闭包的确切含义。

闭包是在另一个作用域内创建一个封闭的词法范围。它通常会自动返回来生成这个词法环境。这个环境由创建闭包时在作用域内的任何局部变量组成。它就像一个微型工厂，用这些原料生产出具有特定功能的产品。

4. 解释 JavaScript 中的相等性。

JavaScript 中有严格比较和类型转换比较：

严格比较（例如 ===）在不允许强制转型的情况下检查两个值是否相等；
抽象比较（例如 ==）在允许强制转型的情况下检查两个值是否相等。

var a = "42";
var b = 42;
a == b; // true
a === b; // false

如果被比较的任何一个值可能是 true 或 false，要用 ===，而不是 ==；
如果被比较的任何一个值是这些特定值（0、“”或 []），要用 ===，而不是 ==；
在其他情况下，可以安全地使用 ==。它不仅安全，而且在很多情况下，它可以简化代码，并且提升代码可读性。

5. 解释一下变量的提升

变量的提升是JavaScript的默认行为，这意味着将所有变量声明移动到当前作用域的顶部，并且可以在声明之前使用变量。初始化不会被提升，提升仅作用于变量的声明。

var x = 1
console.log(x + '——' + y) // 1——undefined
var y = 2

6.如何理解事件委托

在DOM树上绑定事件监听器并使用JS事件处理程序是处理客户端事件响应的典型方法。 从理论上讲，我们可以将监听器附加到HTML中的任何DOM元素，但由于事件委派，这样做是浪费而且没必要的。

  • 什么是事件委托？
    这是一种让父元素上的事件监听器也影响子元素的技巧。 通常，事件传播（捕获和冒泡）允许我们实现事件委托。 冒泡意味着当触发子元素（目标）时，也可以逐层触发该子元素的父元素，直到它碰到DOM绑定的原始监听器（当前目标）。 捕获属性将事件阶段转换为捕获阶段，让事件下移到元素; 因此，触发方向与冒泡阶段相反。 捕获的默认值为false。

7.解释一下严格模式(strict mode)

严格模式用于标准化正常的JavaScript语义。严格模式可以嵌入到非严格模式中，关键字 ‘use strict’。使用严格模式后的代码应遵循JS严格的语法规则。例如，分号在每个语句声明之后使用。

8.解释 JavaScript 中的 null 和 undefined。

  • JavaScript 中有两种底层类型：null 和 undefined。它们代表了不同的含义：
  • 尚未初始化：undefined；
  • 空值：null。
//null和undefined是两个不同的对象
null == null  //true
null === null  //true
null == undefined //true
null === undefined //flase

9.解释 JavaScript 中的值和类型。

JavaScript提供两种数据类型: 基本数据类型和引用数据类型
基本数据类型有:

  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Symbol

引用数据类型有:

  • Object
  • Array
  • Function

10.解释事件冒泡以及如何阻止它？

事件冒泡是指嵌套最深的元素触发一个事件，然后这个事件顺着嵌套顺序在父元素上触发。

防止事件冒泡的一种方法是使用 event.cancelBubble（低于 IE 9） 或 event.stopPropagation()。

11.window.onload的作用？

window.onload是等文档和资源都加载完成后调用的事件，保证js获取元素 的时候，已经加载。

12.说说你对作用域链的理解？

作用域链是js中的一种查找机制，从当前作用域查找，当前作用域没有往上一级作用域查找，一直到最外层，如果都找不到则是is not define

13.定时器的分类？他们的区别及用法是什么？

Js中有两种定时器：setInterval：间歇执行，setTimeout：延迟执行  
setInterval(函数，时间) 时间单位ms，  
语法：setInterval(function(){},1000); 隔一秒执行函数一次  
一般用于倒计时，轮播图  
setTimeout(函数，时间) 时间单位ms，  
语法：setTimeout(function(){},1000); 延迟一秒执行函数一次，只会执行一次  
一般用于广告，广告弹出层

14.把下面的字符串去重，并去除掉特殊字符按照数字在前字母在后的顺序排序字符串

如下：“1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”
var str = “1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”;
var n = “”;
var s="";
for(var i=0;i<str.length;i++){
if((str[i]>=0&&str[i]<=9)&&n.indexOf(str[i])==-1){
n+=str[i];
}else if((str.charCodeAt(i)>=97&&str.charCodeAt(i)<=122)&&s.indexOf(str[i]) == -1){
s+=str[i];
}
}
console.log(n+s); //12345fdsarg

15.截取字符串“abcdefg”中的def。

var str = “abcdefg”;
if(str.indexOf(“def”)!=-1){
console.log(str.substr(str.indexOf(“def”),3));
}

16.数组方法pop() push() unshift() shift()？

push:在数组末尾添加一个或多个元素 Pop:在数组末尾删除一个元素，返回被删除的元素
unshift：在数组的头部添加或删除元素 shift：在数组头部删除一个元素，返回被删除的元素

17.split() join() 的区别？

split是字符串的方法，将字符串按照特定标志分割成数组
例：“u&s”.split(“&”) ------ [“u”,”s”]
Join:是数组方法，将数组按标志组合成字符串 [“u”,”s”].join（“-”）–‘u-s’

18.编写一个数组去重的方法。

function sort(arr) {
for(var i = 0;i<arr.length;i++){
for(var j = i+1;j<arr.length;j++){
if(arr[i] == arr[j]){
arr.splice(j,1);
j–; //删除一个元素后，后面的元素会依次往前，下标也需要依次往前
}
}
}
return arr
}

19.冒泡算法排序？

for(var i = 0;i<arr.length;i++){
for(var j = 0;j<arr.length-i;j++){
if(arr[j] > arr[j+1]){ //
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}

20.DOM怎样添加、移除、移动、复制、创建和查找节点

获取子节点
父节点.children
父节点.childNodes
获取父节点
子节点.parentNode
子节点.offsetParent
创建
document.createElement(‘标签名’)
document.createTextNode(‘文本内容’)
添加
父节点.appendChild(子节点)
父节点.insertBefore(newChild，refChild)
复制
被复制的节点.cloneNode(true)
删除：
节点.remove()
父节点.removeChild（子节点）
替换
父节点.replaceChild（newChild，refChild）

21.什么是window对象? 什么是document对象?

window是js中最大的对象，表示窗口，包含document
document文档对象，表示HTML

22.offsetWidth、clientWidth、scrollTop的区别？

offsetWidth：占位宽，包含 内容宽+左右padding+左右border
clientWidth：可视宽，包含 内容宽+左右padding
scrollTop：页面被卷去的高

23.如何获取url地址中搜索内容？

window.location.search

24.事件、IE与火狐的事件机制有什么区别？

IE的事件流是冒泡流，而火狐同时支持冒泡流和捕获流。

25.事件绑定和普通事件有什么区别。

标签.事件：如果给同一个元素添加同一个事件，后面的会覆盖前面
事件绑定：可以给同一个元素添加同一个事件，不会被覆盖

26.解释一下事件流？

事件捕获阶段：当事件发生的时候，将事件从window依次往子元素传递
确定目标阶段：确定事件目标
事件冒泡阶段：事件目标开始处理事件，处理完以后会将事件依次传递给父元素，一直到window
事件都是在事件冒泡处理,ie只有冒泡

27.拖拽效果中有几种事件？

按下onmousedown，拖拽onmousemove，弹起onmouseup

28.cookie的利弊？

优点：极高的扩展性和可用性
1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术（SSL），减少cookie被po解的可能性。
3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
因为这些弊端（主要是cookie的大小和多少都受限制，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用），IE8以后，就出现一个web storage；它仅仅是为了本地缓存数据而存在；但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在。

29.call()和apply()的区别和作用？

都是用来改变this的指向，在传值的过程中会有些区别
call（this的指向，参数1，参数2…）
apply（this的指向,[参数1，参数2…]）

30.创建ajax的过程。

function ajax(json) {
json.data = json.data||""; //如果没有请求参数，为空
json.contentType = json.contentType || “application/x-www-form-urlencoded”; //如果没有字符编码，用默认的
//1.创建对象
if(window.XMLHttpRequest){ //正常
var ajax = new XMLHttpRequest();
}else { //兼容ie6
var ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
}

​ //2.建立连接
​ if(json.type.toUpperCase() ==“get”.toUpperCase()){
​ ajax.open(“GET”,json.url+"?"+json.data,true);
​ //3.发送请求
​ ajax.send();
​ }else {
​ ajax.open(“POST”,json.url,true);
​ //3.设置请求头 ajax.setRequestHeader(“Content-type”,json.contentType+";charset=utf-8");
​ //4.发送请求
​ ajax.send(json.data);
​ }
​ //4.监听结果
​ ajax.onreadystatechange = function () {
​ if(ajax.readyState == 4){
​ if(ajax.status == 200){
​ json.success(ajax.response);
​ }
​ }
​ }
}

31.ajax请求的时候get 和post方式的区别，什么时候用post。

1、GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的
2、GEt传输数据容量小，不安全，post传输数据内容大，更加安全； 当向服务器发送一些数据的时候选择post比较安全

32.ajax请求时，如何解释json数据。

如果是字符串形式的json：eval("("+ajax.response+")")
如果是本地的json文件：JSON.parse(data)

33.同步和异步的区别?

异步：客户端与服务器请求数据的过程中，可以做其他的事情
同步：客户端与服务器请求数据的过程中，不能做其他的事情

34.常见的http状态码？

不需要知道全部，常见的就可以，比如200 404 503 200状态码：表示请求已成功，请求所希望的响应头或数据体将随此响应返回
201状态码：表示请求成功并且服务器创建了新的资源，且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话，应当返回 ‘202 Accepted’
202状态码：服务器已接受请求，但尚未处理
301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求
304自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。
301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求
304自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。
401状态码：请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403状态码：服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。
404状态码：请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。
500状态码：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。
503状态码：由于临时的服务器维护或者过载，服务器当前无法处理请求。通常，这个是暂时状态，一段时间会恢复

35.js哪些操作会造成内存泄露？

1）意外的全局变量引起的内存泄露
function leak(){ leak=“xxx”;//leak成为一个全局变量，不会被回收 }
2）被遗忘的定时器或者回调
3）闭包引起的内存泄漏

36.$(document).ready() 方法和window.onload 有什么区别？

window.onload与ready的区别
1.window.onload会覆盖之前的
ready的区别，不会覆盖，会叠加
2.window.onload等文档和资源都加载完成以后调用
ready只要文档加载完成以后就会调用

37.怎么解决跨域问题？

通过jsonp解决跨域，即通过script标签的src属性引入一个js文件，通过回调函数将数据返回
KaTeX parse error: Expected 'EOF', got '&' at position 34: …script src=’url&̲callback=showDa….ajax()方法中，只需配置一个dataType:‘jsonp’，就可以发起一个跨域请求

ES6

1.var let const 区别

  • (1). var声明的变量会挂载在window上，而let和const声明的变量不会：

var a = 100;
console.log(a,window.a);    // 100 100

let b = 10;
console.log(b,window.b);    // 10 undefined

const c = 1;
console.log(c,window.c);    // 1 undefined

(2). var声明变量存在变量提升，let和const不存在变量提升

console.log(a); // undefined  ===>  a已声明还没赋值，默认得到undefined值
var a = 100;

console.log(b); // 报错：b is not defined  ===> 找不到b这个变量
let b = 10;

console.log(c); // 报错：c is not defined  ===> 找不到c这个变量
const c = 10;

(3).let和const声明形成块作用域

if(1){
    var a = 100;
    let b = 10;
}

console.log(a); // 100
console.log(b)  // 报错：b is not defined  ===> 找不到b这个变量

if(1){

    var a = 100;
        
    const c = 1;
}
 console.log(a); // 100
 console.log(c)  // 报错：c is not defined  ===> 找不到c这个变量

(4).同一作用域下let和const不能声明同名变量，而var可以

var a = 100;
console.log(a); // 100

var a = 10;
console.log(a); // 10

let a = 100;
let a = 10;

//  控制台报错：Identifier 'a' has already been declared  ===> 标识符a已经被声明了。

  • (5). 暂存死区

var a = 100;

if(1){
    a = 10;
    //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
    // 而这时，还未到声明时候，所以控制台Error:a is not defined
    let a = 1;
}

  • (6).const

1、一旦声明必须赋值,不能使用null占位。
*
* &emsp;&emsp;2、声明后不能再修改
*
* &emsp;&emsp;3、如果声明的是复合类型数据，可以修改其属性
*
* */

const a = 100; 

const list = [];
list[0] = 10;
console.log(list);&emsp;&emsp;// [10]

const obj = {a:100};
obj.name = 'apple';
obj.a = 10000;
console.log(obj);&emsp;&emsp;// {a:10000,name:'apple'}

2. 箭头函数

（1）不需要function关键字来创建函数

  • es5创建函数
var aa = function() {}
  • es6创建函数
var aa = () => {}

(2)可以极大的简写函数

  • es5函数
var fn = function(a) {
  return a + 5
  }
  • 可以利用箭头函数简写为：
    var fn = a => a + 5;
  • 简写规则：
    当函数所传参数只有一个时，可以去掉();        eg: (a) => {}   简写为：a => {}
    当函数体中只返回值，而没有其他操作时，可以去掉{}；eg: (a, b) => {return a+b} 简写为：(a, b) => a+

(3）当要求动态上下文的时候，就不能够使用箭头函数，也就是this的固定化。

    1、在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象；
    2、不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误；
    3、不能够使用arguments对象；
    4、不能使用yield命令；

3. 数组新增常用的4个方法

(1）map --映射

let arr=[66,59,80];
let result=arr.map(item => {
if(item >= 60){
  return "及格"
}else{
  return "不及格"
}
});
//result:["及格", "不及格", "及格"]

(2) reduce --汇总

let arr = [12,69,180,8763];
let result = arr.reduce((tmp, item, index) => {
 console.log(tmp, item, index);
 return tmp + item;
 });
 console.log(result);//求和

（3）filter --过滤

let arr=[
    {title: '电源线', price: 50},
    {title: '电脑', price: 13000},
    {title: '键盘', price: 120},
    {title: '手机', price: 9000}
];
 
let result=arr.filter(json=>json.price>=5000);
 
console.log(result);//[{title: '电脑', price: 13000},{title: '手机', price: 9000}]

（4）forEach --迭代


let arr=[12,5,8,9];
 
arr.forEach((item,index)=>{
   console.log(index+': '+item); //0: 12  1: 5  2: 8  3: 9
});

4. 函数的参数

（1）收集参数

function show(a, b, ...args){
  console.log(args)
}
show(1,2,3,4,5,6) //输出[3,4,5,6]

（2）展开数组

const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1, ...arr2]); //输出[1,2,3,4,5,6]
console.log(...arr1); //输出1，2，3

（3）默认值

const show = (a=666, b=999) => {
  console.log(a); //输出666
  console.log(b); //输出999
}
 
show();

5. 解构赋值

(1)左右两边结构必须一样；

(2)右边必须是个合法的值；

(3)声明和赋值不能分开(必须在一句话里完成)；

let [a,b,c]=[1,2,3,999];
let {e,d,g}={e: 4, d: 5, f: 6, g: 7};
console.log(a,b,c,e,d,g);
//输出1 2 3 4 5 7

6. 字符串

(1)多了两个新方法: startsWith endsWith


//startsWith
 
let str='https//http://mp.blog.csdn.net/postedit/79478118';
 
if(str.startsWith('http://')){
  alert('普通网址');
}else if(str.startsWith('https://')){
  alert('加密网址');
}else if(str.startsWith('git://')){
  alert('git地址');
}else if(str.startsWith('svn://')){
  alert('svn地址');
}else{
  alert('其他');
}


//endsWith
 
let str='12121.png';
 
if(str.endsWith('.txt')){
  alert('文本文件');
}else if(str.endsWith('.jpg')){
  alert('JPG图片');
}else{
  alert('其他');
  }

(2)字符串模板

优点：方便字符串拼接；可以折行


let title='标题';
let content='内容';
let str='<div>\
  <h1>'+title+'</h1>\
  <p>'+content+'</p>\
</div>';
 
let str2=`<div>
  <h1>${title}</h1>
  <p>${content}</p>
</div>`;

7. promise 实现原理? promise的三种状态

promise实际上解决jquery的ajax回调地域(解决层层嵌套),只是异步编程的一种解决方案

new promise(function(resolve,reject) {
   	// 111111111
   	resolve('...')
   } ).then(function(value) {
   	console.log(value)
   }).catch(function(error){
   console.log(error)
})

const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))

三种状态:pending（进行中）、fulfilled（已成功）和rejected（已失败）
promise两个特点:
（1）对象的状态不受外界影响
(2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。

promise 缺点: 无法取消promise,如果不设置回调函数,promise内部抛出错误
第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

8.对es6的了解

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

vue

1.什么是 mvvm？

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

2.mvvm 和 mvc 区别？

mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 。

3.vue 的优点是什么？

  • 低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
  • 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。
  • 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
  • 可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

4.什么是vue生命周期？对vue生命周期的理解？

  • vue生命周期的作用是什么？
    答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
  • 第一次页面加载会触发哪几个钩子？
    答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
  • 生命周期
    答：总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
    • 创建前/后： 在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有。
    • 载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
    • 更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。
    • 销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在
  • 简单描述每个周期具体适合哪些场景？
    答：生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom arguments是一个伪数组，没有遍历接口，不能遍历

5.说出至少4种vue当中的指令和它的用法？

v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

6.vue-loader是什么？使用它的用途有哪些？

解析.vue文件的一个加载器，跟template/js/style转换成js模块。 用途：js可以写es6、style样式可以scss或less、template可以加jade等

7. 组件之间的传值？

  • 父组件与子组件传值

//父组件通过标签上面定义传值
<template>
   <Main :obj="data"></Main>
</template>
<script>
   //引入子组件
   import Main form "./main"

   exprot default{
       name:"parent",
       data(){
           return {
               data:"我要向子组件传递数据"
           }
       },
       //初始化组件
       components:{
           Main
       }
   }
</script>


//子组件通过props方法接受数据
<template>
   <div>{{data}}</div>
</template>
<script>
   exprot default{
       name:"son",
       //接受父组件传值
       props:["data"]
   }
</script>
  • 子组件向父组件传递数据
//子组件通过$emit方法传递参数

<div id="app">
    <!-- 引用父组件 -->
    <son @func="getMsg"></son>
 
    <!-- 组件模板定义 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父组件传值" @click="sendMsg" />
      </div>
    </script>
  </div>
 
  <script>
    // 子组件的定义方式
    Vue.component('son', {
      template: '#son', // 组件模板Id
      methods: {
        sendMsg() { // 按钮的点击事件
          this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
        }
      }
    });
 
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
          alert(val);
        }
      }
    });
  </script>

8.嵌套路由怎么定义？

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 index.html，只有一个路由出口

<div id="app">
    <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

main.js，路由的重定向，就会在页面一加载的时候，就会将 home 组件显示出来，因为重定向指向了 home 组件，redirect 的指向与 path 的必须一致。children 里面是子路由，当然子路由里面还可以继续嵌套子路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//引入两个组件
 
import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
    { path: "/", redirect: "/home" },//重定向,指向了home组件
    {
        path: "/home", component: home,
        children: [
            { path: "/home/game", component: game }
        ]
    }
]
//创建路由实例
const router = new VueRouter({routes})
 
new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    router
})
//home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。

9.路由之间跳转？

  • 声明式（标签跳转）
  • 编程式（ js 跳转） router.push('index')
  • 懒加载（按需加载路由）（常考）
    webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入，改为 const 定义的方式进行引入。
  • 不进行页面按需加载引入方式：
import  home   from '../../common/home.vue'
  • 进行页面按需加载的引入方式：
const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))

10.vuex 是什么？怎么使用？哪种功能场景使用它？

vue 框架中状态管理。在 main.js 引入 store，注入。新建了一个目录 store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

// 新建 store.js
import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store({
    //...code
})
 
//main.js
import store from './store'
...

11.vue-router 有哪几种导航钩子?

三种

  • 全局导航钩子
router.beforeEach(to, from, next),

router.beforeResolve(to, from, next),

router.afterEach(to, from )
  • 组件内钩子
beforeRouteEnter,

beforeRouteUpdate,

beforeRouteLeave
  • 单独路由独享组件
beforeEnter

12.自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。

组件内定义指令：directives

钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)

钩子函数参数： el、binding

13.vue 的双向绑定的原理是什么(常考)

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤： 第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:

  • 在自身实例化时往属性订阅器(dep)里面添加自己
  • 自身必须有一个 update()方法
  • 待属性变动 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。
  • 第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

14.vuex 有哪几种属性

有 5 种，分别是 state、getter、mutation、action、module

15.vuex 的 store 特性是什么

  • vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
  • state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
  • 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

16.vuex 的 getter 特性是什么

  • getter 可以对 state 进行计算操作，它就是 store 的计算属性
  • 虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用
  • 如果一个状态只在一个组件内使用，是可以不用 getters

17. vuex 的 mutation 特性是什么

  • action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
  • action 可以包含任意异步操作
  • 如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

18.不用 vuex 会带来什么问题

  • 可维护性会下降，你要修改数据，你得维护 3 个地方
  • 可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
  • 增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背

19.vuex 原理

vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

20.Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

Vuex 中修改 state 的唯一渠道就是执行 commit('xx', payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。

21.axios 是什么？怎么使用？描述使用它实现登录功能的流程

axios 是请求后台资源的模块。 npm i axios -S

如果发送的是跨域请求，需在配置文件中 config/index.js 进行配置

22.vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里

23.如何让CSS只在当前组件中起作用?

将当前组件的style修改为style scoped

24.v-show和v-if指令的共同点和不同点?

  • v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏
  • v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

写在最后

收集不易如果觉得对您有用就动动手点个赞个关注支持一下吧
收藏总有用武之地,谢谢~

avatar
文章
阅读
粉丝