基础部分
【一】、HTTP/html/浏览器相关部分
1、http和https？
http：是互联网应用中最为广泛的一种网络协议（超文本传输协议）基于TCP/IP通信协议来传递数据的，是客户端和服务器端请求与应答的标准，用于从WWW服务器传输超文本到本地浏览器到的传输协议，它可以是浏览器更加高效，是网络传输减少。
https：是已安全为目标的HTTP通道，是HTTP的安全版。即HTTP夏加入SSL层，HHTPS的安全基础是SSL，因此加密的详细内容就需要SSL.
区别：
https协议需要ca证书，费用较高
http是超文本传输协议，信息是明文传输，https是具有安全性的ssl加密传输协议
使用的链接方式和端口不同。http协议端口是80，https端口是443
https连接是无状态的；https协议是由ssl+http协议构件的可进行加密传输、身份认证的网络协议，比http协议安全
http协议工作原理
客户端使用http url访问服务器，就要求web服务器建立ssl链接；
服务器收到客户端的请求后，会将网站包含公钥的证书传输给客户端；
客户端和服务器端开始协商一致的安全等级，并建立会话密钥，再通过网站的公钥加密会话密钥，并传送给网站；
服务器利用自己的私钥解密出会话密钥，再通过会话密钥完成与客户端之间的通信
https协议的优缺点
优：安全性更高，可防止数据在传输过程中被窃取、改变、确保数据的完整性。
缺:https握手阶段费时，导致页面加载时间延长一半，增加耗电；
缓存没有http高效，增加数据开销；
功能越大的证书费用越高；
ssl证书需要绑定IP,不能再同一个IP上板顶多个域名，ipv4资源支持不了这种消耗.
2、http返回状态码？
100 Continue 继续。客户端应继续其请求
101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到 HTTP 的新版本协议
200 OK 请求成功。一般用于 GET 与 POST 请求
201 Created 已创建。成功请求并创建了新的资源
202 Accepted 已接受。已经接受请求，但未处理完成
203 Non-Authoritative Information 非授权信息。请求成功。但返回的 meta 信息不在原始的服务器，而是一个副本
204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回 码清除浏览器的表单域
206 Partial Content 部分内容。服务器成功处理了部分 GET 请求
300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于 用户终端（例如：浏览器）选择
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新 URI，返回信息会包括新的 URI，浏览 器会自动定向到新 URI。今后任何新的请求都应使用新的 URI 代替
302 Found 临时移动。与 301 类似。但资源只是临时被移动。客户端应继续使用原有URI
303 See Other 查看其它地址。与 301 类似。使用 GET 和 POST 请求查看
304 Not Modified 未修改。
所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个 304 状态码。
305 Use Proxy 使用代理。所请求的资源必须通过代理访问
306 Unused 已经被废弃的 HTTP 状态码
307 Temporary Redirect 临时重定向。与 302 类似。使用 GET 请求重定向
400 Bad Request 客户端请求的语法错误，服务器无法理解
401 Unauthorized 请求要求用户的身份认证
402 Payment Required 保留，将来使用
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405 Method Not Allowed 客户端请求中的方法被禁止
406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求
407 Proxy Authentication Required 请求要求代理的身份认证，与 401 类似，但请求者应当使用代理进 行授权
408 Request Time-out 服务器等待客户端发送的请求时间过长，超时
409 Conflict 服务器完成客户端的 PUT 请求是可能返回此代码，服务器处理请求时发生了冲突
410 Gone 客户端请求的资源已经不存在。410 不同于 404，如果资源以前有现在被永久删除了可使用 410 代 码，网站设计人员可通过 301 代码指定资源的新位置
411 Length Required 服务器无法处理客户端发送的不带 Content-Length 的请求信息
412 Precondition Failed 客户端请求信息的先决条件错误
413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连 续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个 Retry-After的响应信息
414 Request-URI Too Large 请求的 URI 过长（URI 通常为网址），服务器无法处理
415 Unsupported Media Type 服务器无法处理请求附带的媒体格式
416 Requested range not satisfiable 客户端请求的范围无效
417 Expectation Failed 服务器无法满足 Expect 的请求头信息
500 Internal Server Error 服务器内部错误，无法完成请求
501 Not Implemented 服务器不支持请求的功能，无法完成请求
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含 在服务器的 Retry-After 头信息中
504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求
505 HTTP Version not supported 服务器不支持请求的 HTTP 协议的版本，无法完成处理
3、需要重点关注的状态码？
301和302的区别； 200/304
4、http支持的方法有哪些？
get/post head options put delete trace connect patch
5、Get和Post的区别？
不同处：
get请求：类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可使用缓存，因此get请求适合于请求缓存；
大小限制在2-8k之间，常见在1k以内；
参数通过url传递；
请求在url中传递的参数有长度限制；
安全性相对低，因为参数是曝露在url中；
只能进行url编码；
参数会被完整的保留在浏览器历史记录中；
产生一个TCP数据包；
post请求：一般是做修改或删除工作，所以必须与数据库交互，不能使用缓存
参数放在request body中；
参数没有长度限制；
安全性相对较高；
支持多种编码方式；
参数不会被完整的保留在浏览器历史记录中；
产生两个TCP数据包；
6、在地址栏中输入URL到呈现该页面中间经历了什么？******
总结性语句：
DNS 解析
TCP 连接
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
连接结束
输入 url 后，
@1、找到当前url域名的服务器ip（如何找=>浏览器首先会找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，缓存中没有则查找系统的 hosts 文件中是否有记录，如果没有则查询 DNS 服务器），
@2、浏览器根据找到的服务器ip以及相应的端口号，构造一个 http 请求，这个请求报文会（包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据），封装在一个 tcp 包中（再依次经过传输层，网络层，数据链路层，物理层）到达服务器，服务器解析该请求再作出响应，返回相应的html给浏览器（因为 html 是一个树形结构，浏览器根据这个 html 来构建 DOM 树，在 dom树的构建过程中如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html 代码的后面）
@3、再根据外部样式，内部样式，内联样式构建一个 CSS 对象模型树 CSSOM 树，构建完成后和 DOM 树合并为渲染树，这里主要做的是排除非视觉节点，比如 script，meta 标签和排除 display 为 none 的节点
@4、再进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为 html 文件中会含有图片，视频，音频等资源，在解析 DOM 的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是 4-6 个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires 等首部字段控制。 Cache-Control 和 Expires 的区别在于 Cache-Control 使用相对时间，Expires 使用的是基于服务器 端的绝对时间，因为存在时差问题，一般采用 Cache-Control，在请求这些有设置了缓存的数据时，会先查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次 响应设置了 ETag 值会在这次请求的时候作为 If-None-Match 的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置 ETag 则直接验证Last-Modified，再决定是否返回304。
7、浏览器缓存机制有哪些？（协商缓存和强缓存的区别？）
相同：
两者获取资源的形式都是从缓采取；两者的使用应根据相应的header内容来决定
不同
状态码/是否发送请求到服务器/相关字段
【强缓存】；是200；否，直接从缓存取；字段有expires、cache-control，如果两者同时存在，后者优先级比前者高
【协商缓存】：是304；是，通过服务器来告诉缓存是否可用；字段有Last-Modified/If-Modified-Since,Etag/If-None-Match
8、如何处理Web的性能优化？
【降低请求量】：合并资源、减少http请求数、minify/gzip压缩、webP、图片lazyLoad。
【加快请求速度】：预解析DNS，减少域名数、并行加载、CDN分发（使用内容发布网络（CDN））。
【缓存】:http协议缓存请求、离线缓存manifest、离线数据缓存loaclStorage
【渲染】：js/css优化、加载顺序、服务端渲染。
将 CSS 样式表放在顶部，把 javascript 放在底部（浏览器的运行机制决定）
9、常用BOM属性对象及方法？
10、Cookie、SessionStorage、LocalStorage的区别？
不同处：
Cookie:数据存在在客户端的浏览器上，即使数据不需要，始终在同源的http请求中携带，即它是在浏览器和服务器端来回传递；
cookie数据有路径的概念，可以限制cookie只属于某个路径下，存储大小只有4k左右
是在所有同源窗口共享
SessionStorage、LocalStorage:不会自动把属于发给服务器，仅在本地保存；存储大小可达5M或更大
SessionStorage：会话级，只要当前浏览器窗口一旦关闭数据就会失效；并且作用域不同，是在同一个页面共享
而LocalStorage数据始终有效，窗口或浏览器关闭也一直保存，除非被手动清除，用作持久数据；是在所有同源窗口都是共享的
11、Html5新增内容/新特性?
html5
为了更好的实践 web 语义化，增加了 header，footer，nav,aside,section 等语义化标签;
在表单方面，为了增强表单，为 input 增加了 color，emial,data ,range 等类型;
在存储方面，提供了 sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取;
在多媒体方面规定了音频和视频元素 audio 和 vedio;
另外还有地理定位，canvas 画布，拖放，多线程编程的 web worker 和 websocket 协议。
12、fetch发送2次请求的原因？
第一次状态码是204，第2次才成功？
原因：
用fetch的post请求时，导致fetch第一次发送了一个options请求，询问服务器是够支持修改的请求头，
如果吴福气支持，则在第二次中发送真正的请求。
13、Doctype的作用？严格模式/混杂模式如何区分及其意义？
Doctype声明于文档最前面，告诉浏览器以何种方式（严格模式/混杂模式）来渲染页面；
严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模式老式浏览器，防止浏览器无法兼容页面。
【二】、CSS关
1、阐述Css盒模型（标准盒模型和怪异盒模型的异同？）
标准盒模型：box-sizing:content-box;
实际宽高：内容、padding、border、margin
怪异盒模型：box-sizing:border-box;
实际宽高：内容+padding+border、margin
2、画一条0.5px到的线
a、采用 meta viewport 的方式
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
b、采用 border-image 的方式
c、采用 transform: scaleY(.5)的方式
3、link和import的区别
link属于html标签，没有兼容性；页面被加载时，会被同时加载；
@import是css提供的，具有兼容性，只有IE5以上才能识别；当页面被加载时，@import引用的css会等页面加载结束后再加载；
link方式样式的权重比@import高
4、Transition和animation的区别
同：
大部分属性相同，都是随时间改变元素的属性值
不同：看是否需要触发事件
transition需要触发一个事件才能改变属性；为 2 帧，从 from .... to
animation在不需要触发任何事件的情况下才会随时间改变属性值；可以一帧一帧的
5、Flex布局/CSS布局
6、BFC（块级格式化上下文；用于清除浮动，方式margin重叠等）
布局规则
内部的box会在垂直方向一个接一个放置；
box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin为发生重叠（按最大margin值设置）；
每一个元素的margin box的左右，与包含块border box的左边相接触；
BFC的区域不会与float box重叠（自适应两栏布局）；
是一个独立的渲染区域，容器里面的子元素不会影响到外面的元素；
计算BFC高度是，浮动元素也要参与计算；（这一点解决了浮动元素高度塌陷的问题）
哪些元素会生成BFC(触发条件)*****
根元素；
float不为none的元素；
overflow不为visible的元素；
position为fixed和absolute的元素；
display为inline-block、table-cell、table-caption、flex、inline-flex的元素；
7、垂直居中的方法
a、margin:auto 法（margin：0 可以实现脱离文档流的居中）；
b、margin 负值法；
c、table-cell（未脱离文档流的）：设置父元素的 display:table-cell,并且 vertical-align:middle，这样子元素可以实现垂直居中。
d、利用 flex：将父元素设置为 display:flex，并且设置 align-items:center;justify-content:center;
8、JS动画和Css3动画的差异性
渲染线程分为 main thread 和 compositor thread，如果 css 动画只改变 transform 和 opacity，这时整个 CSS 动画得以在 compositor trhead 完成（而 JS 动画则会在 main thread 执行，然后出发compositor thread 进行下一步操作），特别注意的是如果改变 transform 和 opacity是不会 layout 或者 paint 的。
区别：
功能涵盖面，JS 比 CSS 大
实现/重构难度不一，CSS3 比 JS 更加简单，性能跳优方向固定
对帧速表现不好的低版本浏览器，css3 可以做到自然降级
css 动画有天然事件支持
css3 有兼容性问题
9、CSS预处理器？
less、sass等
10、单（多）行文本溢出隐藏？
多行文本
display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden
单行文本
overflow：hidden;
white-space: nowrap;
text-overflow: ellipsis;
11、Visibility=hidden；opacity=0；display=none三者间的区别（让元素显示隐藏的方式除了这三个，还有position移到外部、z-index涂层遮盖）？
opacity=0；隐藏元素不改变布局，会触发已绑定的事件；
display=none：隐藏元素不改变布局，如绑定事件，不会触发已绑定的事件；
Visibility=hidden：隐藏元素会改变布局，通过删除该元素达到隐藏效果
12、Position属性有哪些及其区别（relative、absolute、fixed、sticky）====》也叫CSS定位方式
relative：相对定位，以自身默认位置为参照物；不脱离文档流，始终占据页面空间；
absolute：绝对定位，参照物为，除static外有定位的最近的父元素；脱离文档流，不占据页面空间；如果没有设置参照物，默认以整个浏览器为参照物；
fixed：固定定位，以浏览器窗口为参照为；脱离文档流，不占据页面空间；
sticky：粘性定位（相对和固定的结合）如果没有没达到临界值，按相对定位；达到按固定定位；
static：静态定位，默认值，没有定位
13、清除浮动的方式/高度塌陷的解决方案？
a、给父元素设置固定高度
b、给浮动元素的父元素设置overflow：hidden=>原理：触发了BFC，bfc规定浮动元素也要参与高度计算 弊端：本意是溢出隐藏，会影响定位；
c、给要清除浮动的子元素后面添加空标签，并设置css样式（clear：both） 此法会导致代码冗余
d、万能清除法：
.clear-fix 选择符：：after{
content：'';
clear:both;
display:block;
height:0;
overflow:hidden;visibility:hidden;
}
14、双边距重叠问题（外边距折叠）？
多个相邻（兄弟/父子关系），普通六的块元素垂直方向margin会重叠，结果为：
两相邻外边距均为正数时：折叠结果是两者之间较大的值；
两.............负数时：.........两者绝对值的较大值；
两.........一正一负时：...........两者相加的和
15、CSS常用选择器及其优先级？
id选择符、class（类）选择符、标签选择符、伪元素选择符、伪类元素选择符、通配符、群组选择符、后代选择符
！importent>内联样式表>id选择符>（伪）类选择符>标签选择符>通配符>继承性
属性选择符和伪类选择符优先级相同
16、如何实现一个图片在容器中垂直居中？
父元素固定宽高，利用定位及设置子元素margin值为自身的一半；
父元素固定宽高，子元素设设置相对定位，margin：auto平均分配margin；
利用css3属性transform。子元素设置相对定位，左和上移动50%，transform：translate（-50%，-50%）；
父元素设置为display：table，子元素设置为单元格display：table-cell；
采用弹性布局：设置水平居中，垂直居中
三栏布局的实现方式，浮动布局时，三个div的生成顺序有没有影响？
三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应两列定宽一列自适应：
1、使用 float+margin：给 div 设置 float：left，left 的 div 添加属性 margin-right：left 和center 的间隔 px,right 的div 添加属性 margin-left：left 和 center 的宽度之和加上间隔
2、使用 float+overflow：给 div 设置 float：left，再给 right 的 div 设置 overflow:hidden。这样子两个盒子浮动，另一个盒子触发 bfc 达到自适应
3、使用 position：父级 div 设置 position：relative，三个子级 div 设置 position：absolute，这个要计算好盒子的宽度和间隔去设置位置，兼容性比较好，
4、使用 table 实现：父级 div 设置 display：table，设置 border-spacing：10px//设置间距，取值随意,子级 div设置 display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是 margin失效，设计间隔比较麻烦，
5、flex 实现：parent 的 div 设置 display：flex；left 和 center 的 div 设置 margin-right；然后 right 的 div设置 flex：1；这样子 right 自适应，但是 flex 的兼容性不好
6、grid 实现：parent 的 div 设置 display：grid，设置 grid-template-columns 属性，固定第一列第二列宽度，第三列 auto，对于两侧定宽中间自适应的布局，对于这种布局需要把 center 放在前面，可以采用双飞翼布局：圣杯布局，来实现，也可以使用上述方法中的 grid，table，flex，position 实现
17、z-index的定位方法（层级属性）
只有设置了定位的元素才可以使用（除了static）；
使用原因：后定位的元素会盖在先定位的元素上面；
是用来控制元素的层级关系的；
属性值是数字，默认为auto/0；取值越大层级越高越在上面；可以去负值
18、对CSS的新属性有了解过吗?（CSS3新增内容/新特性）
选择器方面新增了firs-of-type，nth-of-type等；
盒模型方面添加了box-sizing来改变盒模型；
边框：border-radius；box-shadow；
背景：background-size；backfround-origin；
2D/3D转换：transform等
动画animation等；
颜色方面添加了透明、rgba等；
字体方面允许嵌入字体和设置字体阴影等；
媒体查询等等
css属性用得最多的目前是flex，灵活但是兼容性方面不强；
19、inline-block、inline和block的区别；为什么img是inline还可以设置宽高？
Block 是块级元素，独占一行，能设置宽度，高度，margin/padding 水平垂直方向都有效。
Inline：行内元素，设置宽高无效，margin 在竖直方向上无效，padding 在水平方向垂直方向都有效，在同一行排列
Inline-block：能设置宽度高度，margin/padding 水平垂直方向 都有效，前后无换行符
20、display的值有哪些？
block、inlink-block、inline、none等
21、CSS 画正方体，三角形
画三角形
#triangle02{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
}
画正方体
.wrapper{
width: 50%;
float: left;
}
.cube{
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style:preserve-3d;
transform:rotateX(-35deg) rotateY(30deg);
}
.side{
position: absolute;
width: 2em;
height: 2em;
background: rgba(255,99,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front{
transform:translateZ(1em);
}
.bottom{
transform:rotateX(-90deg) translateZ(1em);
}
.top{
transform:rotateX(90deg) translateZ(1em);
}
.left{
transform:rotateY(-90deg) translateZ(1em);
}
.right{
transform:rotateY(90deg) translateZ(1em);
}
.back{
transform:translateZ(-1em);
}
16、实现一个两列等高布局，讲讲思路？
为了实现两列等高，可以给每列加上 padding-bottom:9999px；margin-bottom:-9999px;
同时父元素设置 overflow:hidden;
【三】、JS相关
3、作用域链、原型链、闭包？
闭包：
参考回答：
（1）什么是闭包：
闭包是指有权访问另外一个函数作用域中的变量的函数。
闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。当在一个函数内定义另外一个函数就会产生闭包。
（2）为什么要用：
匿名自执行函数：我们知道所有的变量，如果不加上 var 关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。除了每次使用变量都是用 var 关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，可以用闭包。
结果缓存：我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。
封装：实现类和继承等。
4、类的创建和继承？
5、如何解决异步回调地狱？
promise、generator、async/await
6、前端中的事件流?
何为事件流:事件流描述的是从页面中接收事件的顺序，DOM2级事件流包括事件捕获阶段、处于目标阶段、事件冒泡阶段。
addEvenlistener是DOM2级事件新增的指定事件处理程序的操作，addEvenlistener（事件名，回调函数，布尔值），该布尔值如果为true，表示在捕获阶段调用事件处理车需；为false表示在冒泡阶段调用事件处理程序。
解释何为事件监听？
addEventListener()方法，用于向指定元素添加事件句柄，它可以更简单的控制事件，语法为element.addEventListener(event,function,useCapture);
第一个参数是事件的类型(如"click"或"mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
事件传递有两种方式，冒泡和捕获
事件传递定义了元素事件触发的顺序，如果你将P元素插入到div元素中，用户点击P元素，
在冒泡中，内部元素先被触发，然后再触发外部元素，
捕获中，外部元素先被触发，在触发内部元素。
7、如何让事件先冒泡后捕获？
在DOM标准事件模型中，是先捕获后冒泡，想实现反向效果，对于同一个事件，监听捕获和冒泡分别对应相应的处理函数，监听到不好事件先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。
8、事件委托及冒泡原理？
事件委托：值不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素dom的类型，来做出不同的响应。====>好处:比较适合铜带元素的绑定，新添加的子元素也会有监听函数，也可以额有时间触发机制。
原理
事件冒泡，就是元素自身的事件被触发后，如果父元素有相同的事件，如onclick事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。
9、图片的懒加载和预加载？
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染；
懒加载：其主要目的是作为服务器前端的诱惑，减少请求书或延迟请求书；
本质:两者行为相反，一个提前加载，一个迟缓甚至不加载，懒加载对服务器前端有一定的缓解压力作用，
预加载则会增加服务器前端压力。
10、mouseover/leave和mouseenter/out的区别
11、JS的new操作符做了哪些事？New操作符原理
new操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象
12、改变函数内部this指针的指向函数（bind、apply、call的区别）
通过apply和call改变函数的this，两者第一个参数都是表示要该项指向的那个独享，唯一不同就是第二个餐参数不同；
通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。
13、JS的各种位置。如：clientHeight、scrollHeight、scrollTop、offsetTop、clientTop的区别？
clientHeight：表示的是可视区域的高度，不包含 border 和滚动条
offsetHeight：表示可视区域的高度，包含了 border 和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框 border 的厚度，在未指定的情况下一般为 0
scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标(css定位的元素或 body 元素)距离顶端的高度。
14、JS拖拽功能的实现？
首先是三个事件，分别是 mousedown，mousemove，mouseup
当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行 mousemove 里面的具体方法。
clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX和 offsetY 来表示元素的元素的初始坐标，
移动的举例应该是：鼠标移动时候的坐标-鼠标按下去时候的坐标。
也就是说定位信息为：鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.
还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left以及 top 等等值。
补充：也可以通过 html5 的拖放（Drag 和 drop）来实现
15、Ajax解决浏览器缓存问题
在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
在 URL 后面加上一个随机数： "fresh=" + Math.random()。
在 URL 后面加上时间搓："nowtime=" + new Date().getTime()。
如果是使用 jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有 ajax都会执行这条语句就是不需要保存缓存记录。
16、JS防抖和节流？
17、JS中的垃圾回收机制？
18、eval是做什么的？
将对应的字符串解析成JS并执行。应该避免使用JS,因为非常消耗性能（2次，一次解析成js，一次执行）
19、如何理解前端模块化？
前端模块化就是复杂的文件编程一个一个独立的模块，如：js文件等，分成独立的模块有利于重用和维护（版本迭代），会引来模块之间相互依赖问题，所有有了commonjs规范,AMD，cmd规范等，以及用于js打包（编译等处理）的工具webpack
20、webpack干嘛的？
是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
21、说一下commonjs、amd和cmd？
22、将原生ajax封装成promise对象？
var myNewAjax=function(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open('get',url);
xhr.send(data);
xhr.onreadystatechange=function(){
if(xhr.status==200&&readyState==4){
var json=JSON.parse(xhr.responseText);
resolve(json)
}else if(xhr.readyState==4&&xhr.status!=200){
reject('error');
}
}
})
}
23、JS监听对象属性的改变？
我们假设这里有一个 user 对象,
(1)在 ES5 中可以通过 Object.defineProperty 来实现已有属性的监听
Object.defineProperty(user,'name',{
set：function(key,value){ }
})
缺点：如果 id 不在 user 对象中，则不能监听 id 的变化
(2)在 ES6 中可以通过 Proxy 来实现
var user = new Proxy({}，{
set：function(target,key,value,receiver){ }
})
这样即使有属性在 user 中不存在，通过 user.id 来定义也同样可以这样监听这个属性的变化
24、引用类型常见对象?
25、JS如何控制一次加载一张图片，加载完后再加载下一张？
(1)方法 1
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>
(2)方法 2
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
}
</script>
<div id="mypic">onloading……</div>
26、实现一个简单的promise？什么是promise及底层原理？
27、箭头函数中this的指向？ES6箭头函数的特性？
箭头函数的特征
基本语法为
let func=value=>value;
相当于let func=function(value){
return value;
};
箭头函数与普通函数的区别在于：
1、箭头函数没有this，所以需要通过查找作用域链来确定this的值，这就意味着如果箭头函数被非箭头函数包含，this绑定的就是最近一层非箭头函数的this，
2、箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象
3、不能通过new关键字调用，同样也没有new.target值和原型
与function有什么区别？
箭头函数根本就没有绑定自己的this，在箭头函数中调用this时，仅仅是简单的沿着作。用域链向上寻找，找到最近的一个this拿来使用
28、JS的判断类型方法？
typeof（）、instanceof Object.prototype.toString.call()等
29、数组去重/数组常用方法？
去重：
法一：indexOf 循环去重
法二：ES6 Set 去重；Array.from(new Set(array))
法三：Object 键值对去重；把数组的值存成 Object 的 key 值，比如 Object[value1] = true，
在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。
30、阐述JS语言特性？
运行在客户端浏览器上；
不用预编译，直接解析执行代码；
是弱类型语言，较为灵活；
与操作系统无关，跨平台的语言；
脚本语言、解释性语言
31、如何判断一个数组？
32、JS实现跨域的方法？跨域原理？
方法
JSONP：通过动态创建 script，再请求一个带参网址实现跨域通信。
document.domain +iframe 跨域：两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。
location.hash + iframe 跨域：a 欲与 b 跨域相互通信，通过中间页 c 来实现。 三个页面，不同域之间利用 iframe 的 location.hash 传值，相同域之间直接 js 访问来通信。
window.name + iframe跨域：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name 从外域传递到本地域。
postMessage 跨域：可以跨域操作的 window 属性之一。
CORS：服务端设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带 cookie 请求，前后端都需要设置。
代理跨域：启一个代理服务器，实现数据的转发
原理
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制，那么只要协议、域名、端口有任何一个不同，都被当作是不同的域。跨域原理，即是通过各种方式，避开浏览器的安全限制。
33、JS的基本数据类型有哪些？基本数据类型和引用类型的区别，NaN是什么的缩写,JS的作用域类型，undefined==null返回的结果是什么？Undefined和null的区别在哪里？写一个函数判断变量类型？
JS的基本数据类型
number、boolean、string、undefined、null、symbol
简单介绍一下symbol?
Symbol是ES6的新增属性，代表用给定名称作为唯一标识，这种类型的值可以这样创建，let id=symbol（'id')
34、不同数据类型的值的比较，如何转化的，有何规则？
35、暂停死区？
在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”
36、何为按需加载？
当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等。加载的文件，可以是JS、图片、CSS、HTML等。
37、说一下虚拟dom？
用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。VirtualDOM本质上就是在JS和DOM之间做了一个缓存。
38、arguments？箭头函数获取arguments？
39、JS中继承实现的几种方式？
1、原型链继承，将父类的实例作为子类的原型，他的特点是实例是子类的实例也是父类的实例，父类新增的原型方法/属性，子类都能够访问，并且原型链继承简单易于实现，缺点是来自原型对象的所有属性被所有实例共享，无法实现多继承，无法向父类构造函数传参。
2、构造继承，使用父类的构造函数来增强子类实例，即复制父类的实例属性给子类，构造继承可以向父类传递参数，可以实现多继承，通过call多个父类对象。但是构造继承只能继承父类的实例属性和方法，不能继承原型属性和方法，无法实现函数服用，每个子类都有父类实例函数的副本，影响性能
3、实例继承，为父类实例添加新特性，作为子类实例返回，实例继承的特点是不限制调用方法，不管是new子类（）还是子类（）返回的对象具有相同的效果，缺点是实例是父类的实例，不是子类的实例，不支持多继承
4、拷贝继承：特点：支持多继承，缺点：效率较低，内存占用高（因为要拷贝父类的属性）无法获取父类不可枚举的方法（不可枚举方法，不能使用forin访问到）
5、组合继承：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
6、寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点
41、C++，java和JS三种语言的区别？
从静态类型看，编译的时候就能够知道每个变量的类型，编程的时候也需要给定类型，如Java中的整型int，浮点型float等。C、C++、Java都属于静态类型语言。
从动态类型看，运行的时候才知道每个变量的类型，编程的时候无需显示指定类型，如JavaScript中的var、PHP中的$。JavaScript、Ruby、Python都属于动态类型语言。
静态类型还是动态类型对语言的性能有很大影响。
对于静态类型，在编译后会大量利用已知类型的优势，如int类型，占用4个字节，编译后的代码就可以用内存地址加偏移量的方法存取变量，而地址加偏移量的算法汇编很容易实现。
对于动态类型，会当做字符串通通存下来，之后存取就用字符串匹配。
从编译型还是解释型来看编译型语言，像C、C++，需要编译器编译成本地可执行程序后才能运行，由开发人员在编写完成后手动实施。用户只使用这些编译好的本地代码，这些本地代码由系统加载器执行，由操作系统的CPU直接执行，无需其他额外的虚拟机等。源代码=》抽象语法树=》中间表示=》本地代码解释性语言，像JavaScript、Python，开发语言写好后直接将代码交给用户，用户使用脚本解释器将脚本文件解释执行。对于脚本语言，没有开发人员的编译过程，当然，也不绝对。源代码=》抽象语法树=》解释器解释执行。
对于JavaScript，随着Java虚拟机JIT技术的引入，工作方式也发生了改变。可以将抽象语法树转成中间表示（字节码），再转成本地代码，如JavaScriptCore，这样可以大大提高执行效率。也可以从抽象语法树直接转成本地代码，如V8Java语言，分为两个阶段。首先像C++语言一样，经过编译器编译。和C++的不同，C++编译生成本地代码，Java编译后，生成字节码，字节码与平台无关。第二阶段，由Java的运行环境也就是Java虚拟机运行字节码，使用解释器执行这些代码。一般情况下，Java虚拟机都引入了JIT技术，将字节码转换成本地代码来提高执行效率。
注意，在上述情况中，编译器的编译过程没有时间要求，所以编译器可以做大量的代码优化措施。
对于JavaScript与Java它们还有的不同：
对于Java，Java语言将源代码编译成字节码，这个同执行阶段是分开的。也就是从源代码到抽象语法树到字节码这段时间的长短是无所谓的。对于JavaScript，这些都是在网页和JavaScript文件下载后同执行阶段一起在网页的加载和渲染过程中实施的，所以对于它们的处理时间有严格要求。
42、JS加载过程阻塞，如何解决？
43、面向对象的继承方式？
44、JS原型链条顶端是什么？Object的原型是什么？Object的原型的原型是什么？在数组原型链上实现删除数组重复数据的方法？
45、深浅拷贝的区别及实现？
46、JS中的startwith和indexof的区别？
47、JS字符串转数字的方法？
48、setTimeout和promise的执行顺序？
49、平时如何调节js
f12控制台
50、ES6的新特性？
promise，await/async，let、const、块级作用域、箭头函数
51、async和await具体如何用？
52、知道哪些ES6和ES7语法？
53、介绍一下promise？
Promise是一个对象，保存着未来将要结束的事件，她有两个特征:
1、对象的状态不受外部影响，Promise对象代表一个异步操作，有三种状态，pending进行中，fulfilled已成功，rejected已失败，只有异步操作的结果，才可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也就是promise名字的由来
2、一旦状态改变，就不会再变，promise对象状态改变只有两种可能，从pending改到fulfilled或者从pending改到rejected，只要这两种情况发生，状态就凝固了，不会再改变，这个时候就称为定型resolved,
核心部分
【一】、服务器编程
1、Jsonp的缺点
JSON 只支持 get，因为 script 标签只能使用 get 请求；
JSONP 需要后端配合返回指定格式的数据。
2、跨域（jsonp、ajax）
JSONP：ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域
3、如何实现跨域
JSONP：通过动态创建 script，再请求一个带参网址实现跨域通信。
document.domain +iframe 跨域：两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。
location.hash + iframe 跨域：a 欲与 b 跨域相互通信，通过中间页 c 来实现。三个页面，不同域之间利用 iframe 的 location.hash 传值，相同域之间直接 js 访问来通信。
window.name + iframe跨域：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的 window.name 从外域传递到本地域。
postMessage 跨域：可以跨域操作的 window 属性之一。
CORS：服务端设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带 cookie 请求，前后端都需要设置。
代理跨域：起一个代理服务器，实现数据的转发
4、理解中的dom是什么
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为 DOM
5、Dom的api有哪些
节点创建型 api，页面修改型 API，节点查询型 API，节点关系型 api，元素属性型 api，元素样式型 api 等
【二】、Ajax******
1、ajxa返回的状态
0 － （未初始化）还没有调用 send()方法
1 － （载入）已调用 send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
2、实现一个ajax
AJAX 创建异步对象 XMLHttpRequest
操作 XMLHttpRequest 对象
（1）设置请求参数（请求方式，请求页面的相对路径，是否异步）
（2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针
（3）获取异步对象的 readyState 属性：该属性存有服务器响应的状态信息。每当readyState 改变时，onreadystatechange 函数就会被执行。
（4）判断响应报文的状态，若为 200 说明服务器正常运行并返回响应数据。
（5）读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。
3、写出原生ajax
Ajax 能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现
局部刷新，大大降低了资源的浪费，是一门用于快速创建动态网页的技术，ajax 的使用
分为四部分：
1、创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest();
2、向服务器发送请求，使用 xmlHttpRequest 对象的 open 和 send 方法，
3、监听状态变化，执行相应回调函数
var xhr = new XMLHttpRequest();
xhr.open('get', 'aabb.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
if(xhr.readyState==4&&xhr.status==200) {
console.log(xhr.responseText);
}
}
4、如何实现ajax请求，假如有多个请求，我需要让这些ajax请求按照某种顺序依次执行，有什么办法？如何处理ajax跨域？
5、如何实现一个ajax请求？如果想发出两个有顺序的ajax需要怎么做？
操作 XMLHttpRequest 对象
（1）设置请求参数（请求方式，请求页面的相对路径，是否异步）
（2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针
（3）获取异步对象的 readyState 属性：该属性存有服务器响应的状态信息。每当readyState 改变时，onreadystatechange 函数就会被执行。
（4）判断响应报文的状态，若为 200 说明服务器正常运行并返回响应数据。
（5）读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。
发出两个有顺序的 ajax，可以用回调函数，也可以使用 Promise.then 或者 async 等。
6、Fetch和ajax比有什么优缺点？
promise 方便异步，在不想用 jQuery 的情况下，相比原生的 ajax，也比较好写。
【三】、移动Web开发******
进阶部分
【一】、前端工程化******
1、Babel 的原理是什么?
2、如何写一个 babel 插件?
3、你的 git 工作流是怎样的?
4、Rabase和merge的区别
5、Git reset、Git revert、Git checkout的区别
6、Webpack和gulp的区别（模块化与流的区别）
【二】、Vue框架******
1、对Vue的了解
Vue 是一个构建数据驱动的渐进性框架，它的目标是通过 API 实现响应数据绑定和视图
更新。
2、说说Vue的优缺点
优点：
1、数据驱动视图，对真实 dom 进行抽象出 virtual dom（本质就是一个 js 对象），并配合 diff 算法、响应式和观察者、异步队列等手段以最小代价更新 dom，渲染页面
2、组件化，组件用单文件的形式进行代码的组织编写，使得我们可以在一个文件里编写 html\css（scoped 属性配置 css 隔离）\js 并且配合 Vue-loader 之后，支持更强大的预处理器等功能
3、强大且丰富的 API 提供一系列的 api 能满足业务开发中各类需求
4、由于采用虚拟 dom，让 Vue ssr 先天就足
5、生命周期钩子函数，选项式的代码组织方式，写熟了还是蛮顺畅的，但仍然有优化空间（Vue3 composition-api）
6、生态好，社区活跃
缺点：
1、由于底层基于 Object.defineProperty 实现响应式，而这个 api 本身不支持 IE8及以下浏览器
2、csr 的先天不足，首屏性能问题（白屏）
3、由于百度等搜索引擎爬虫无法爬取 js 中的内容，故 spa 先天就对 seo 优化心有余力不足（谷歌的 puppeteer 就挺牛逼的，实现预渲染底层也是用到了这个工具）
3、和react的区别？分别的使用场景？
1、Vue 是完整一套由官方维护的框架，核心库主要有由尤雨溪大神独自维护，而 React是不要脸的书维护（很多库由社区维护），曾经一段时间很多人质疑 Vue 的后续维护性，似乎这并不是问题。
2、Vue 上手简单，进阶式框架，白话说你可以学一点，就可以在你项目中去用一点，你不一定需要一次性学习整个 Vue 才能去使用它，而 React，恐怕如果你这样会面对项目束手无策。
3、语法上 Vue 并不限制你必须 es6+完全 js 形式编写页面，可以视图和 js 逻辑尽可能分离，减少很多人看不惯 React-jsx 的恶心嵌套，毕竟都是作为前端开发者，还是更习惯于 html 干净。
4、很多人说 React 适合大型项目，适合什么什么，Vue 轻量级，适合移动端中小型项目，其实我想说，说这话的人是心里根本没点逼数，Vue 完全可以应对复杂的大型应用，甚至于说如果你 React 学的不是很好，写出来的东西或根本不如 Vue 写的，毕竟 Vue 跟着官方文档撸就行，自有人帮你规范，而 React 比较懒散自由，可以自由发挥
5、Vue 在国内人气明显胜过 React，这很大程度上得益于它的很多语法包括编程思维更符合国人思想。
4、虚拟DOM
虚拟 dom 是相对于浏览器所渲染出来的真实 dom ，在 react，vue 等技术出现之前，我们要改变页面展示
的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新
ui 的目的。这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个
与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom树，那么每次 dom 的更改
就变成了 js 对象属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小
5、生命周期
生命周期就是 vue 从开始创建到销毁的过程，分为四大步（创建，挂载，更新，销毁），每一步
又分为两小步，如 beforeCreate，created。beforeCreate前，也就是 new Vue 的时候会初始化事件
和生命周期；beforeCreate 和created 之间会挂载 Data，绑定事件；接下来会根据 el 挂载页面元素，
如果没有设置 el 则生命周期结束，直到手动挂载；el 挂载结束后，根据templete/outerHTML(el)渲染
页面；在 beforeMount 前虚拟 DOM 已经创建完成；之后在 mounted 前，将 vm.$el 替换掉页面元素el;
mounted 将虚拟 dom挂载到真实页面（此时页面已经全部渲染完成）；之后发生数据变化时触发beforeUpdate
和updated 进行一些操作；最后主动调用销毁函数或者组件自动销毁时 beforeDestroy，手动撤销监听事件、
计时器等；destroyed时仅存在 Dom 节点，其他所有东西已自动销毁。
6、Vue如何监听键盘事件
7、Watch怎么深度监听对象的变化
8、删除数组用delete和Vue.delete有什么区别？
delete：只是被删除数组成员变为empty/undefined，其他元素键值不变
Vue.delete：直接删了数组成员，并改变了数组的键值（对象是响应式的，确保删除能触发更新视图，这个方法主要用于避开Vue不能检测到属性被删除的限制）
9、Watch和computed的区别
通俗来讲，既能用computed实现又可以用watch监听来实现的功能，推荐用computed，重点在于computed的缓存功能computed计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；
watch监听的是已经在data中定义的变量，当该变量变化时，会触发watch中的方法。
10、双向绑定原理
Vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)。
11、v-model是什么？有何用
一则语法糖，相当于v-bind:value="xxx"和@input，意思是绑定了一个value属性的值，
子组件可对value属性监听，通过$emit('input',xxx)的方式给父组件通讯。自己实现v-model方式的组件也是这样的思路。
12、Axios是什么？如何使用？怎么解决跨域问题？
axios的是一种异步请求，用法和ajax类似，安装npm install axios--save即可使用，请求中包括get,post,put,patch,delete等五种请求方式，解决跨域可以在请求头中添加Access-Control-Allow-Origin，也可以在index.js文件中更改proxyTable配置等解决跨域问题。
13、Vue中如何引入第三方库？有哪些方法啊可做到？
1、绝对路径直接引入
在index.html中用script引入
然后在webpack中配置external
externals:{'jquery':'jQuery'}
在组件中使用时import
import$from'jquery'
2、在webpack中配置alias
resolve:{extensions:['.js','.vue','.json'],alias: {'@':resolve('src'),'jquery':
resolve('static/jquery-1.12.4.js')}}
然后在组件中import
3、在webpack中配置plugins
plugins:[newwebpack.ProvidePlugin({$:'jquery'})]
全局使用，但在使用eslint情况下会报错，需要在使用了$的代码前添加/*
eslint-disable*/来去掉ESLint的检查。
14、说说vue、react、angular、jquery的区别？
JQuery与另外几者最大的区别是，JQuery是事件驱动，其他两者是数据驱动。
JQuery业务逻辑和UI更改该混在一起，UI里面还参杂这交互逻辑，让本来混乱的逻辑更加混乱。
Angular，Vue是双向绑定，而React不是其他还有设计理念上的区别等
15、Vue3.0里为什么要用proxy API代替defineProperty API?
响应式优化。
a.definePropertyAPI的局限性最大原因是它只能针对单例属性做监听。Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对data中的属性做了遍历+递归，为每个属性设置了getter、setter。这也就是为什么Vue只能对data中预定义过的属性做出响应的原因，在Vue中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到setter监听的，这是defineProperty的局限性。
b.ProxyAPI的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
c.响应式是惰性的。在Vue.js2.x中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行Object.defineProperty把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。在Vue.js3.0中，使用ProxyAPI并不能监听到对象内部深层次的属性变化，因此它的处理方式是在getter中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。
16、Vue3.0 编译做了哪些优化？
a.生成Blocktree
Vue.js2.x的数据更新并触发重新渲染的粒度是组件级的，单个组件内部需要遍历该组件的整个vnode树。在2.0里，渲染效率的快慢与组件大小成正相关：组件越大，渲染效率越慢。并且，对于一些静态节点，又无数据更新，这些遍历都是性能浪费。Vue.js3.0做到了通过编译阶段对静态模板的分析，编译生成了Blocktree。Blocktree是一个将模版基于动态节点指令切割的嵌套区块，每个区块内部的节点结构是固定的，每个区块只需要追踪自身包含的动态节点。所以，在3.0里，渲染效率不再与模板大小成正相关，而是与模板中动态节点的数量成正相关。
b.slot编译优化
Vue.js2.x中，如果有一个组件传入了slot，那么每次父组件更新的时候，会强制使子组件update，造成性能的浪费。Vue.js3.0优化了slot的生成，使得非动态slot中属性的更新只会触发子组件的更新。动态slot指的是在slot上面使用v-if，v-for，动态slot名字等会导致slot产生运行时动态变化但是又无法被子组件track的操作。
c.diff算法优化
17、Vue3.0 新特性 —— Composition API 与 React.js 中 Hooks 的异同点
a.React.js中的Hooks基本使用
ReactHooks允许你"勾入"诸如组件状态和副作用处理等React功能中。Hooks只能用在函数组件中，并允许
我们在不需要创建类的情况下将状态、副作用处理和更多东西带入组件中。React核心团队奉上的采纳策略是
不反对类组件，所以你可以升级React版本、在新组件中开始尝试Hooks，并保持既有组件不做任何更改。
useState和useEffect是ReactHooks中的一些例子，使得函数组件中也能增加状态和运行副作用。
我们也可以自定义一个Hooks，它打开了代码复用性和扩展性的新大门。
b.VueCompositionAPI基本使用
VueCompositionAPI围绕一个新的组件选项setup而创建。setup()为Vue组件提供了状态、计算值、
watcher和生命周期钩子。并没有让原来的API（Options-basedAPI）消失。
允许开发者结合使用新旧两种API（向下兼容）。
c.原理
Reacthook底层是基于链表实现，调用的条件是每次组件被render的时候都会顺序执行所有的hooks。
Vuehook只会被注册调用一次，Vue能避开这些麻烦的问题，原因在于它对数据的响应是基于proxy的，
对数据直接代理观察。（这种场景下，只要任何一个更改data的地方，相关的function或者template都会
被重新计算，因此避开了React可能遇到的性能上的问题）。React中，数据更改的时候，会导致重新render，
重新render又会重新把hooks重新注册一次，所以React复杂程度会高一些。
18、Vue3.0 是如何变得更快的？（底层，源码）
a.diff方法优化
Vue2.x中的虚拟dom是进行全量的对比。Vue3.0中新增了静态标记（PatchFlag）：在与上次虚拟结点进行对比的时候，值对比带有patchflag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容化。
b.hoistStatic静态提升
Vue2.x:无论元素是否参与更新，每次都会重新创建。Vue3.0:对不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用。
c.cacheHandlers事件侦听器缓存.
默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。
19、vue 要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E6%8C%87%E4%BB%A4%E6%9D%83%E9%99%90
20、vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？
看实际情况，一般在created（或beforeRouter）里面就可以，如果涉及到需要页面加载完成之后的话就用mounted。在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById即可生效了）。
21、说说你对 proxy 的理解
vue的数据劫持有两个缺点:
1、无法监听通过索引修改数组的值的变化
2、无法监听object也就是对象的值的变化
所以vue2.x中才会有$set属性的存在
proxy是es6中推出的新api，可以弥补以上两个缺点，所以vue3.x版本用proxy替换object.defineproperty。
