前端面试题目总结（HTML、CSS、JS、VUE、HTTP）

jasmine_qiqi

已于 2022-05-07 16:58:28 修改

阅读量2.1k

点赞数 12

分类专栏：前端八股文文章标签：前端 html css javascript vue

于 2022-04-30 23:18:04 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/124520723

版权

前端八股文专栏收录该内容

7 篇文章 9 订阅

订阅专栏

1、HMTL

1、行内元素、块级元素、空元素

(1)行内元素：<span>、<a>、<img>、<input>、<strong>
(2)块级元素：<div>、<h1-6>、<p>、<table>、<form>
(3)空元素：<br>、<hr>、<meta>
如何设计元素之间的转换?
(1)display:block转为块元素，独占一行，行宽高、外边距、内边距都可以设置
(2)display:inline-block：转为行内块元素，和相邻的行内元素在一行上，
但是中间会有空白的间隙，行宽高、外边距、内边距都可以设置
(3)display:inline：转为行内元素，不占独立成行，仅靠字体大小或图像大小支撑，
宽高不能设置，水平方向可以设置内外边距，垂直方向不可以

2、link和@import的区别

(1)引用区别：link属于html标签，@import在css中使用表示导入外部样式表
(2)最大的区别就是：因为link是一个标签，所以页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
(3)兼容问题：link是HTML标签，无兼容问题。而import只在IE5以上才能识别

3、titile与h1的区别、b与strong的区别、i与em的区别

(1)title是网页标题、h1是内容。在做网站的SEO（Search Engine Optimization）搜索引擎优化中，titile优先于h1。
(2)语义化，b只是一个加粗的标签没有特殊含义，strong也是一个加粗标签但有特殊含义（强调在阅读器、SEO中显示出来）。
(3)语义化，i和em都是倾斜，i没有特殊含义，而em有特殊含义，i一般来做图标。

4、img标签的titile和alt的区别

(1)titile：鼠标移入显示的问题。alt：图片没有加载显示文字
(2)在SEO中alt属性是可以解决蜘蛛抓取不到图片的问题

5、png、jpg、png、gif什么时候用

(1)jpg、jpeg：适合大图片（缩小会失帧）
(2)png：适合小图标（缩小不容易失帧）
(3)gif：动图

6、HTML5新特性

HTML5就是超文本语言的第五次重大修改
第一个是语义化标签，header、nav、section、article、aside、footer，这样编程会更规范清晰，而且引擎搜索优化会更加方便
第二个是表单功能增强，类型email、number、range、search、date等、属性required、multiple等
第三个是音视频标签，viedo是音频、audio是视频
第四个是Canvas画布和SVG矢量图
第五个是拖放，Drag和Drop，任何元素都可以拖放
第六个是本地存储，localStroage和sessionStorage

2、CSS

1、两种盒子模型

一种是标准盒子模型（content-box），一种是IE盒子模型（border-box）
主要区别是宽度和高度，
标准盒子模型的宽度就是内容（content）的宽度。
IE盒子模型的宽度就是（content+padding+border）的宽度。
如果想转换为IE盒子模型，可以使用：box-sizing:border-box；

2、实现水平垂直居中的方式

1、flex布局：justify-content水平居中，align-items垂直居中
2、grid布局：justify-content水平居中，align-items垂直居中
3、容器relative+内容absolute+transform

3、什么是BFC

BFC是Block-formattng-context的简写，就是块级格式化上下文。
简单来说，BFC是一个完全独立的空间，就是让空间里的子元素不会影响到外面的布局。
如何触发BFC？
1、float:left/right/top/bottom
2、overflow:hidden
3、display:inline-block/flex
4、position:absolute/fixed
BFC解决的问题：
1、使用float脱离文档流，高度塌陷
2、解决margain边框重叠
3、阻止元素被浮动元素覆盖

4、position定位

(1)static(默认)，没有定位，元素不需要定位的时候，就默认即可。
(2)fixed(固定)，相对于浏览器窗口,适用于顶部导航栏，或者返回顶部
(3)absolute(绝对)，相对于第一个relative父元素，适合解决abosulte脱离文档流覆盖问题
(4)relative(相对)，相对于自身定位
aboslute与relative的区别：
(1)realtive不脱离文档流，absolute脱离文档流。所以realtive适合做absolute的容器
(2)relative只有两个值（left、right、top、bottom）如果同时存在，left会取代right，top取代bottom。而absolute可以取四个值

5、display:none与visibility:hidden的区别

(1)占位区别：display:none不占位置，visibility:hidden占位置
原理，display:none它第一次不绘制，第二次才绘制，就没有位置了，所以不占位。
visibility:hidden第一次就绘制，所以占位。
(2)触发重绘回流的区别：display:none触发回流和重绘，visibility:hidden触发重绘
重绘叫重新绘制，修改盒子font-size、background属性就会触发重新绘制
回流，修改盒子尺寸大小、位置就会触发回流
只要触发回流必定触发重绘，触发重绘不一定触发回流
为什么只要触发回流必定触发重绘，触发重绘不一定触发回流？
那么我们要知道浏览器渲染的过程：
URL-》浏览器-》HMTL解析器-》JS解析器+DOM+CSS解析器[CSSDOM]
-》render(把DOM和CSSDOM结合到一起)
-》layout（具体计算确定DOM位置）、回流
-》渲染绘制(通过显卡显示，放到页面上)、重绘

6、css选择器有哪些，哪些属性可以继承

常见的选择器有：
id选择器(#id)、类选择器(.className)、标签选择器(div)、
子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、伪类选择器(a:hover)
可以继承的样式有：字体、颜色
不可以继承的样式有：宽高、内外边距
优先级为！important>内联样式（1000）>id选择器（100）>类选择器(10)
标签选择器(1)>通配符选择器(0)
权重相加判断优先级。同权重的情况下，优先级就近原则，样式定义最后的为准。

7、用CSS画一个三角形

width和height为0
border: 250px solid transparent;（透明）
border-bottom-color: saddlebrown;（颜色显示）

8、display有哪些值及作用

(1)inline（默认值）：转为内联元素，不独立成行
(2)none：隐藏对象，是不占位的。跟visibility:hidden不一样，visibility:hidden是占位的。
(3)block: 转为块元素，独立成行
(4)inline-block：转为内联块元素，不独立成行，但跟同级元素会有空格分开
(5)flex：转为弹性盒子，最常用于页面布局
(6)grid：二维布局，flex是一维布局，都有兼容问题，需要IE10及以上

9、清除浮动的方式

清除浮动常见的方式有3种
第一种是在浮动元素后面，添加空白标签，设置clear:both，清除浮动，添加了无意义的标签（不推荐）
第二种是父级元素触发BFC，让内部元素不影响外部，清除浮动。（推荐）
触发BFC的方法有4种：
1、最常见的就是overflow:hidden，只要不是visible即可
2、float：left/right/top/bottom，只要不是none即可
3、display:inline-block/flex
4、position:absolute/fixed
第三种是使用伪元素清除浮动：在父级元素上添加::before/after，然后content值为空
display为block块级元素，clear:both清除浮动（推荐）

10、opacity和rgba的区别

opacity和rgba的相同点都是设置背景透明度。background: rgb(0,0,0);opacity: 0.5;
不同点就在于：opacity属性的值，可以被其子元素继承，而RGBA设置的元素的后代不会继承的。

11、flex布局

flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
可以随着页面大小的改变自适应页面布局。
flex的几种常见属性：
(1) flex-direction：指定flex主轴的方向，默认为row水平方向。column为垂直方向。
(2) justify-content：主轴方向上的对齐方式，默认为flex-start，起始位置对齐
flex-end：结束位置对齐。center：行中间对齐。space-between：两端对齐，中间间距相等
(3) align-items：侧轴上的对齐方式，就是垂直方向。默认为stretch，高度占满整个容器。center：垂直居中。
(4) flex-wrap：是否换行，默认nowrap，不换行，可能会溢出。wrap：换行，溢出的Flex子项会自动放到下一行。
(5) align-content：多行的对齐方式。默认stretch占满
(6) align-self：单独指定某flex子项的对齐方式
(7)flex：复合属性，flex:flex-grow(扩展比率),flex-shrink(比率),flex-basis(伸缩基准值)
常用flex:1，就元素平均布局

12、CSS单位元素及使用

px：像素
em：相对于当前元素的父元素。
rem：相对于当前元素的根元素。
vw：相对于视窗的宽度，视窗宽度是100vw
vh：相对于视窗的高度，视窗高度是100vh
vm：相对于视窗的宽度或高度，取决于哪个更小。

13、CSS3新特性

1、过渡属性，transition
2、动画属性，animation
3、圆角属性，border-radius
4、引入了rgba
5、盒子阴影，box-shadow: 10px 10px 5px #888888;
6、盒子新特性，box-sizing:border-box;
7、transform，位移
8、flex弹性布局，grid栅格布局

14、伪类与伪元素的区别

伪类：用于当已有元素处于的某个状态时，为其添加对应的样式。LVHA
伪元素：用于创建一些不在文档树中的元素，并为其添加样式。::before/after
区别：
1、伪类它存在于DOM文档中，伪元素本身不存在在DOM文档中
2、伪类使用用:，伪元素使用::，便于区分
3、伪类可以同时使用多个，伪元素只能同时使用一个

3、JS

1、JS数据的类型及区别

JS的数据类型可以分为2种，一种是基本数据类型有5种，分别是：
String（字符串）、Number（数字）、Boolean（布尔值）、Null（空值）、Undefined（未定义）
Symbol（唯一值）、bigInt（大的整数值）
一种是引用类型，分别是Obejct（对象）、Data（日期）、Function（函数）、Array（数组）
基本数据类型与引用数据类型的区别有：
1、存放的位置不同：基本数据类型是放在栈中，而引用数据类型放在堆中。
2、赋值比较：基本数据类型的值改变时，只影响一个变量。
但引用数据类型指向的对象发生改变时，所指向这个对象的变量就会跟着改变，可以改变多个变量。
3、类型比较：基本数据类型比较的是一个值，而引用数据类型比较的引用是否指向同一个对象。
4、函数参数影响的比较，基本类型作为参数，函数内部不会影响到实参的值。
而引用数据类型作为参数时，函数内部的操作会影响实参的值，因为它们指向的是同一个对象。

2、null和undefined的区别

null是表示一个"无"的对象，指向空的对象，这个对象是不存在的，转为数值时为0。
null的使用场景：经常用作函数的参数，或作为原型链的终点
undefined是表示一个"无"的原始值，变量被声明了但还没有赋值，就为undefined，转为数值时为NaN
相同点：都是表示值的空缺，所以两者等于是相等的
不同点：null的类型是Object对象，undefined的类型就是Undefiend，所以两者全等不相等

3、检测数据类型方式

检测数据类型有四种方式：
第一种是typeof，返回结果是一个字符串，证明数据是哪种类型。typeof的局限有两个：
(1)null检测出来不是null而是object,因为null虽然是单独的一个数据类型，
但是它原本意思就是空对象指针，所以浏览器使用typeof检测的时候会把它按照对象来检测。
(2)使用typeof无法具体细化数组、函数、日期，全都返回Object对象类型
第二种是instanceof ，检测某个实例是否属于这个类,属于的话返回true,不属于返回false
第三种是constructor，获取当前实例的构造器
第四种是Object.prototype.toString.call，获取当前实例的所属类信息（最为准确）

4、==和=== 的区别

==判断数值是否相等，如果类型不一致，则会进行强制类型转化后再进行比较。
===同时判断类型和数值是否全等，不会强制转换，如果有一个不等，直接返回 false。

5、作用域与作用域链

一个变量的使用范围就叫做作用域，作用域可以分为全局作用域和局部作用域。
一个HTML页面就是一个全局作用域，打开页面的时候, 作用域就生成了, 直到关闭页面为止。
而局部作用域就是私有作用域，每一个函数就是一个私有的作用域。
而作用域链就是调用某个函数或属性时，先在当前作用域寻找，如果找不到的情况下去父级寻找，
如果父级找不到继续向上级寻找，直到找到全局作用域为止，这个链式查找的过程，就是作用域链。

6、判断数组的方法

(1)Array.isArray()
书写：Array.isArray(arr1)
(2)constructor构造器
书写：arr1.constructor.toString().indexof(‘Array’)
(3)Object.propotype.toString.call()原型
书写：Object.propotype.toString.call(arr1)

7、宏任务与微任务

JS异步任务可以分为宏任务和微任务
(1)宏任务有Ajax请求、setTimeOut、setInterval计时器等
(2)微任务就有Promise.then、Promise.catch和Promise.finally以及process.nextTick
宏任务和微任务的执行顺序:
每一个宏任务执行完之后，都会检查是否存在待执行的微任务，
如果有，则执行完所有的微任务之后，再执行下一个宏任务。宏任务和微任务交替执行。

8、new对象的操作过程

(1)创建一个新对象
(2)构造函数的this指向这个新对象
(3)执行构造函数的所有代码
(4)返回新对象

9、闭包

函数里面嵌套一个函数，里面的函数就叫做闭包。
闭包的优点可以读取外层函数内部的变量，实现变量数据共享。
缺点就是由于闭包把函数中的变量保存到了内存中，消耗内存，
以及数据泄露，存在安全隐患，所以不能滥用闭包，否则影响性能。最好的解决方法就是，
在退出函数之前，将不使用的局部变量全部删除，这样减少内存消耗，优化性能。

10、原型和原型链

原型本质就是对象，包括显式原型对象和隐式原型对象。
显示原型对象：只有函数对象才有显式原型对象(prototype)，默认指向空对象。
隐式原型对象：只要是对象都会有隐式原型对象(proto)，并且它的值与该对象对应的构造函数的显示原型对象相等。
原型链实际就是隐式原型链。当访问一个对象的属性时，先在自身属性中查找，找到则返回。
如果没有找到，就会沿着__proto__（隐式原型对象）这条链查找，在自身对应的构造函数prototype（显式原型对象）上查找，
找到则返回，如果最终没找到就返回undefined。原型链的终点是Object的__proto__，也即返回null。这种链式查找的过程，就叫做原型链。

11、为什么0.1+0.2!=0.3，如何相等

因为在 0.1+0.2 的计算过程中发生了精度丢失。在JS内部所有的计算都是以二进制方式计算的，
在 0.1 和 0.2 转成双精度二进制浮点数时，由于二进制浮点数的小数位只能存储52位，
导致小数点后第53位的数要进行舍弃操作，从而造成精度丢失。最终导致 0.1+0.2 不等于0.3 。
如何相等呢？可以将其转换为整数后再进行运算，运算后再转换为对应的小数
var result = (a * 100 + b * 100) / 100

12、回调函数

当一个函数被当作另一个函数的参数的时候，这个函数就叫做回调函数。
简单来说，就是说一个函数你定义了，可是你没有马上去调用它，
而是交给了另一个函数去调用，这就叫做回调函数。
它的缺点：传统的回调函数去解决异步操作，无法避免地大量使用回调函数嵌套，形成回调地狱。
为了避免回调地狱问题，ES6新添加了Promise，目的就是为了解决异步编程问题。

13、Promise

Promise是一个对象，promise对象是ES6对于异步编程提供的一种解决方案。
Promise有两个特点：
(1)对象的状态不受外界影响
Promise对象有3种状态，分别是pending（进行中）、fulfilled（已成功）、rejected（已失败）
(2)一旦状态改变了就不会再变，也就是说任何时候Promise都只有一种状态。
Promise对象的状态改变只有2种可能：
(1)从pending变成resolve，表示成功
(2)从pending变成rejected，表示失败
Promise的基本流程：
(1)Promise是构造函数，需要new一个Promise对象，参数是excution执行函数，执行器函数是同步的
(2)exctuor函数里面执行
Promise的好处就是：
比传统的回调函数执行异步操作更加合理和规范，
而且支持链式调用，有效解决了传统回调函数嵌套造成的回调地狱问题。

14、递归

递归，就是函数在运行的过程中调用自己，就叫做递归。
递归必须具备两个条件，一个是调用自己，另一个是有终止条件。
我对递归的理解是先往下一层层传递，当碰到终止条件的时候会返回出界结果。
最常用的运用场景就是阶乘，一直递归下去，然后把数相乘，得到阶乘值。

15、变量提升

JS的工作运行方式首先是先解析代码，获取所有被声明的变量，然后在一行一行的执行。
所有的变量的声明语句都会被提升到作用域的顶部，这就叫做变量的提升。
函数的声明也是一样的，都会提升到它所在的作用域最开始执行。
这样的好处是
(1)提高了性能，如果没有这一步的话，
那么每次执行代码前都必须重新解析一遍该变量或者函数，而这是没有必要的，
因为变量或者函数的代码并不会改变，解析一遍就可以了。
(2)容错性更好，先使用后定义也不会影响正常使用，不过最好发先声明再使用规范点好。
不过ES6中提出的let和const定义变量，它们没有变量提升机制，所以要先声明再使用，否则会报错。

16、ES6新特性

ES6就是JS的版本，是一个跨越性很大的一个版本，里面添加了特多新的特性。
(1)添加了let定义变量，不允许在声明变量之前使用，不允许重复声明，具有块级作用域，让变量更加规范。
(2)添加了const定义常量，常量定义了就不能再改变，适用于不变的常量。
(3)添加了模板字符串（反引号），可以换行也可以嵌套变量，不用再拼接字符串。
(4)添加了Promisec对象，用来解决异步编程问题
(5)变量的结构赋值（数组、对象、字符串）
(6)数组的扩展（set和map）
(7)函数的扩展，可以使用箭头函数(=>)

17、DOM

DOM是Document-Object-Model的简写，就是文档对象模型，
整个文档是一个文档节点，就像是树的根一样（叫做根节点）。
每个HTML元素都是元素节点。HTML元素内的文本就是文本节点。
DOM通过document对象，处理网页内容的方法和接口。为开发者提供大量的接口（api），
来获取节点，操作DOM树，进行创建、修改、删除HTML元素节点。
DOM常用的方法：
1、获取节点，通过document.querySelect()通过选择器获取元素节点
2、创建节点，通过document.createElement(‘h1’)，创建元素节点
3、添加节点：elment.appendChild(Node)
4、删除节点：elment.removeChild(Node)

18、BOM

JS由3个部分组成，ECMAScript+DOM+BOM。
ECMAScript简称ES5/6，描述JS的语法和基本对象
DOM是Document-Object-Model的简写，就是文档对象模型，处理网页内容的方法和接口。
BOM是Browser-Object-Model的简写，就是浏览器对象模型，提供浏览器交互的方法和接口。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
例如计时器和location对象，location.href获取或者设置整个URL

19、cookie和session的区别

什么是cookie?
众所周知，http协议是一种无状态的协议，它不保存客户端的历史请求记录，所以客户端和服务端互相不认识。
所以设置了Cookies，是一种记录客户状态的机制，它存储在用户电脑上，用来保存一些用户信息
为的就是让服务端认识到客户端，为客户定制内容。
比如Cookie中存储了用户所在地理位置，以后每次进入地图就可以默认定位到该地点。
cookie的执行原理：就是当客户端访问服务器的时候（服务器运用cookie），
服务器会生成一份cookie传输给客户端，客户端会自动把cookie保存起来，
以后客户端每次访问服务器，都会自动的携带着这份cookie。
cookie的好处就是：保存到客户端，简单易懂好用。
缺点就是：保存的数据量有限的，本身最大4kb，而且在保存到客户端，容易被篡改(删除、禁用)。
什么是session?
Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，
而Session保存在服务器上。客户端浏览器访问服务器的时候，
服务器把客户端信息以某种形式记录在服务器上。这就是Session。
客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。
session是一种特殊的cookie。cookie是保存在客户端的，而session是保存在服务端。
因为cookie放在客户端中不安全，而且存储数据有限，所以就设置了session。
session原理：
当客户端第一次请求服务器的时候，服务器生成一份session保存在服务端，
将该数据(session)的id以cookie的形式传递给客户端；
以后的每次请求，浏览器都会自动的携带cookie来访问服务器(session数据id)。
cookie和session的共同点：都是用来跟踪浏览器用户身份的会话方式。
不同点在于：
(1)存储位置：cookie数据存放在客户的浏览器上，session数据放在服务器上。
(2)安全性：cookie数据容易修改不安全，session比较安全（重要的信息放在session中）
(3)数据大小：cookie只有4KB，存储量不多。session比较大。
(4)服务器性能：session会在一定时间内保存在服务器上。
当访问增多，会比较占用你服务器的性能，考虑性能方面，应当使用cookie。

20、cookie，sessionStorage和localStrorage的区别

相同点：都是临时保存到客户端中，用来保存用户信息数据的。
不同点在于：
(1)存储的时间有效期不同
1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效
2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
3、localStorage的有效期，在不进行手动删除的情况下是一直有效的
(2)存储的大小不同
1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息
2、localStorage和sessionStorage的存储容量是5Mb
(3)与服务端的通信
1、cookie会参与到与服务端的通信中，一般会携带在http请求的头部中。
2、localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

21、数组去重的方法

(1)indexOf()：输出结果为该元素第一次出现的位置，-1为没有出现，没有出现就push添加到新数组
(2)对象属性：创建一个新的对象,用来记录元素的出现次数，没有出来就push添加到新数
(3)ES6中的set方法：set的一个最大的特点就是数据不重复。书写：return […new Set(arr1)];
(4)Array.from与set组合：Array.from方法可以将Set结构转换为数组。书写：return Array.from(new Set(arr1));

22、实现继承的几种方式

(1)原型链继承，通过原型prototype将一个引用类型继承另一个引用类型的属性和方法，缺点，引用类型数据共享
(2)构造函数继承，在子构造函数中利用call()把父类的 this 指向子类，实现继承，
(3)组合继承，将原型链和借用构造函数的技术组合在一块，缺点，执行两次父类构造函数
(4)寄生组合继承，通过借用函数来继承属性，通过Object.create(People.prototype)实现继承。
(5)ES6的class继承，子类通过extends实现继承，super 指向父类的原型对象

23、防抖与节流

1、防抖就是将多次触发转为一次触发，去除多余的操作，优化性能，可以用setTimeOut计时器来实现。在输入框中输入数据判断之前有没有数据，如果有就删除clearTimeOut()之前的数据，保留最新的，1秒后没有数据传过来就触发一次。
2、节流就是在一定时间内只能触发一次。也可以用setTimeOut计时器来实现。当数据输入，1秒后就触发一次，触发完就把timerOut判断有无触发的值改为false，等待下一次数据输入。

24、深拷贝与浅拷贝

浅拷贝：就是复制的是引用地址，如果修改复制后的对象，原对象也会跟着改变
深拷贝：就是复制的是对象的值，新建一个引用地址，复制后的对象修改不影响原对象。
浅拷贝的方法：
(1)newObejct=oldObject
(2)Object.assign(newObejct, OldObject);
(3)扩展运算符newObejct={…oldObject}
深拷贝的方法：
(1)用for in和递归：for in就是把值循环给新的对象，如果对象值里面有对象的话，
就用递归，把对象里面的值赋值完之后再遍历赋值。
(2)JSON：用JSON.stringift转为JSON字符串，再用JSON.parse转为对象。

25、事件循环机制

首先我们要知道JS是单线程的，因为JS的主要作用是与用户互动以及操作DOM节点，
这就决定了JS只能是单线程的，不可以进行多线程，比如说在一个线程中添加DOM节点内容，
在另一个线程中删除这个节点，这是不可以的，所以JS运行操作是单线程的。
单线程就会导致有很多任务需要排队一个个去执行，如果某个任务执行时间太长，就会出现阻塞。
为了解决这个问题，JS引入了事件循环机制，这个机制也叫做Event Loop（事件循环）
事件循环有两个任务，一个是宏任务，一个是微任务，都是异步请求
关键步骤如下：
1、执行一个宏任务
2、执行过程串如果遇到微任务，就将它添加到微任务的队列中
3、宏任务执行完成之后，立即执行当前所有的微任务
4、当宏任务执行完毕之后，开始检查渲染，渲染完毕之后，JS线程继续接管

26、事件捕获和事件冒泡

首先我们要知道什么是事件流？
事件流就是从页面中接收事件的顺序（Window->Document->Html->Div），就叫事件流。
它有三个阶段：捕获阶段、目标阶段、冒泡阶段
捕获阶段：就是事件响应从最外层的Window开始，逐级向内层前进，直到找到具体的事件目标元素。
目标阶段：就是触发事件的最底层的元素。
冒泡阶段：与捕获阶段正好相反，事件的响应从最底层开始一层一层往外传递到最外层的Window。

27、箭头函数和普通函数的区别

什么是箭头函数？
ES6中允许使用箭头=>来定义箭头函数，箭头函数省去了function关键字，
函数的参数放在=>前面的括号中，函数体放在{}中，这就叫箭头函数。
区别：
1、箭头函数语法更加简洁清晰
2、箭头函数不会创建自己的this，而是它会捕获外层执行环境的this来继承使用，所以箭头函数的this指向是固定的。
3、call、apply、bind无法改变箭头函数中的this值
4、箭头函数不能作为构造函数使用，因为构造没有自己的this，
所以箭头函数不能作为构造函数使用。否则new会报错。所以箭头函数也没有原型Prototype。

28、call、apply、bind的区别

相同点：都可以修改this的上下文指向，都在第一个参数上修改。
不同点：
1、传参不同，call和bind是逐个列举传参，apply是数组传参
2、执行机制不同，call和apply会立即执行函数，
bind不会立即执行，bind会得到一个修改this后的新函数，你要调用它才能执行。

29、Promise与async/await的区别

async/await 是建立在 Promises上的，不能被使用在普通回调以及节点回调
async/await相对于promise来讲，写法更加优雅
async/await 和 Promises 很像，不阻塞
async/await 代码看起来像同步代码

30、同步与异步

同步：指发送一个请求，需要等待返回，然后才能够发送下一个请求，有等待过程。
异步：指发送一个请求，不需要等待返回，随时可以再发发下一个请求。
最大的区别就是：同步需要等待，异步不需要等待。
优缺点：同步执行效率比较低，耗时间，但有利于控制流程，避免意外情况。
异步的执行效率高，节省时间，但会占用更多的资源，也不利于我们对进程的掌控。

31、数组的常用方法

1、 join，数组转字符串，参数为分割符，原数组不受影响。arr.join(‘-’);
2、split，字符串转数组，参数为分割符，原数组不受影响。str.split(‘-’);
3、 push，数组尾部添加一或多个元素，arr.push(值)。
4、pop，数组尾部删除一或多个元素，arr.pop(值)。
5、unshift，数组头部添加一或多个元素，arr.unshift(值)。
6、shift，数组头部删除一或多个元素，arr.shift(值)。
7、 reverse，翻转数组。arr.reserse()
8、sort，对数组进行排序。
9、concat，数组的拼接，原数组不受影响。arr1.concat(arr2)
10.、slice，截取出来，原数组不受影响。
arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end
arr.slice(start) ;从start下标开始截取,一直到最后
arr.slice() ;全部截取相当于复制。
11、splice，删除或增加元素，原数组受影响。
arr.splice(start,deletedCount) 纯删除
arr.splice(start,deletedCount,item) 替换
arr.splice(start,0,item) 纯添加

32、循环数组的方法

1、for
2、array.forEach((item, index, array)
3、array.map((item, index, array)
4、for of，遍历值
5、for in，遍历索引

33、判断this的指向

普通函数：谁调用的函数，函数的this就指向谁，不调用就指向全局。
箭头函数：箭头函数没有 this，箭头函数 this 是定义箭头函数时父级作用域的 this，谁定义指向谁
call/apply/bind：可以改变函数内部的this指向，不可以改变箭头函数。
对象调用：当函数作为对象的方法被调用时，this指向该对象

34、Set和Map的区别

Set 对象可以存储任何类型的数据。值是唯一的，没有重复的值。
Map对象保存键值对，任意值都可以成为它的键或值。

35、foreach和map的区别

共同点：
(1)只能遍历数组
(2)都是循环遍历数组中的每一项
(3)每一次执行匿名函数都支持三个参数，数组中的当前项item，当前项的索引index，原始数组input
(4)匿名函数中的this都是指window
区别：
forEach没有返回值，map有返回值，可以return出来

36、var、let、const的区别

1、变量提升：var存在变量提升。let和const没有
2、块级作用域：var没有块级作用域。let和const有
3、重复声明：var可以重复声明。let和const不可以。
4、修改声明变量：var和let可以，const是常量，不能修改。

37、结构赋值

数组: let [a] =[1] [变量名]:变量名可随意
对象: let {name} = {name} {变量名}:变量名必须是对象中的属性名

4、VUE

1、谈谈你对Vue的理解

vue是一个用于创建用户界面的渐进式的JavaScript框架。
它有三个优点：
1、采用了组件化的模式，实现了 html 的封装和重用，这样提高了代码的利用率，而且维护起来会更加方便。
2、声明式编码，不用再手动操作DOM节点，提高开发效率。
3、采用了虚拟DOM了，尽量复用DOM操作节点，优化性能。

2、响应式数据原理

首先我们要知道什么是响应式？
响应式就是视图渲染时使用到了一个数据，当数据更新时，视图就会响应是否更新，这就叫响应式。
Vue的响应式原理的关键是Object.defineProperty
简单来说，Vue通过Object.defineProperty对data的所有属性进行重新定义，
给数据的获取和设置进行一个拦截功能（就是数据劫持），当getter获取数据的时候，就会给当前数据一个依赖收集，当数据setter更新时，就会通知对应的依赖，进行视图更新，这就是Vue的响应式原理。
具体来说，就是vue初始化的时候，会利用initData()函数初化data的所有属性，然后new Observer对数据进行检测，如果数据类型是对象的话，就会调用this.walk()这个方法对对象进行一个依赖收集处理。它的内部会调用defineRective循环对象属性，定义响应式变化，核心就是通过Object.defineProperty来实现的。
如果数据类型是数组的话，我们首先要知道改变数据的7种方法，分别是pop、push、shift、unshift、sort、reverse、splice。当使用其中的一个的时候，就会改变数组内容。
然后来检测数组变化的时候，就采用函数劫持的方法，具体来说就是，重新定义数组的原型方法，通过原型链获取我们定义的原型方法。当数组变化时，就会通知视图更新。如果数组里面有对象的话，就会深度循环遍历，用Observer进行检测。
其实Vue3是可以通过Proxy直接监听对象数组的变化的。

3、MVVM与MVC的区别

MVC是Model-View-Controller的简写,Model就是模型，对应后端数据，View就是视图对应用户界面，Controller就是控制器，对应页面的业务逻辑。MVC的工作机制原理就是，用户操作会请求服务器路由，路由就会调用对应的控制器来处理，控制器就会获取后台数据，将结果返回给前端，进行页面渲染。
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版，M和C是一样的，ViewModel的存在目的是抽离Controller中展示的业务逻辑，其它的业务逻辑还是在控制器中，整体和MVC差不多，最大的区别就是MVC是单向的，而MVVM是双向的，并且是自动的，也就是数据发生变化自动同步视图，视图发生变化自动同步数据，第二个是解决了 MVC 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。第三个和当数据频繁发生变化，视图是自动更新的，这样开发者就减少了DOM的操作，可以更多的关注业务逻辑。

4、谈谈你对MVVM模式的理解

MVVM即Model-View-ViewModel，Model就是模型，对应Vue实例中的data，View就是视图，对应模板，ViewModel就是Vue实例，它是连接View和Model之间的桥梁。它有两个方向，第一个是Model的数据会挂载到ViewModel中，自动渲染到View视图中。第二个是View视图数据变化时，ViewModel也会通知Model中数据进行更新。实现了一个数据双向绑定的过程。
MVVM的好处就是：
简化了View和Model之间的依赖，实现低耦合性。而且解决了数据频繁更新的问题，不用再用选择器写DOM节点操作，这样我们可以更加专注于数据的变化，提高开发效率。
缺点也很明显，Bug很难被调试: 因为使⽤双向绑定的模式，当你看到界⾯异常了，有可能是你View的代码有Bug，也可能是Model的代码有问题，而且比较占内存。

5、双向数据绑定原理

采用数据劫持结合发布者-订阅者模式的方式来Vue数据双向绑定。
简单来说就是，通过Object.defineProperty对data的所有属性进行重新定义，
给数据的获取和设置进行一个拦截功能（就是数据劫持），
当getter获取数据的时候，就会给当前数据一个依赖收集（就是订阅者Watcher），
当数据setter更新时，就会通知对应的订阅者，进行视图更新
如何视图更新呢？这我们需要一个，compile 解析模板指令，将模板中的变量替换成数据，
绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
具体就三个步骤
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，根据初始化模板数据。

6、computed和methods的区别

computed和methods的区别主要有两个
第一个是属性、方法调用。computed是属性调用，在定义函数时以属性的形式调用，
methods是方法调用，在定义函数时以方法的形式调用，要加()
第二个是缓存功能，computed是计算属性，是有缓存的，当它的依赖属性改变的时候，
才会进行重新计算，如果数据没有改变，它是不会运行的。
而methods是方法，没有缓存功能，只要你调用一次，不管数据是否改变，它都是执行。
所以，性能方面的比较的话，computed是比methods的性能会好一点，避免重复执行。

7、computed和watch的区别

computed是计算属性，watch是监听属性。
它们的共同点都是用来监听数据变化白。
它们有三个区别:
1、是否有缓存功能，computed是有缓存的，只有它依赖的属性值改变的时候，它才会进行计算。而watch是没有缓存功能的，只要监听的数据变化了，它就会触发相应的操作。
2、是否支持异步，computed是不支持异步的，当computed内有异步操作的时候，它是监听不到数据变化的。watch是支持异步操作的，适合监听路由和设置计时器等。

8、vue的生命周期

vue的生命周期，用一句话来概述就是，一个vue实例从开始创建到销毁的过程，就叫做vue的生命周期
vue的生命周期的关键阶段有8个vue生命周期函数，也叫做生命周期方法/钩子。
可以分为3类：
第一类是创建期间的生命周期函数：
1、beforeCreate：这个时期，已经初始化好了vue实例，但是数据和方法还没有被初始化，还没有够被调用。
2、created：这个时期，vue中的数据和方法已经初始化好了，这是第一个可以调用数据和方法的函数
3、BeforeMoute：这个时期，vue中的数据已经预编译好了，但是还没有渲染到模板中。
4、Mouted：这个时期，数据已经渲染到了模板中，可以获取页面中的数据，这里Vue实例已经创建完成。
第二类是运行期间的生命周期函数：
1、beforeUpdate：这个时期，Vue中的数据改变时，视图还没有更新。
2、Updated：这个时期，视图已经更新完毕。
第三类是销毁期间的生命周期函数：
1、beforeDestroy：这是最后一个可以调用Vue中的数据和方法
2、Destroyed：Vue组件销毁，生命周期结束。

9、谈谈你对nextTick的理解

首先我们要知道Vue数据更新是异步操作的，就是数据改变后，视图不会立即更新，
而是Vue会创建一个异步队列，把更新的数据放到队列中，只有当队列中的数据全部更新完成后，才会进行视图更新。而nextTick在视图更新完成之后，就会自动执行，获取DOM内容，删除之前的异步队列，等待下一次数据更新。
nextTick的使用场景：就是数据改变之后你想立即操作节点内容的话，你就可以使用nextTick。
注意：Vue生命周期的created()钩子函数进行DOM操作时一定要放在nextTick()的回调函数中，因为此时模板还没有被渲染，所以此时操作DOM是没有用的，一定到放在nextTick中，等到mounted钩子函数，挂载完DOM之后才使用。
nextTick的原理，就是将传进去的回调函数推入到callbacks队列中，
然后判断pending是否为false，pending表示当前是否有异步任务正在执行，
如果pending为false时，就调用timerFunc函数，执行callbacks队列中的函数，
当timerFunc函数还没有结束时，重复调用nextTick只会触发一次执行。
等到执行完毕后，就会清空之前的异步队列，等待下一次数据更新。

10、vue-if与vue-show的区别

主要有3个区别：
第一个是渲染，v-if不成立的时候是不渲染元素的，而v-show成不成立都会渲染到页面中。
第二个是隐藏显示，v-if切换是动态的向DOM添加或者删除元素，而v-show只是简单的css的display切换
第三个是性能：v-if切换消耗性能高，而v-show初始化渲染消耗性能比较高
使用场景：v-if适合数据变化不大的情况下使用，v-show适合数据需要多次频繁切换

11、vue-if与vue-for为什么不建议一起使用

因为v-for比v-if的优先级高，所以每次渲染都会先执行循环再判断条件，
无论如何循环都不可避免浪费了性能。所以要避免出现这种情况，
则在外层嵌套template，进行v-if判断，然后在内部进行v-for循环。
如果v-if出现在v-for内部，可通过computed计算属性提前过滤掉那些不需要显示的项

12、v-model的双向数据绑定原理

v-model的本质就是v-bind数据绑定和v-on处理函数绑定的语法糖
在input输入框输入数据时，就会绑定data数据显示出来，
然后当数据改变时，就会绑定处理函数，修改data数据，渲染到页面中，实现双向数据绑定。

13、data为什么是一个函数而不是对象

组件实例对象data必须为函数，因为如果一个组件有多个实例，这样就会造成多个组件实例对象之间共用一个data，
产生数据污染。而采用函数的形式，initData初始化data时，就会会返回全新data对象
而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况

14、vue常用的组件间通信方式有哪些？

vue常用的组件间通信方式有3种，分别是父子传值，兄弟传值还有任意组件传值
第一个是父传子，在父组件的子标签中自定义属性，把数据/方法传给该属性
子组件通过props获取属性，接收父组件传过来的数据/方法，实现父传子。
第二个是子传父，在子组件中通过$emit把数据传给父组件的自定义函数，
然后在父组件中的子标签中绑定方法来获取自定义函数传过来的数据，这就实现了子传父。或者可以通过$refs来获取子组件的数据/方法也可以。
第三个是兄弟传值，就用eventBus，来作为消息传递的对象，兄弟组件引入这个对象，然后在created生命周期函数中通过$on定义事件来获取数据，在methods中通过$emit穿参来修改数据，实现兄弟传值。
最后一个任意组件传值，创建一个事件中心，相当于中转站，可以用来传递事件和接收事件。如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，
这样达到了解耦的目的。

15、谈谈你对Vuex的理解

Vuex就是实现组件全局状态（数据）管理的一种机制，实现组件之间数据的共享。
首先我们要知道组件之间的通信方法，
一种是父传子，使用属性绑定。一种是子传父，使用事件绑定。
还有一种是兄弟传值，用EvenBus。但是这3种方法只适合小范围的数据共享。
如果我们需要频繁地、大范围地数据共享，那么就要使用Vuex进行数据共享。
它有五个核心属性，分别是State、Getter、Mutation、Action、Module
state：存放公共数据的地方；
getter：对state值进行加工包装，形成新的数据，不会影响state值；
mutations：唯一修改state的方法，修改过程是同步的；
action：异步处理，通过分发操作触发mutation中的函数；
module：模块化管理store；
它的好处就是：
1、能够在vuex中集中管理共享的数据，易于开发和后期维护。
2、能够高效地实现组件之间的数据共享，提高开发效率。
3、存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。
适用场景：登录的状态、购物车、收藏的信息等。

16、谈谈你对组件的理解

组件就是自定义标签，是把页面当中的可以重复使用的内容进行封装，实现代码重用，
提高开发效率和代码质量，以及代码维护起来会更加方便。
如何封装组件？
首先，使用Vue.extend()创建一个组件。然后，使用Vue.component()方法注册组件
接着，如果子组件需要数据，可以在props中接受定义。
最后，子组件修改好数据之后，想把数据传递给父组件，可以使用$emit()方法。

17、对 SPA 单页面的理解，它的优缺点分别是什么？

SPA是Single-Page-Application的简写，就是单页面应用。仅在Web页面初始化时加载相应的HTML、CSS和JS。
一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新渲染或者跳转。
取而代之的是，复用路由1机制实现HTML内容的变换，UI与用户的交互，避免页面的重新加载。
优点：用户体验快，不需要改变的内容就不需要重新加载，避免不必要的跳转和渲染。
缺点：
(1)初次消耗多，为实现单页面Web应用功能及显示效果，
需要在加载页面的时候，将JS、CSS统一加载，部分页面按需要加载。
(2)SEO难度大，因为所有的内容都在一个页面中动态替换，所以在SEO上有弱势。

18、<keep-alive></keep-alive>的作用

keep-alive是一个缓存组件，它的作用就是避免组件内的数据重复渲染，直接在页面中调用。
优点：组件切换的时候，组件被保存到了内存中，防止重复渲染减少加载时间，提高运行效率。
缺点：如果遇到二次路由访问页面，需要使用到路由守卫(before-routerleave)，把二级路由保存起来即可。

19、vue为什么使用key且为唯一值?

使用key来给每个节点做一个唯一标识，这样的话，Diff算法就可以正确地识别此节点，可以高效地更新虚拟DOM

20、谈谈你对vue-router的理解

vue-router是Vue官网推出的路由管理器，主要用于管理URL，实现URL和组件之间的对应，
以及通过URL进行组件之间的切换，从而使构建SPA单页面应用变得更加简单。
vue-router的原理：
单页面应用SPA的核心思想之一，就是更新视图而不重新页面，简单来说，它在加载页面时，
不会再加载整个页面，而只是更新某个指定的容器中的内容。
对于大多数单页面应用，都推荐使用vue-router。

21、vue-router路由模式有几种

对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），
需要引入前端路由系统，这也就是 Vue-Router 存在的意义。
前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
Hash模式：即地址栏 URL 中的 # 符号，hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，
对后端完全没有影响，因此改变 hash 不会重新加载页面。
History模式：history利用ES6中新增添的pushState()和replaceState()方法，它们提供了对历史记录修改的功能。
虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
因此可以说，hash模式和history模式都属于浏览器自身的属性，vue-router只是利用了这两个特性来实现路由。
区别在于：
(1)hash带#号，比较丑。history带#号
(2)hash不会请求后端。但history就要去请求服务器。而且服务器没有相应的响应或者资源，则会刷新出来404页面。

22、vue-router有几种导航钩子

vue-router有3种导航钩子
第一种是全局导航钩子：router.beforeEach((to, from, next)
第二种是组件内导航钩子，分别是beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave，
他们是直接在路由组件内部直接进行定义的
第三种是单独路由独享组件：
即单个路由独享的导航钩子，它是在路由配置上直接进行定义的beforeEnter: (to, from ,next)

23、怎么定义vue-router的动态路由？怎么获取传过来的值

我们可以通过params和query两种方式获取动态参数
第一种params的类型，通过/router/:参数名，传参，用$route.params.参数名，来获取
第一种query的类型，通过/router?参数名=123，传参，用$route.query.参数名，来获取

24、$router和$route的区别

1.$router是VueRouter的实例方法,可以认为是全局的路由对象，包含了所有路由的对象和属性。
2.$route是一个跳转的路由对象，可以认为是当前组件的路由管理，指当前激活的路由对象，
包含当前url解析得到的数据，可以从对象里获取一些数据。如name,path等。

25、你对Vue项目进行哪些优化

图片资源懒加载、路由懒加载、第三方插件的按需引入

26、Vue3.0特性

使用Proxy替换Object.defineProperty，重构响应式系统，使用Proxy优势：
1、可直接监听数组类型的数据变化
2、监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
3、可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行
4、直接实现对象属性的新增/删除

27、vue中的data发生变化，视图不更新如何解决？

1、使用this.$set()方法重置属性
2、数据修改后调用this.$forceUpdate()强制更新视图

28、说出vue的指令和用法

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

29、如何获取DOM

获取dom节点可以用ref属性，这个属性就是来获取dom对象的，this.$refs.属性名

30、虚拟DOM的优点与缺点

虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象状态变更时，记录新树和旧树的差异
最后把差异更新到真正的dom中。
优点：虚拟DOM具有批处理和高效的Diff算法,最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染,优化性能。
缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。

31、Diff算法

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，
最后用patch记录的消息去局部更新Dom。
Diff算法步骤：
(1)用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
(2)当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
(3)把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了

32、vue全家桶包括哪些

全家桶，顾名思义，对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。
(1)vue-cli，脚手架，Vue.js 开发的标准工具。
(2)vueRoute，路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
(3)vuex，应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
(4)Axios，基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

33、vue修饰符

(1).stop 阻止事件继续传播
(2).prevent 阻止标签默认行为
(3).capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
(4).self 只当在 event.target 是当前元素自身时触发处理函数
(5).once 事件将只会触发一次
(6).passive 告诉浏览器你不想阻止事件的默认行为
详情：https://blog.csdn.net/weixin_43638968/article/details/108635864

34、vue2和vue3的区别

(1)vue2 和vue3双向数据绑定原理不同：
vue2的数据绑定是利用Object.definePropet()对数据进行劫持结合发布订阅模式实现
vue3利用Proxy API对数据代理实现
defineProperty只能监听某个属性，ProxyAPI可以进行全局监听。
两者区别：
proxy可以监听数组，不用单独对数组进行异性操作，可以检测到数组内部的变化
proxy可以直接绑定整个对象，省去for in 闭包等内容来提升效率
(2) vue3默认进行懒观察
vue2.0中数据一开始就创建了观察者，数据很大的时候，就会出现问题，
vue3中进行了优化只有用于渲染初始化可见部分的数据，才会创建观察者，效率更高。
(3)更精准的变更通知
2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；
3.x 版本中，只有依赖那个属性的 watcher 才会重新运行

35、渐进式

用自己想用或者能用的功能特性，不想用的部分功能可以先不用。

36、axios

axios它是基于promise的http库，可运行在浏览器端和node.js中
a作用：用于向后台发起请求的，还有在请求中做更多是可控功能。
步骤：
1、安装axios：npm install axios
2、在App.vue中引入axios：import axios from ‘axios’
3、修改为 Vue 的原型属性，Vue.prototype.$axios = axios
核心对象：XMLHttpRequest
ajax的原理:
由客户端请求ajax引擎，再由ajax引擎请求服务器，
服务器作出一系列响应之后返回给ajax引擎，
由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。
ajax请求的五个步骤：
1、创建XMLHttpRequest异步对象
2、设置回调函数
3、使用open方法与服务器建立连接
4、向服务器发送数据
5、在回调函数中针对不同的响应状态进行处理

37、ajax与axios的区别

Ajax是对原生XHR的封装，为了达到我们跨越的目的，增添了对JsonP的支持。
异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，
用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中；是请求资源的模块；通过promise对ajax的封装。
axios和ajax的区别：
axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样。
简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，
axios有的ajax都有，ajax有的axios不一定有。
总结一句话就是axios是ajax，ajax不止axios。

38、vue挂载过程

1、new Vue的时候调用会调用_init方法
2、调用$mount进行页面的挂载
3、挂载的时候主要是通过mountComponent方法
4、定义updateComponent更新函数
5、执行render生成虚拟DOM
6、_update将虚拟DOM生成真实DOM结构，并且渲染到页面中

5、HTTP

1、HTTP

HTTP是HyperText-Transfer-Protocol的简写，就是超文本传输协议。
主要作用就是，它规定了只能由客户端主动发起请求，服务器接收请求处理后返回响应结果。
同时HTTP是一种无状态的协议，所以协议本身是不记录客户端的历史请求记录。

2、什么是跨域，如何解决跨域

浏览器从一个域名的网页去请求另一个域名的资源时，
协议、域名、端口任一个不同，都是跨域。
协议、域名、端口都相同叫同源策略，为了防止别人恶意访问。
如何解决跨域问题？
1、jsonp跨域
将返回数据以资源的方式放在<script>标签里面返回，由于返回的不是JSON数据，就没有跨域的限制了，
类似对页面添加的js引用，这样就解决了跨域的问题。
2、cors
放开服务端跨域限制，通过添加response的header的方法。header(‘Access-Control-Allow-Origin:*’);
3、代理
将请求资源的操作通过一层代理，然后取回数据，再从代理层把数据返给浏览器，
由于代理层和浏览器是同源的，这样就解决了跨域的问题。

3、get和post的区别

1、get请求的参数数据放在URL中，post请求的参数放在body中，看不到，所以post比get安全。
2、get请求一般用来获取服务器资源，比如查询用户信息。post请求一般与服务器交互相关相关的，比如添加删除。
3、get请求可以缓存在浏览器中，post请求不能缓存。

4、http状态码

200 : 成功，表示访问成功，正常状态。
301 : 永久移动，表示本网页已经永久性的移动到一个新的地址，在客户端自动将请求地址改为服务器返回的新地址。
302 : 临时重定向，表示网页暂时性的转移到一的新的地址，客户端在以后可以继续向本地址发起请求。
303 : 表示必须临时重定向，并且必须使用GET方式请求。
304 : 重定向至浏览器本身，当浏览器多次发起同一请求，且内容未更改时，使用浏览器缓存，这样可以减少网络开销。
401 : 表示协议格式出错，可能是此IP地址被禁止访问该资源，与403类似。
403 : 表示没有权限，服务器拒绝访问请求。
404 : 这是最常见的错误，表示找不到系统资源，但是只是暂时性地。
500 : 表示服务器程序错误，一个通用的错误信息。

5、图片懒加载

实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，
这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。实现懒加载有四个步骤，如下：
1.加载loading图片，src=“loading.gif”，src先为空
2.判断哪些图片要加载
3.隐形加载图片
4.替换真图片，data-src=“4.jpg”，存放真的图片路径