前端面试题（2022最新）

1.什么是防抖和节流有什么区别

答:

函数节流是：在固定的时间内触发事件，每隔n秒触发一次。
函数防抖是：当你频繁触发后，n秒内只执行一次。

区别:

防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

函数防抖一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。

2.什么是深拷贝？什么是浅拷贝？如何实现深拷贝？

答：

浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,新老对象不共享内存，修改其中一个对象的值，不会影响另一个对象。

形象的来说，假设B复制了A，当修改A时，看B是否跟着变化，如果B跟着变了，那么就是浅拷贝，如果B没变，那么就是深拷贝

区别：

浅拷贝是只对指针进行拷贝，两个指针指向同一个内存块，深拷贝是对指针和指针指向的内容都进行拷贝，拷贝后的指针是指向不同内容的指针。

实现深拷贝：

JSON.stringify() 可以间接实现深拷贝

将需要深拷贝的对象序列化为一个 JSON 字符串，然后根据这个字符串解析出一个结构和值完全一样的新对象，这种方法需要保证对象是安全的，例如属性值不能是 undefined、symbol、函数、日期和正则。

使用 $.extend() 方法实现深拷贝

$.extend() 方法属于 jquery 的方法。这个方法实现深拷贝的基本思路是：如果是基本值或除了对象或数组之外的引用值，直接赋值；如果是对象或数组就需要进行递归，直到递归到基本值或除了对象或数组之外的引用值为止。

3.什么是闭包优缺点

答：

闭包就是能够读取其他函数内部变量的函数。

优点：

1:变量长期驻扎在内存中；

2:避免全局变量的污染；

3:私有成员的存在；

缺点:

常驻内存会增大内存的使用量使用不当会造成内存泄露

4.浅谈 JavaScript 中变量和函数声明的提升?

答：

在 JavaScript 中变量和函数的声明会提升到最顶部执行

函数的提升高于变量的提升。

函数内部如果用 var 声明了相同名称的外部变量，函数将不再向上寻找。

匿名函数不会提升。

不同

5.隐藏元素的方法有哪些？有什么区别？

答：

visibility:hidden,这个属性只是简单隐藏，但是元素暂用的空间任然存在。

opacity:0,一个CSS3属性，设置0为透明，它可以被transition和animate。

position:absolute,元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。

display:none,元素不可见，不占用文档空间。

transform:scale(0),将一个元素设置无限小，这个元素将不可见。

html5 hidden attribute:hidden,属性效果和display:none 一样，记录一个元素的状态。

**height:0;overflow:hidden,**将元素在垂直方向上收缩为0，使元素消失。

**filter:blur(0),**将一个元素的模糊度设置为0

6.什么是递归，递归有哪些优点和缺点

答：

简单讲就是函数自己调用自己。

优点：

递归的优点就是简洁、易于理解。

缺点：

递归通常会出现许多重复计算，导致时间复杂度高。
调用栈可能会溢出，其实每一次函数调用会在内存栈中分配空间，而每个进程的栈的容量是有限的，当调用的层次太多时，就会超出栈的容量，从而导致栈溢出。

7.map和forEach的区别

答：
map() 方法返回一个全新的数组，这个新数组是由原数组变形衍生来的；

而forEach() 返回的是 undefined，所以是对原数组进行了改变操作。

8.null和undefined的区别?

答：

undefined表示不存在这个值。

undefined是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回undefined

例如变量被声明了，但没有赋值时，就等于undefined

null表示一个对象被定义了，值为“空值”

null是一个对象(空对象, 没有任何属性和方法)

例如作为函数的参数，表示该函数的参数不是对象；

在验证null时，一定要使用===，因为==无法分别null和undefined

9.边距塌陷是什么？

答：

两个嵌套关系（父子关系）的块级元素、当父元素有上外边距或者没有上外边距、子元素也有上外边距，两个上外边距汇合成一个上外边距，以值相对较大的上外边距为准

解决方案：

子元素或者父元素的float不为none（设置浮动）

子元素或者父元素的position不为relative或static（设置定位）

父元素的overflow为auto或scroll或hidden

父元素的display的值为table-cell或inline-block

10.什么是构造函数？

答：

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 JS 中，使用构造函数时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写
构造函数要和 new 一起使用才有意义

11.选择器的优先级以及import关键字

答：

css选择器优先级最高到最低顺序为：
1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.子选择器（ul < li）

5.后代选择器（li a）

6.伪类选择（a:hover,li:nth-child）

最后，需要注意的是：

!important的优先级是最高的，但出现冲突时则需比较”四位数“;优先级相同时，则采用就近原则，选择最后出现的样式;继承得来的属性，其优先级最低。

12.css内联与外联?

答：

css内联：就是把CSS放在HTML的head里用style标签包围。< style type=“text/css”>< /style>

css外联：就是把css放在一个单独的文件，然后通过link标签调用。< link rel=“stylesheet” type=“text/css” href=“”>。

13.简述原型和原型链？

原型：

原型分为prototype（原型）和proto (隐式原型)，
而prototype（原型）则是每个函数对象都有的一个属性，proto则是每个对象都会有的一个属性。并且他们的指向都会指向一个对象，而这个对象则是原型对象，除了“null”以外。

原型的产生有三种方式
第一种：字面量方式：var fun={ },相当于就是var fun=new Object();
第二种：构造器方式
第三种：Object.create方式
较为特殊的是第三种，因为它的_proto*(隐式原型)继承于它括号内的参数

原型链：

就是由_proto_属性连起来的一条链条。万物皆对象，因此每个对象都有_proto_属性，通过递归访问_proto_必须最终到头，而最终端则是null.

14.`===`和`==`的区别

===比较类型和值，==只比较值。

15.CSS常用选择器

答：

通配符选择器、标签选择器、类选择器、 id选择器、属性选择器、并集选择器、后代选择器、子代选择器

16.js的数据类型？

基本数据类型(值类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)。
特殊的对象：正则（RegExp）和日期（Date）。
特殊类型：underfined 未定义、Null 空对象、Infinate 无穷、NAN 非数字

17.this的指向？

this的指向
作为普通函数被调用时	this指向全局对象window 严格模式下this指向undefined
作为构造函数被调用时	一般情况下this指向构造函数返回的实例遇到return基本数据类型不受影响，返回一个Object类型的对象，那么返回的是这个对象
箭头函数	箭头函数没有this，它会继承作用域链上一层的this
call和apply	功能改变this的指向可以传递一个或多个参数执行函数区别 call() 指定的this+多个参数 apply()指定的this+一个或多个参数的数组
静态方法（ES6中）	静态方法内部this指向构造函数自身，不是类的实例
作为对象被调用时	this指向该对象

18.for循环与forEach的区别？

1.处理原数组时使用for循环。

2.forEach中不能使用break，不支持return

3.for循环可以实现间隔打印，也就是说forEach不支持异步转同步

本质区别：

前者是遍历，后者实际上是迭代

遍历：指的对数据结构的每一个成员进行有规律的且为一次访问的行为。

迭代：迭代是递归的一种特殊形式，是迭代器提供的一种方法，默认情况下是按照一定顺序逐个访问数据结构成员。

对forEach回调函数的数组参数操作，原数组改变

19.清除浮动的方法?

在有些情况下，我们 没有给父级盒子设置高度 ，而是通过给子盒子设置浮动效果来撑开盒子，达到想要的页面效果，但是设置浮动之后，会影响下面盒子的布局，所以我们需要清除浮动。

一般清除浮动有4中方法：

（1）额外标签法：
在浮动元素末尾添加一个空的块级元素标签，设置 clear:both 属性效果。

（2）给父级元素添加 overflow属性
给父级元素添加overflow:hidden属性，属性值可以设置为hidden、auto、scroll
注意：添加overflow:hidden属性之后，看不到溢出的部分了。

（3）:after伪元素法
可以给父元素添加after伪元素，设置伪元素的样式属性为：

注意： 可以将添加after伪元素看作额外标签法的升级。

（4）双伪元素清除浮动
可以给父元素添加双伪元素，并设置伪元素的相关样式属性：

20.src和href的区别?

相同点： src和href都是用于外部资源的引入，像图片、CSS文件、HTML文件、js文件或其他web页面等。

不同点： src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。

简单来说： src 就是 “我想加载这个资源”，而 href 就是 “我想和这个资源建立关联”

href： (Hypertext Reference) 超文本引用href这个属性指定web资源的位置，从而定义当前元素（如锚点a）或当前文档（如链接）与目标锚点或目标之间的联系。

src： (Source)源这个属性是将资源嵌入到当前文档中元素所在的位置。

21.递归与循环的区别？

1.相同：

（1）都是通过控制一个变量的边界（或者多个），来改变多个变量为了得到所需要的值，而反复而执行的；
（2）都是按照预先设计好的推断实现某一个值求取；（请注意，在这里循环要更注重过程，而递归偏结果一点）

2.不同：

递归通常是逆向思维居多，“递”和“归”不一定容易发现（比较难以理解）；

而循环从开始条件到结束条件，包括中间循环变量，都需要表达出来（比较简洁明了）。

简单的来说就是：

用循环能实现的，递归一般可以实现，但是能用递归实现的，循环不一定能。因为有些题目

① 只注重循环的结束条件和循环过程，而往往这个结束条件不易表达（也就是说用循环并不好写）；

② 只注重循环的次数而不注重循环的开始条件和结束条件（这个循环更加无从下手了）。

22.行内元素与块级元素的区别，以及有哪些块级元素？

区别：

1、块级元素会独占一行默认的宽度占满父级元素，行内元素不会换行；

2、行内元素的width height 无效；

3、块级元素可以设置margin和padding属性，行内元素padding-left、padding-right，margin-left，margin-right（水平方向），有边距效果，padding-top，padding-bottom，margin-top，margin-bototm，（垂直方向）没有边距效果。

本质（浏览器将块级元素的dispaly属性默认为block，行内元素属性默认为inline，因此行内元素与块级元素的切换可以通过修改display属性实现）

1、行内元素：a img span b strong input select section 等

2、块级元素：div p table ul lo li h1-h6 dl dt 等

23.常用的语义化标签有哪些？

< title></title>   //简短、描述性、唯一（提升搜索引擎排名）。
<hn></hn>   //h1~h6分级标题，用于创建页面信息的层级关系。
<header></header>  //页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav></nav> //标记导航，仅对文档中重要的链接群使用。<main></main> //页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article></article>  //包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器。<section></section>  //具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
<footer></footer> //页脚，只有当父级是body时，才是整个页面的页脚。
<aside></aside> //指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
<strong></strong>//表示内容重要性。

24.数组的API方法/数组的API

一、添加

1、push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。

2、unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

二、删除

1、pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

2、shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

三、操作

1、concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

2、slice()方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，原始数组不会被修改。

3、join()使用指定的字符串用来分隔数组字符串

4、splice()方法始终会返回一个数组，该数组包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组），用途最广，有如下3种

删除：需指定2个参数，要删除的第一项位置和要删除的项数
插入：需提供3个参数，起始位置、0（要删除的项数）和要插入的项，如要插入多个项，再传入第四，五…
替换：需指定3个参数，起始位置、要删除的项数和要插入的任意数量的项

四、位置方法

indexOf()方法从数组的开头（位置0）开始向后查找，

lastIndexOf()方法从数组的末尾开始向前查找，

这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引，没找到返回-1

五、重排序方法

sort()方法按升序排列数组项–即最小的值位于最前面，最大的值排在后面。

reverse()降序排列；

六、迭代方法

1、forEach()，对数组的每一项运行给定函数,这个方法没有返回值。本质上与使用for循环迭代数组是一样的

2、map() 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

七、转换方法

1、toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

2、valueOf()返回的还是数组

3、toLocaleString()方法也会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

25.什么是事件委托机制实现原理是什么？有什么优势与缺点？

答案：

事件委托(事件代理)就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

①. 优化性能: 当给10000个li注册点击事件的时候,只需要委托个它的父元素,这样js与dom元素的交互就变为一次,减少了浏览器重绘与重排的次数
②. 减少了内存给10000个li注册点击事件,每一个li都会有一个事件函数保存在内存里,10000个相同的事件函数与一个事件函数的内存,内存节省太多.同时如果10000个li注册点击事件会造成内存溢出.
③. 可以后来新添加的动态元素绑定事件(非常重要)

原理：事件冒泡机制

优势：

①可以大量节省内存占用，减少事件注册，比如ul上代理所有li的click事件就很不错

②可以实现当新增（或删去）子对象时无需再次对其绑定（或解绑）事件。尤其是对于动态部分的内容，比如 AJAX，不需要对新增的元素进行绑定以及对删除的元素解除绑定

缺点：

①事件委托是基于事件冒泡机制来说的，如果不支持事件冒泡则不能进行事件委托

②如果层级过多，冒泡过程中，很可能被某层阻断

26.let和const用法区别

答案：

let和const的相同点：

1.只在声明所在的块级作用域内有效

2.不提升，同时存在暂时性死区，只能在声明的位置后面使用。

3.不可重复声明。

let和const的不同点：

let声明的变量可以改变，值和类型都可以改变；

const声明的常量不可以改变，这意味着，const一旦声明，就必须立即初始化，不能以后再赋值。

27.堆和栈的区别

栈：栈内存的特点:存取速度快，但不灵活，同时由于结构简单，在变量使用完成后就可以将其释放，内存回收容易实现

堆：使用灵活，可以动态增加或删除空间，但是存取比较慢

28.innerHTML和innertext的作用与区别

**作用：**都可以获取或者设置元素的内容

区别：

innerText属性可以输出标签间的纯文本信息，会将标签过滤掉。【从起始位置到终止位置的内容,但它去除Html标签】（安全性高）

innerHTML属性可以输出标签间的全部内容，包括里面的HTML标签和文本信息。【*从对象的起始位置到终止位置的全部内容,包括Html标签*】（会被xss攻击，安全性低）

29.什么是高阶函数？

高阶函数： 就是函数中可以传入另一个函数作为参数的函数

总结： 接收函数作为参数（参数是函数），返回函数作为输出（返回值是函数）

常用高阶函数：

map遍历元素/运算/元素转换类型
reduce计算元素±*/
filter筛选元素返回boolean
sort排序元素返回原数组

30.如何判断数据类型（两种方式）

1.typeof 一个操作符，其右侧跟一个一元表达式并返回这个表达式的数据类型。只能判断简单类型的变量，不能用来判断引用类型

2.instanceof 检测原型。只能用来判断两个对象是否属于实例关系，而不能判断一个对象实例具体属于哪种类型

31.new操作符具体干了什么？

1、首先创建一个空对象。

2、为这个空对象内部添加了__proto__属性，并将该属性链接至构造函数内部的protype原型上。

3、构造函数调用call方法，并将该空对象设置为参数，构造函数的this指向修改成这个空对象

4、返回这个空对象

32.什么是BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

33.伪数组和数组的区别

伪数组是一个对象(Object)，而真实的数组是一个数组(Array)
伪数组拥有length属性，且必须是number类型,其他属性（索引）为字符串
伪数组不具有数组所具有的方法,forEach()等,不过有Object的方法
伪数组长度不可变,真数组长度可以变

34.说严格模式的限制?

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用 with 语句

禁止 this 指向全局对象

35.JS 中的主要有哪几类错误？

答：主要有三类：

加载时错误：加载web页面时出现的错误（如语法错误），成为加载时错误，他会动态生成错误

运行时错误：由于滥用HTML语言中的命令而导致的错误

逻辑错误：这些错误是由于对具有不同操作的函数执行了错误的逻辑而导致的

36.call和apply的区别

答：call（）方法和apply（）方法的作用相同，动态改变某个类的某个方法的运行环境。

他们的区别在于接收参数的方式不同。

在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组。

37.介绍 js 有哪些内置对象？

答：一般我们经常用到的是

如全局变量值NaN, undefined,

全局函数如parseInt(),parseFloat()；

用来实例化对象的构造函数如Date,Object等；

还有提供数学计算的单体内置对象如Math对象

38.什么是继承？JS实现继承的几种方式

答：继承：子类继承父类的一些属性和方法

实现方式：

①原型链继承

②构造函数继承

③组合继承

④原型式继承

⑤寄生继承

⑥寄生组合继承

39.什么是作用域链？

答：作用域链可以理解为一组对象列表，包含父级和自身的变量对象，因此我们便能通过作用域链访问到父级里声明的变量或者函数

40.DOM事件流包括哪几个阶段？

答：包括三个阶段：捕获阶段目标阶段冒泡阶段

41.title 和 alt 有什么区别？

答：title属性适用于所有标签，规定关于元素的额外信息，通常会在鼠标移到元素上是显示一段提示文本，所有浏览器都支持。

alt是img标签的属性，当图片加载出错、无法显示图像时会显示的替代文本。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

42.箭头函数和普通函数的区别？

箭头函数不能作为构造函数，而普通函数可以：箭头函数是匿名函数，不能使用new，否则会抛出一个错误
箭头函数没有原型，而普通函数有
箭头函数不绑定arguments，取而代之用rest参数…解决;普通函数argument绑定了参数列表对象
箭头函数不改变this指向，this为上层函数作用域的this对象，如果没有上层函数作用域，则指向顶部this（在浏览器中顶部this则是window）。普通函数的this指向该函数的调用者。

43.什么是盒子模型？

答：盒子模型分为标准盒子模型和IE盒子模型；

一个盒子我们会分成几个部分：

内容区(content)、内边距(padding)、边框(border)、外边距 (margin)，也就是盒模型的组成由margin，padding，boder，content组成

44.i++ 与 ++i 的主要区别有哪两个？

答：

①i++ 返回原来的值，++i 返回加1后的值。

②i++ 不能作为左值，而++i 可以。

45.什么是内存泄漏？**哪些操作会造成内存泄漏?

答：内存泄露是指不再用的内存没有被及时释放出来，导致该段内存无法被使用就是内存泄漏。

1.意外的全局变量引起的内存泄露

2.闭包引起的内存泄露

3.没有清理的DOM元素引用

4.被遗忘的定时器或者回调

46.什么是柯理化函数，它的优点和缺点

答：所谓的柯里化函数指的是，把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下的参数而且返回结果的新函数

优点：

①参数复用：例如一个函数有两个参数，但是第一个参数会被反复使用，每次都需要输入一个重复的参数，使用柯里化函数之后只需要输入一个参数就可以了

②提前确认：提前定义好一个参数，也就决定了整个函数程序的执行方向，避免每次都执行判断比较等

缺点：只能提前定义一个参数，如果想要提前定义多个参数，这样的语法是不支持

47.创建对象的三种方式?

答：

①通过"字面量"方式创建

② 通过"构造函数"方式创建

③通过object方式创建

48.什么是事件流？事件流的分类有什么？

答：页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流

分类：

①冒泡型的事件流（任何一款浏览器都支持）：从明确事件源到不明确的事件源依次向上响应。

②捕获型的事件流（从IE8及以下版本支持）：从不确定事件源到确定事件源依次向下响应。

49.let的特点是什么？

答：1.不存在变量提升，let声明变量前，该变量不能使用(暂时性死区)

2.let命令所在的代码块内有效，在块级作用域内有效

3.let不允许在相同作用域中重复声明，注意是相同作用域，不同作用域有重复声明不会报错

50.css三大特性

答：

继承性：子标签会继承父标签的某些样式，如文本颜色和字号。
层叠性：样式冲突，遵循的原则是就近原则。
优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，谁的权重高显示谁的样式。

51. instanceof 的原理

Instanceof 是通过原型链去查找，找到某个对象的原型对象，使用原型对象的constructor找到构造函数，看看构造函数与Instanceof后面的是否相同，不相同，继续向上查找，直到尽头，找到为True，没找到为false。

52.什么是SEO

search engine optimization搜索引擎优化，网站经营者的商业行为，主要与品牌收益有关。

利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。SEO是提高你网站排名的一个很有效的方法，这个完善和优化你网站的排名因素的方法就是能影响搜索引擎的排名的算法。因此，SEO是网络营销策略（online marketing Digital strategy）和数字营销策略（Digital Marketing strategy）中很重要的一个环节。SEO使你的网站获取得更多的流量（traffic）同时也可以提高你在搜索引擎的排名。那就意味你可以获取得更多的订单，更多的利润。

53.常见兼容性问题？

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

54.箭头函数有哪些特点？

不需要function关键字来创建函数
省略return关键字
改变this指向

55.如何区分数组和对象？

通过ES6中的Array.isArray来识别
通过instanceof来识别
通过constructor来识别
通过Object.prototype.toString.call方法来识别

56、异步编程的实现方式

回调函数、事件监听、发布/订阅（观察者模式）、Promises对象、生成器函数 Generator、async/await 函数的实现

57、JS 编程中为什么需要异步？

我们都知道 JavaScript是单线程的，如果 JS 都是同步代码执行可能会造成阻塞；而如果使用异步则不会阻塞，我们不需要等待异步代码执行的返回结果，可以继续执行该异步任务之后的代码逻辑。因此在 JS 编程中，会大量使用异步来进行编程。

58、箭头函数为什么不能用 new ?

因为箭头函数没有prototype，也没有自己的this指向，并且不可以使用arguments。

59、简单说一说单线程与异步问题？

1、js是一门单线程多任务的语言。

2、程序执行的时候，会按照三大结构（顺序结构、分支结构、循环结构〉进行程序的执行，如果是同步任务，就立即执行。

3、如果是异步任务，就先将这个异步任务放到异步任务栈中，暂时先不执行

4、等到所有的同步任务执行完毕，就会去执行异步任务栈的异步任务

60.面向对象编程和面向过程编程的优缺点是什么？

面向对象编程：

优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护；

缺点：性能比面向过程低

面向过程编程：

优点：性能比面向对象高；

缺点：类调用时需要实例化，开销比较大，比较消耗资源；没有面向对象易维护、易复用、易扩展

61.let与var的区别？

let不会变量提升，var声明的变量可以变量提升

let不能重复声明，var可以重复声明

62.全局变量与局部变量的区别，函数作用域？

函数作用域是指在函数内声明的所有变量在函数体内始终是可见的，可以在整个函数的范围内使用及复用.

1:作用域不同

局部变量的作用域是当前函数内。

全局变量的作用域是整个script标签内。包括函数内。

2:生命周期不同

局部变量的生命周期，依赖于函数的调用周期，从开始调用到结束调用。

全局变量的生命周期，取决于窗口的创建和销毁。

3:定义的位置不同

局部的定义在函数体内。

全局的定义在函数外。

4:被访问的优先级不同

如果局部变量和全局变量有重名的，那么在函数内局部变量的被访问的优先级更高。可以通过 window.去访问全局的变量,或者是this。

5:所在的内存不同

局部的在栈中。

全局的属于window对象的属性，window对象在堆内存中。所以全局的在堆中。

6:被访问的速度不同

局部变量的存取效率高于全局的。

63.什么是数组？如何创建数组？

什么是数组：

数组是相同类型数据的有序集合
数组描述的是相同类型的若干数据，按照一定的先后次序排列组合。
每一个数据称作一个数组元素，每个数组元素可以通过一个下标来访问他们。
数组的第一个元素是从下标0开始。

数组创建方式：

利用new创建数组
利用数字字面量创建数组

64.JS检测对象类型？

typeof引用类型除function都返回object
instance是某个函数的实例，在原型链有该构造函数返回true
constructor除了undefined和null，其他类型的变量均能使用constructor判断出类型.
**Object.prototype.toString.call()**对于大部分的内置类型，我们都可以通过Object.prototype.toString获取到类型字符串

65.break、continue、return的区别？

break结束当前循环体
continue跳出本次循环，继续执行下一次循环
return不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

66.我们用Promise来解决什么问题？

promise 是用来解决两个问题的：

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
promise 可以支持多并发的请求，获取并发请求中的数据
这个 promise 可以解决异步的问题，本身不能说 promise 是异步的

67.同步与异步的区别阻塞与非阻塞区别？

同步（阻塞的）

异步（非阻塞）

比如：同步，咱两在一起上班，到吃饭时间了，我去喊你一起吃饭，你很忙，我就坐着等你忙完再一起去吃饭

异步，咱两在一起上班，到吃饭时间了，我去喊你一起吃饭，你很忙，我就先自己去吃了，你忙完了再去吃饭

同步（阻塞）异步（非阻塞）这两个关注的是程序在等待调用结果时的状态

68.HTTP协议和 HTTPS 区别？

http 是超文本传输协议，信息是明文传输，https 是具有安全性的 ssl 解密传输协议
http 和 https 连接方式完全不同，端口也不同，http 是 80，https 是 443
http 的连接很简单，是无状态的，
https 协议是由 ssl+http 协议构建的，可进行加密传输，身份认证的网络协议，比 http 协议安全

69.箭头函数与普通函数的区别？

箭头函数是匿名函数，不能作为构造函数，不能使用 new
箭头函数不能绑定 arguments，要用 rest 参数解决
箭头函数没有原型属性
箭头函数的 this 永远指向其上下文的 this

70.jQuery中有哪些选择器？

基本过滤选择器

它由元素ID、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找

选择器	功能描述
#id	根据给定的ID匹配一个元素
element	根据给定的元素名匹配所有元素
.class	根据给定的类匹配元素
.	匹配所有元素
selector1，selectorN	将每一个选择器匹配到元素合并后一起返回

层次选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素。

选择器	功能描述
ancestor descendant	根据祖先元素匹配所有的后代元素
parent>child	根据父元素匹配所有的子元素
prev +next	匹配所有紧接在prev元素后的相邻元素
pre~siblings	匹配pre元素之后的所有兄弟元素

简单过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头；简单过滤选择器是过滤选择器中过滤选择中使用最广泛的一种

选择器	功能描述
first()或 :first	获取第一个元素
last()或 :last	获取最后一个元素
:not(selector)	获取除给定选择器外的所有元素
:even	获取所有索引值为偶数的元素，索引号从0开始
:odd	获取所有索引值为奇数的元素，索引号从0开始
:eq(index)	获取指定索引值的元素，索引号从0开始
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始
:header	获取所有标题类型的元素，如h1、h2… 元素集合
:animated	获取正在执行动画效果的元素

内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以绝对模糊或绝对匹配进行元素定位

选择器	功能描述
:contains(text)	获取包含给定文本的元素
:empty	获取所有不包含子元素或者文本的空元素
:has(selector)	获取含有选择器所匹配的元素
:parent	获取含有子元素或者文本的元素

可见性过滤器

可见性过滤选择器根据元素是否可见的特征获取元素

选择器	功能描述
:hidden	获取所有不可见元素，或者type为hidden的元素
:visble	获取所有的可见元素

属性过滤器

属性过滤器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以"]"号结束

选择器	功能描述
[attribute]	获取包含给定属性的元素
[attribute=value]	获取等于给定的属性是某个特定值的元素
[attribute!=value]	获取不等于给定的属性是某个特定值的元素
[attribute^=value]	获取给定的属性是以某些值开始的元素
[attribute$=value]	获取给定的属性是以某些值结束的元素
[attribute*=value]	获取给定的属性是以包含某些值的元素
[selector1]‘[selector2]’[selectorN]	获取满足多个条件的符合属性的元素

子元素过滤器

在页面开发过程中，尝尝遇到突出指定某行的需求。虽然使用基本过滤选择器“:eq(index)"可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中的某个元素。

选择器	功能描述
:nth-child(eq/even/odd/index)	获取每个父元素下的特定位置元素，索引号从1开始
:first-child	获取每个父元素下的第一子元素
:last-child	获取每个父元素下的最后一个子元素
:only-child	获取每个父元素下的仅有一个子元素

表单对象属性过滤器

表单对象属性过滤选择器通过表单中的某对象属性特征获取该元素，如enabled、disabled、checked、selected属性。

选择器	功能描述
:enabled	获取表单中所有属性为可用的元素
:disabled	获取表单中素有属性为不可用的元素
:checked	获取表单中所有被选中的元素
:selected	获取表单中所有被选中option的元素

表单选择器

在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。

选择器	功能描述
:input	获取所有input、textarea、select
:text	获取所有单行文本框
:password	获取所有密码框
:radio	获取所有单选按钮
:checkbox	获取复选框
:submit	获取所有提交按钮
:image	获取所有图像域
:reset	获取所有重置按钮
:button	获取所有按钮
:file	获取所有文件域

71.mouseover和mouseout , mouseenter和mouseleave区别？

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

72.什么是事件流？

事件流分为两种，捕获事件流和冒泡事件流：

捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点
冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到到根节点

73.js 中数组去重的方法？

利用 for 嵌套 for，然后 splice 去重（ES5 中最常用）
利用 Set 去重（ES6 中最常用）
利用 indexOf 去重
利用 sort()去重
利用对象的属性不相同的特点进行去重
利用 includes 去重

74.window 与 document 的区别：

window: JS 的 window 是一个全局对象，它包含变量、函数、 history 、 location 。
document: document 也位于 window 之下，可以视为 window 的属性。

75.`js`单线程怎么执行异步操作

浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，执行效率会非常的低，甚至导致页面的假死。
所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。这些异步任务完成后通过回调函数让主线程知道。

76.在`JS`代码中访问HTML元素的不同方式

getElementById(‘idname’): 按 id 名称获取元素
getElementsByClass(‘classname’): 获取具有给定类名的所有元素
getElementsByTagName(‘tagname’): 获取具有给定标记名称的所有元素
querySelector(): 此函数采用css样式选择器并返回第一个选定元素

77.export 和 import 是什么

使用export和import实现模块化：
export用于对外输出本模块变量的接口（一个文件可以理解为一个模块）。
import用于在一个模块中加载另一个含有export接口的模块。

78.$(this) 和 this 关键字在 `jQuery` 中有何不同？

$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。
而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

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

window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

80.`iframe`有什么也优点、缺点？

优点：

iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容
的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增
加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

iframe会阻塞主页面的onload事件；
影响页面的并行加载。会产生很多页面，不容易管理。
如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
代码复杂，无法被一些搜索引擎索引到。
设备兼容性差。

81.`json`和`xml`数据的区别

数据体积方面：xml是重量级的，json是轻量级的，传递的速度更快些。
数据传输方面：xml在传输过程中比较占带宽，json占带宽少，易于压缩。
数据交互方面：json与javascript的交互更加方便，更容易解析处理，更好的进行数据交互
数据描述方面：json对数据的描述性比xml较差
xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。

82.什么是暂时性死区

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

83.说一说`cookie sessionStorage localStorage` 区别？

Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。它们的共同点：都是存储在浏览器本地的它们的区别：cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的，cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。cookie的存储空间比较小大概4KB，SessionStorage、 LocalStorage存储空间比较大，大概5M。Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。在前端给后端发送请求的时候会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不会由于它们的以上区别，所以它们的应用场景也不同，Cookie一般用于存储登录验证信息SessionID或者token，LocalStorage常用于存储不易变动的数据，减轻服务器的压力，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。

84.哪些类型能被扩展操作符…扩展

适用类型：

数组【构造新数组会变得更简单、更优雅】、
对象【用于取出参数对象所有可遍历属性然后拷贝到当前对象】
字符串
函数【函数调用中，扩展运算符（…）将一个数组，变为参数序列】。

85.link与@import区别

1.link属于html标签。@import在css中使用表示导入外部样式表；
2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3.import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
4.link方式的样式的权重高于@import的权重；
5.link 支持使用javascript改变样式（document.styleSheets），后者不可

86.响应式布局的优缺点

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

二、响应式布局有哪些优点和缺点？

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

87.流式布局的优缺点

静态布局:

静态布局的概念: 静态布局常见于pc端，不管浏览器尺寸是多少，都按照最开始布局的大小显示，常用单位为px。

静态布局的优缺点: 静态布局的优点是对于初学者来说比较容易上手，需要计算好页面大小以及在布局中不同标签的大小，所以容易造成页面没有对齐，而1像素的大小差异对于肉眼很难观察出来，而网页出现偏差的时候就会出现横向滚动条，影响美观。

响应式布局:

响应式布局的概念: 响应式设计的目标是确保一个页面在不同分辨率的终端上都能显示出很好的页面效果，在搭配媒体查询技术下使用流式布局加弹性布局的方式实现页面效果。

响应式布局的优缺点: 响应式的优点就是可以适应移动端和pc端，针对不同尺寸的终端使用不同的布局，缺点是利用媒体查询的时候只能适应定义的尺寸的终端，而不同尺寸的终端太多，只能选取主流尺寸的终端进行不同的布局.

弹性布局:

弹性布局的概念: 弹性布局一般使用em/rem来作为页面元素的单位，em是相对其父元素来定义大小，而rem是使用根元素（即html元素）来定义大小的，我们一般都选择rem作为单位，这样元素可以根据终端大小自动缩放。

弹性布局的优缺点: 弹性布局的优点是页面元素大小可以随着页面尺寸缩放而改变而页面布局不变，缺点是这种布局只对宽度有效，对高度或者元素之间间隙要求比较高的就无法产生效果。

流式布局:

流式布局的概念: 是页面元素的宽度按照屏幕分辨率进行适配调整，使用%百分比定义宽度，但整体布局不变。代表作：栅栏系统（网格系统）。
流式布局的优缺点优点是页面元素会根据屏幕分辨率大小而改变，缺点是如果屏幕分辨率较大容易使图片产生失真效果（即图片会变得模糊不清）。

总结: 如果页面只用于pc端，最好使用静态布局，如果只做移动端，而且对元素间距要求不高的话，那么最好使用弹性布局。而移动端与pc端兼容的话，最好使用响应式。

88.说一说 v-if 和 v-show区别？

作用: 都是控制元素隐藏和显示的指令

区别： v-show: 控制的元素无论是true还是false，都被渲染出来了，通过display：none控制元素隐藏

v-if: 控制的元素是true，进行渲染，如果是false不渲染，根本在dom树结构中不显示

v-show: 适合使用在切换频繁显示/隐藏的元素上 v-if: 适合使用在切换不频繁，且元素内容很多，渲染一次性能消耗很大的元素上

89.说一说跨域是什么？如何解决跨域问题？

跨域：当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了。
跨域限制的原因：浏览器为了保证网页的安全，出的同源协议策略。

跨域解决方案
cors：目前最常用的一种解决办法，通过设置后端允许跨域实现。

node中间件、nginx反向代理：跨域限制的时候浏览器不能跨域访问服务器，node中间件和nginx反向代理，都是让请求发给代理服务器，静态页面面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。

JSONP：利用的原理是script标签可以跨域请求资源，将回调函数作为参数拼接在url中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript。

postmessage：H5新增API，通过发送和接收API实现跨域通信。

90.基本数据类型和引用数据类型的区别

（1）堆比栈空间大，栈比堆运行速度快。

（2）堆内存是无序存储，可以根据引用直接获取。

（3）基础数据类型比较稳定，而且相对来说占用的内存小。

（4）引用数据类型大小是动态的，而且是无限的。

91.for of 可以遍历哪些对象

for…of…: 它是es6新增的一个遍历方法，但只限于迭代器(iterator), 所以普通的对象用for…of遍历是会报错的。

可迭代的对象：包括Array, Map, Set, String, TypedArray, arguments对象等等

92.什么是 promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的

93.数据双向绑定原理（MVVM）

通过数据劫持结合发布—订阅模式，通过Object.defineProperty()为各个属性定义get、set方法，在数据发生改变时给订阅者发布消息，触发相应的事件回调。

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

94. vue生命周期

从创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程，称为为Vue 实例的生命周期。

**beforeCreate：**创建前。此时，组件实例刚刚创建，还未进行数据观测和事件配置，拿不到任何数据。
**created：**创建完成。vue 实例已经完成了数据观测，属性和方法的计算(比如props、methods、data、computed和watch此时已经拿得到)，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空数组常用于简单的ajax请求，页面的初始化。
**beforeMount：**挂载前。挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM）。编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
**mounted：**挂载完成。也就是模板中的HTML渲染到HTML页面中，此时可以通过DOM API获取到DOM节点，$ref属性可以访问常用于获取VNode信息和操作，ajax请求，mounted只会执行一次。
**beforeUpdate：**在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，不会触发附加地重渲染过程。
**updated：**更新后。在由于数据更改导致地虚拟DOM重新渲染和打补丁之后调用，
**beforeDestroy;**销毁前。在实例销毁之前调用，实例仍然完全可用。（一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件）
**destroyed：**销毁后。在实例销毁之后调用，调用后，vue实列指示的所有东西都会解绑，所有的事件监听器会被移除。

其他：
activated：在keep-alive组件激活时调用
deactivated：在keep-alive组件停用时调用

95.谈一下对于vue指令的理解

vue指令就是为了实现某种特定功能比如按条件渲染、绑定属性等，而封装的一些指令，这样使用者就能够快速实现一些功能。

96.vue的优缺点

vue优点（模块化开发，组件复用，开发效率快）

(1)轻量级的框架+指令：

它通过双向数据绑定把 View 层和 Model 层连接了起来.实际的 DOM 封装和输出。

(2)双向数据绑定：

当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着

同步变化。

(3)组件化开发：

就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起

开发和维护。

(4)单页面路由：

单页是把原本的多个页面以组件的形式集成在一个页面中,页面跳转时由 vue 路由到目

标页面，分别加载不同的组件，而页面不会刷新，路由在更新

(5)虚拟 dom：

在 Vue 的底层实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合 Vue 自带的响应

系统，在状态改变时 ,Vue 能够智能地计算出重新渲染组件的最小代价并应到 DOM

操作上。

(6)渐进式框架：

我们可以只用 vue 中一小部分去开发，而不是说用了 vue 就必须全部使用 vue 的语法。可以让我们慢慢的一点点的接受 vue 开发项目。

也就是用你想用或者能用的功能特性，不想用的部分功能可以先不用，来完成一个开发。

(7)数据和结构的分离：

最小力度更新，vue 每次更新会进行虚拟 dom 和屏幕已有 dom 对比，只更新有变化

的部分，性能更高

(8)插件化：

插件的功能范围没有严格的限制，满足大多插件可以和 vue 配合一起使用。

vue的缺点

（1）首屏加载速度没有静态页面快，

（2）因为 dom 都是 js 生成的，导致 seo 爬虫不友好，页面被爬取的机率特别小。

（3）因为是单页面应用，不利于 seo 优化

97.v-model作用及v-model修饰符

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

修饰符：

.lazy 添加了修饰符后，双向绑定的数据将不同步了

.number 自动将用户的输入值转化为数值类型

.trim 自动过滤用户输入的首位空格

98.什么阶段（生命周期）才能访问操作dom？为什么

在钩子函数mounted()中才能开始访问操作dom，因为在mounted()生命周期前，dom刚好渲染好，但还未挂载到页面，如果在这之前进行dom操作，将找不到dom节点

99.组件中的data为什么是个函数？

因为组件是用来复用的，因为js里对象是引用关系，如果data是对象形式，那么data的作用域是没有隔离的，在多个子组件时，会被外部因素影响，如果data是一个函数，那么每个实例可以独自拥有一份返回对象的拷贝，组件实例之间的data属性值不会互相影响

100. $ro u t e 和$ router的区别

$route是路由信息对象，包括path、params、hash、query、fullPath、 matched, name等路由信息参数。 $router 是路由实例对象，包括了路由的跳转方法，钩子函数等。

101．vue常用指令？

v-model 多用于表单元素实现双向数据绑定

v-bind：简写为：，动态绑定一些元素的属性，类型可以是：字符串、对象或数组。

v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面

v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json

v-show 显示内容

v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来

v-if指令：取值为true/false，控制元素是否需要被渲染

v-else-if 必须和v-if连用

v-text 解析文本

v-html 解析html标签

v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’

v-once 进入页面时只渲染一次不在进行渲染

v-cloak 防止闪烁

v-pre 把标签内部的元素原位输出

102．接口请求一般放在哪个生命周期中？

一般放在mounted中，在html渲染后调用，但需要注意的是服务端渲染时不支持mounted，需要放在created中

103.Vue 框架怎么实现对象和数组的监听？

通过遍历数组和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。

104.虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】的差异比较

105.在Vue中，如何实现父组件向子组件传值？

父组件通过 props 向下传递数据给子组件。组件中的数据共有三种形式：data、props、computed

106.子组件向父组件传递事件？

答：通过事件形式
子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据。

107.在Vue中，实现父组件访问子组件的方法？

答：1.通过ref直接调用子组件的方法；

2.通过组件的 $e mi t 、$ on方法；

108.vue的原理

Vue的模式是m-v-vm模式，通过modelView作为中间层（即vm的实例），进行双向数据的绑定与变化。

109.vue中created与mounted区别

在created阶段，实例已经被初始化，但是还没有挂载至el上，所以无法获取到对应的节点。
在mounted阶段，vue的template成功挂载在el中，一个完整的页面已经能够显示在浏览器中，所以在这个阶段，可以调用节点了；

110.第一次页面加载会触发哪几个钩子函数？

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 钩子函数。

111.指令v-el的作用是什么？

提供一个在页面上以存在的DOM元素作为Vue实例的挂载目标，可以是CSS选择器，也可以是一个HTMLElement实例

112.vue-router是什么？有哪些组件？

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得简单

和和

113、vue事件修饰符有哪些？

.stop 阻止事件继续传播

.prevent 阻止标签默认行为

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

114、如何解决vuex页面刷新数据丢失问题？

原因：因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。
解决方法：将vuex中的数据直接保存到浏览器缓存中。

115、页面渲染为什么使用 key？

当有相同标签名的元素切换时，为避免渲染问题，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同

116、vuex是什么？什么时候用Vuex

vuex是专门为vue.js应用程序设计的状态管理工具，简单来说就是项目需要共享的一些数据的管理容器，这里的状态就是数据，

当项目遇到多个组件依赖于同一状态时，来自不同组件的行为需要变更同一状态的时候。

如果应用够简单，最好不要使用 Vuex，一个简单的 store 模式即可；
需要构建一个中大型单页应用时，使用Vuex能更好地在组件外部管理状态。

117.说一说scoped样式隔离

Vue在创建组件的时候，会给组件生成唯一的id值，当style标签给scoped属性时，会给组件的html节点都加上这个id值标识，如data-v4d5aa038，然后样式表会根据这id值标识去匹配样式，从而实现样式隔离

118.怎样理解Vue的单向数据流？

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原数据进行修改

119.Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？

JQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据就行了
在操作DOM频繁的场景里，JQuery的操作DOM行为是频繁的，而Vue利用虚拟DOM的技术，大大提高了更新DOM时的性能
Vue中不提倡直接操作DOM，开发者只需要把大部分精力放在数据层面上
Vue集成的一些库，大大提高开发效率，比如Vuex，Router等

120.vue 中 keep-alive 组件的作用

< keep-alive >是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

121.vuex的有哪些属性

1）、State

state是存储的基本数据，就像data属性一样。

2）、Getters

getters是store的计算属性，对state加工，是派生出来的数据。就像computed计算属性一样。

3）、Mutations

mutations提交更改数据，使用store.commit方法更改state存储的状态。同步函数

4）、Actions

actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5）、Module

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

122.vue路由的模式以及区别

vue-router有两种模式，hash模式和history模式

直观区别：hash模式url带#号，history模式不带#号。

hash值变化不会导致游览器向服务器发出请求，而且hash改变会触发hashchange事件

history模式改变url的方式会导致游览器向服务器发送请求

123.v-for 与 v-if 的优先级?

v-for 和 v-if 同时使用，有一个先后运行的优先级，v-for 比 v-if 优先级更高，这就说明在v-for 每次的循环赋值中每一次调用 v-if 的判断，所以不推荐 v-if 和 v-for 在同一个标签中同时使用。

124.用于构建 vue 的 vue-cli 工程都到了哪些技术，其作用分别是什么?

vue.js: vue-cli 工程的核心，主要特点是双向数据绑定和组件系统 vue-router: vue 官方推荐使用的路由框架

vuex: 专为 vue.js 应用项目开发的状态管理器，主要用于维护 vue 组件间共用的一些变量和方法 axios（fetch、ajax）:用于发起GET、 POST 等 http 请求，基于 Promise 设计

webpack: 模块加载和 vue-cli 工程打包器 eslint 代码规范工具

125.mutation和action有什么区别？

action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作
action改变状态，最后是通过提交mutation。
Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

126.修改ElementUI 样式的几种方式?

1.新建全局样式表

2.在当前-vue-单页面中添加一个新的style标签

3.使用/deep/深度修改标签样式

4.通过内联样式或者绑定类样式覆盖默认样式

127.Vue data中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？

不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环tick中，Vue 刷新队列并执行实际（已去重的）工作

128 .$nextTick是什么？

Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。

129.v-on常用修饰符

.stop 该修饰符将阻止事件向上冒泡。

.prevent该修饰符会阻止当前事件的默认行为

.self该指令只当事件从事件绑定的元素本身触发时才触发回调

.once该修饰符表示绑定的事件只会被触发一次

130 .vue路由的模式以及区别