前端面试题一

在CSDN整理的前端面试题，忘记都是哪些大神总结的了，所以没法贴出来都是谁的，有冒犯到的烦请见谅哈！
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

浏览器问题

输入 URL 到页面展示 【超高频

（1）输入一个域名，这个域名实际上会被解析成IP地址，通过各种DNS的缓存进行解析
（2）然后客户端和服务器端建立联系，也就是我们所说的tcp三次握手
（3）发送请求，也就是把请求报文发送给服务器端
（4）返回响应，服务器端再将响应报文发送过来
（5)读取页面内容并解析
（6）最终客户端和服务器端断开再请求，也就是TCP的四次挥手

跨域

对于跨域这个问题我个人的理解是这样的，首先，跨域问题的提出是基于同源策略的概念，也就是协议、域名、端口号三者保持一致才允许通信。跨域可以分为数据请求跨域和DOM查询跨域。那么我了解到的常见的跨域方式有以下几种：① 可以使用的jsonp方式，它需要前后端相互配合，原理是使用src本身支持跨域，低版本浏览器也可以使用，缺点是它只支持get方法，且只可以用于传递数据无法进行DOM查询，而且必须要后端配合，安全性低，然而实际工作中很容易遇到后端不提供跨域的情况。②还可以使用CORS设置请求头使其允许跨域，这种方式的优点是支持所有请求方式，也可以进行DOM查询，缺点是早期的浏览器不支持，并且也要求有后端的配合。③还可以使用iframe配合window自带的name属性，这种方式优点是操作简单，不要求后端配合，缺点是name的大小有限制，一般是2M左右。④此外还有h5新增的postMessage方法，通过onmessage的监听来接收数据，好处是使用简单，缺点是早期浏览器不支持。⑤还可以通过修改document.domain来实现跨域，只需要把两个网页的domain设置为一个主域即可，优点也是支持DOM查询，操作简便，缺点是它只适用于相同主域的子域之间进行跨域。

jsonp跨域

它的原理是通过前后端配合实现跨域，运用了script标签的src属性可以跨域引入文件的特性。
前端部分：定义一个函数用于接收参数。并且创建script标签，其中的src 属性引入后台的PHP或其他文件，通过get方式拼接(‘?callback=fn’)传给后台该函数的函数名。
后台部分：后台接收到后返回一个‘调用该同名函数并传入参数’格式的字符串（‘fn([a,b,c])’）,前端接收到该字符串后，自动解析并调用该函数完成参数接收”。

HTTP

http协议：对器客户端和服务器端之间数据传输的格式规范，格式简称为“超文本传输协议”

http原理：

① 客户端的浏览器首先要通过网络与服务器建立连接，该连接是通过 TCP 来完成的，一般 TCP 连接的端口号是80。 建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URI）、协议版本号，后边是 MIME 信息包括请求修饰符、客户机信息和许可内容。② 服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是 MIME 信息包括服务器信息、实体信息和可能的内容。
缺点：
通信使用明文（不加密），内容可能被窃听。
不验证通信方的身份，因此可能遭遇伪装
无法证明报文的完整性，所以可能已经被篡改

Http协议有什么组成？
请求报文包含三部分：
请求行：包含请求方法、URI、HTTP版本信息
请求首部字段
请求内容实体
响应报文包含三部分：
状态行：包含HTTP版本、状态码、状态码的原因短语
响应首部字段
响应内容实体

什么是Http协议无状态协议?怎么解决Http协议无状态协议?

无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息也就是说，当客户端一次HTTP请求完成以后，客户端再发送一次HTTP请求，HTTP并不知道当前客户端是一个”老用户“。可以使用Cookie来解决无状态的问题，Cookie就相当于一个通行证，第一次访问的时候给客户端发送一个Cookie，当客户端再次来的时候，拿着Cookie(通行证)，那么服务器就知道这个是”老用户“。

常用的HTTP方法有哪些？

GET： 用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器
POST：用于传输信息给服务器，主要功能与GET方法类似，但一般推荐使用POST方式。
PUT： 传输文件，报文主体中包含文件内容，保存到对应URI位置。
HEAD： 获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。
DELETE：删除文件，与PUT方法相反，删除对应URI位置的文件。
OPTIONS：查询相应URI支持的HTTP方法。

HTTP请求过程

1.对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址
　2.根据这个IP，找到对应的服务器，发起TCP的三次握手
　3.建立TCP连接后发起HTTP请求
　4.服务器响应HTTP请求，浏览器得到html代码
5.浏览器解析html代码，并请求html代码中的资源（如js、css图片等）（先得到html代码，才能去找这些资源）
　6.浏览器对页面进行渲染呈现给用户

https协议.

是以安全为目标的 HTTP 通道，是 HTTP 的安全版。HTTPS 的安全基础是 SSL。

SSL 协议

位于 TCP/IP 协议与各种应用层协议之间，为数据通讯提供安全支持。
SSL 协议可分为两层：SSL 记录协议（SSL Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL 握手协议（SSL Handshake Protocol），它建立在 SSL 记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。

HTTPS工作原理

①　首先HTTP请求服务端生成证书，客户端对证书的有效期、合法性、域名是否与请求的域名一致、证书的公钥（RSA加密）等进行校验；
②　客户端如果校验通过后，就根据证书的公钥的有效， 生成随机数，随机数使用公钥进行加密（RSA加密）；
③　消息体产生的后，对它的摘要进行MD5（或者SHA1）算法加密，此时就得到了RSA签名；
④　发送给服务端，此时只有服务端（RSA私钥）能解密。
⑤　解密得到的随机数，再用AES加密，作为密钥（此时的密钥只有客户端和服务端知道）
HTTPS 设计目标：
(1) 数据保密性：保证数据内容在传输的过程中不会被第三方查看。就像快递员传递包裹一样，都进行了封装，别人无法获知里面装了什么 。
(2) 数据完整性：及时发现被第三方篡改的传输内容。就像快递员虽然不知道包裹里装了什么东西，但他有可能中途掉包，数据完整性就是指如果被掉包，我们能轻松发现并拒收 。
(3) 身份校验安全性：保证数据到达用户期望的目的地。就像我们邮寄包裹时，虽然是一个封装好的未掉包的包裹，但必须确定这个包裹不会送错地方，通过身份校验来确保送对了地方。
HTTPS 的优点
①　1、使用 HTTPS 协议可认证用户和服务器，确保数据发送到正确的客户机和服务器。
②　2、HTTPS 协议是由SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比 HTTP 协议安全，可防止数据在传输过程中不被窃取、修改，确保数据的完整性。
③　3、HTTPS 是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
HTTPS 的缺点（对比优点）
①　HTTPS 协议握手阶段比较费时，会使页面的加载时间延长近。
②　HTTPS 连接缓存不如 HTTP 高效，会增加数据开销，甚至已有的安全措施也会因此而受到影响。
③　HTTPS 协议的安全是有范围的，在黑客攻击、拒绝服务攻击和服务器劫持等方面几乎起不到什么作用。
④　SSL 证书通常需要绑定 IP，不能在同一 IP 上绑定多个域名，IPv4 资源不可能支撑这个消耗。
⑤　成本增加。部署 HTTPS 后，因为 HTTPS 协议的工作要增加额外的计算资源消耗，例如 SSL 协议加密算法和 SSL 交互次数将占用一定的计算资源和服务器成本。
⑥　HTTPS 协议的加密范围也比较有限。最关键的，SSL 证书的信用链体系并不安全，特别是在某些国家可以控制 CA 根证书的情况下，中间人攻击一样可行。

HTTP 与 HTTPS 的区别：

①　HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
②　HTTP 是不安全的，而 HTTPS 是安全的
③　HTTP 标准端口是80 ，而 HTTPS 的标准端口是443
④　在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
⑤　HTTP 无法加密，而HTTPS 对传输的数据进行加密
⑥　HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书

Http协议中Http1.0与1.1区别？

在http1.0中，当建立连接后，客户端发送一个请求，服务器端返回一个信息后就关闭连接，当浏览器下次请求的时候又要建立连接，显然这种不断建立连接的方式，会造成很多问题。
在http1.1中，引入了持续连接的概念，通过这种连接，浏览器可以建立一个连接之后，发送请求并得到返回信息，然后继续发送请求再次等到返回信息，也就是说客户端可以连续发送多个请求，而不用等待每一个响应的到来。

http2.0特性：

*HTTP2.0中所有加强性能的核心是二进制传输，在HTTP1.x中，我们是通过文本的方式传输数据。
HTTP2.0 使用了HPACK（HTTP2头部压缩算法）压缩格式对传输的header进行编码，减少了header的大小。
HTTP2.0，可以在一个连接里，客户端和服务端都可以同时发送多个请求或回应，而且不用按照顺序一对一对应。

TCP 三次握手、四次挥手

简单来说，客户端传送给服务器建立连接请求，在建立连接请求的同时客户端的发送能力也告知了服务器。服务器判断是否可以客户端创建连接，把服务器接收能力反馈给客户端。
三次握手：具体来说，握手是合作的意思，也就是为了保证安全的情况下建立连接的过程，那三次握手的作用我说一下：第一次握手，客户端发送网络包，服务端收到了。这样服务端就能得出结论：客户端的发送能力、服务端的接收能力是正常的。第二次握手，服务端发包，客户端收到了。这样客户端就能得出结论：服务端的接收、发送能力，客户端的接收、发送能力是正常的。不过此时服务器并不能确认客户端的接收能力是否正常。第三次握手，客户端发包，服务端收到了。这样服务端就能得出结论：客户端的接收、发送能力正常，服务器自己的发送、接收能力也正常。最后三次握手成功了就可以正常安全的传输接收数据了！
四次挥手：而四次挥手顾名思义就是服务器和客户端双方安全的撤出合作关系的过程，也就是取消连接的过程！第一次挥手，客户端停止发送数据，发送网络包，告知服务器我要和你断开连接，之后进入了一个类似等待的状态。第二次挥手，服务器收到断开连接请求包之后，也返回一个包，也进入等待状态，并询问确认断开连接吗？第三次挥手，客户端接收到服务器端的确认指令之后，告知并请求服务器端可以释放断开连接了，于是发送了一个网络包，并再次进入等待（等待一段时间会自动关闭），等待服务器真正的断开释放连接。第四次挥手，服务器端接收到客户端传来的网络包指令，于是发送了释放连接最后的数据包，发送完后服务器进入了关闭状态。这时，服务器端的三次握手和四次挥手才算正真的完成了！

三次握手中第一次可以携带数据吗？

答： 不可以，三次握手还没有完成不能携带数据。

为什么必须要三次握手，两次可以吗？

答： 不可以，
第一次握手：客户端发送网络包，服务端收到了。这样服务端就能得出结论：客户端的发送能力、服务端的接收能力是正常的。
第二次握手：服务端发包，客户端收到了。这样客户端就能得出结论：服务端的接收、发送能力，客户端的接收、发送能力是正常的。不过此时服务器并不能确认客户端的接收能力是否正常。
第三次握手：客户端发包，服务端收到了。这样服务端就能得出结论：客户端的接收、发送能力正常，服务器自己的发送、接收能力也正常。
因此，需要三次握手才能确认双方的接收与发送能力是否正常。

三次握手的目的是什么？

TCP是面向链接的，在面向链接的环境中，开始传输数据之前，在两个中端之间必须先建立一个链接。建立链接的过程可以确保通信双方在发送应用程序数据包之前，都已经准备好了传送和接收数据。并且使通信双方统一了初始化序列号。

三次握手的作用

确认服务器端和客户端的发送及接收能力正常
指定自己的初始化序列号，为后面的可靠传输做准备
如果是https协议，三次握手过程中还会进行数字证书的验证

在第一次握手中指定客户端的初始序列号，这个序列号是固定的吗？

答： 三次握手的一个重要功能就是客户端和服务器端交换ISN,接下来接收数据的时候如何按照序号组装数据，如果ISN是固定的，攻击者就很容易确定后续的确认号，因此为了安全ISN都是动态生成的

TCP 和 UDP 区别

TCP 是一个 面向连接的、可靠的、基于字节流的 传输层协议
而UDP是一个 面向无连接的 传输层协议
具体来分析，和 UDP 相比，TCP 有三大核心特性:
（1）面向连接：
所谓的连接，指的是客户端和服务器的连接，在双方互相通信之前，TCP 需要三次握手建立连接，而 UDP 没有相应建立连接的过程
（2）可靠性：
TCP 花了非常多的功夫保证连接的可靠，这个可靠性体现：一个是有状态，另一个是可控制，TCP 会精准记录哪些数据发送了，哪些数据被对方接收了，哪些没有被接收到，而且保证数据包按序到达，不允许半点差错。这是有状态 。当意识到丢包了或者网络环境不佳，TCP 会根据具体情况调整自己的行为，控制自己的发送速度或者重发。这是可控制
相应的，UDP 就是无状态, 不可控的
（3）面向字节流：
UDP 的数据传输是基于数据报的，这是因为仅仅只是继承了 IP 层的特性，而 TCP 为了维护状态，将一个个 IP 包变成了字节流

为什么有UDP还要有TCP？

UDP为应用程序提供的是一种无连接、不可靠的分组交付。当网络硬件失效或者负担太重时，数据包可能就会产生丢失、重复、延时、乱序的现象。这些都会导致我们的通信不正常。如果让应用程序来担负差错控制的工作，无疑将给程序员带来许多复杂的工作，于是，我们使用独立的通信协议来保证通信的可靠性是非常必要的

什么是TCP协议

传输控制协议TCP是一个面向链接的、可靠的通信协议。 1. 在开始传输前，需要进行三次握手建立链接 2. 可靠性：在传输过程中，通信双方的协议模块继续进行通信 3. 通信结束后，通信双方都会使用改进的三次握手来关闭链接

✅ HTTP 常见状态码

200：请求被正常处理
204：请求被受理但没有资源可以返回
206：客户端只是请求资源的一部分，服务器只对请求的部分资源执行GET方法，相应报文中通过Content-Range指定范围的资源。
301：永久性重定向
302：临时重定向
303：与302状态码有相似功能，只是它希望客户端在请求一个URI的时候，能通过GET方法重定向到另一个URI上
304：发送附带条件的请求时，条件不满足时返回，与重定向无关
307：临时重定向，与302类似，只是强制要求使用POST方法
400：请求报文语法有误，服务器无法识别
401：请求需要认证
403：请求的对应资源禁止被访问
404：服务器无法找到对应资源
500：服务器内部错误
503：服务器正忙

301/302/304区别

301：永久性重定向。从网址A重定向到B后，旧地址A的资源已经被永久地移除了；比如你的网站从 HTTP 升级到了 HTTPS 了，以前的站点再也不用了，应当返回301；
302：临时重定向。旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B；
303：与302状态码功能一样，只是它希望使用GET方法重定向到新的URL上；
304：发送附带条件的请求时，条件不满足时返回，与重定向无关。例如：浏览器缓存中，服务器端资源未改变，可直接使用客户端未过期的缓存；

OSI网络七层模型

①　应用层（报文）：包含用户应用程序和协议；
②　表示层（报文）：主要解决用户信息的语法表示问题，如会话加密与数据压缩、语法表示与连接管理；
③　会话层（报文）：会话链接的恢复与释放、对会话进行分段，同步等
④　传输层（段）：提供端到端之间可靠透明的传输。分段与重组、差错控制及流量控制，保证数据传输的完整性和正确性；
⑤　网络层（分组）：路径的选择，网络连接的多路复用、差错的检测与恢复、排序与流量控制、服务选择；
⑥　数据链路层（帧）：把不可靠信道变为可靠信道，将比特组织成帧，在链路上提供点到点的帧传输，差错检测、流量控制等
⑦　物理层（比特流）：提供物理通路，二进制数据比特流传输、定义机械、电气特性和接口等
五层网络模型
①　应用层：规定应用程序的数据格式，为应用软件提供了很多服务，帮我们实现了HTTP协议，我们只要按照规则去使用HTTP协议；它构建于TCP协议之上；屏蔽了网络传输相关细节。
②　传输层：提供端到端之间可靠透明的传输。分段与重组、差错控制及流量控制，保证数据传输的完整性和正确性；
③　网络层：路径的选择，网络连接的多路复用、差错的检测与恢复、排序与流量控制、服务选择；
④　数据链路层：把不可靠信道变为可靠信道，将比特组织成帧，在链路上提供点到点的帧传输，差错检测、流量控制等
⑤　物理层：提供物理通路，二进制数据比特流传输、定义机械、电气特性和接口等

各层使用的哪个数据交换设备？

①　网关：应用层、传输层（网关在传输层上以实现网络互连，是最复杂的网络互联设备，仅用于两个高层协议不同的网络互连。网关的结构和路由器相似，不同的是互连层，网关既可以用于广域网互连，也可以用于局域网互连）
②　路由器：网络层 （路由选择、存储转发）
③　交换机 ：数据链路层、网络层（识别数据中的MAC地址信息，根据MAC地址进行转发，并将这些MAC地址与对应的端口记录在自己内部的一个地址表中）
④　网桥： 数据链路层（将两个LAN连起来，根据MAC地址来转发帧）
⑤　集线器：物理层（纯硬件设备，主要用来连接计算机等网络终端）
⑥　中继器： 物理层（在比特级别对网络信号进行再生和重定向时，从而使得它们能够在网络上传输更长的距离）

传输层有什么协议

传输层的两大协议：TCP（传输控制协议）UDP（用户数据包协议）
TCP是一个可靠的面向链接的协议，UDP是不可靠的或者说无连接的协议。
可以用打电话和发短信来说明这种关系：
UDP就好似发短信，只管发出去，至于对方是不是空号（网络不可到达）能不能收到（丢包）等并不关心。
TCP好像打电话，双方要通话，首先，要确定对方不是开机（网络可以到达），然后要确定是不是没有信号（），然后还需要对方接听（通信链接）。
传输层功能：
分割并重新组装上层提供的数据流，为数据流提供端到端的传输服务

如何实现流量控制

窗口数决定了当前传输的最大流量。当我们在传输过程中，通信双方可以根据网络条件动态协商窗口大小，调整窗口大小时，即可实现流量控制。（在TCP的每个确认中，除了ACK外，还包括一个窗口通知

get和POST请求

区别一：
get重点在从服务器上获取资源。
post重点在向服务器发送数据。
区别二：
get传输数据是通过URL请求，以field（字段）= value的形式，置于URL后，并用"?“连接，多个请求数据间用”&"连接，如http://127.0.0.1/Test/login.action?name=admin&password=admin，这个过程用户是可见的。
post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的。
区别三：
Get传输的数据量小，因为受URL长度限制，但效率较高。
Post可以传输大量数据，所以上传文件时只能用Post方式。
区别四：
get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等。
post较get安全性较高。
区别五：
get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。
post支持标准字符集，可以正确传递中文字符。

鉴权

认证/授权/鉴权/权限控制/越权（水平/垂直）
1、认证就是识别身份的过程，登陆的过程
2、授权就是分配操作权限，授予权限的过程
3、鉴权就是获取认证信息，校验登陆并获取信息
4、权限控制就是访问控制，校验权限的过程
5、水平越权就是跨用户数据访问，比如用A钥匙开B锁
6、垂直越权就是该用户下权限控制漏洞，比如查询权限可以转账

鉴权有几种

1.HTTP Basic Authentication：用的比较少，一般用在内网系统。
2.session-cookie：一般用在web系统上
3.Token：适用于app鉴权，微信开发平台access token也是差不多这种思路。
4.OAuth：这个是趋势吧，用于接入微信、QQ等第三方平台登录，降低用户使用门槛。

强缓存 协商缓存

为什么需要缓存：

当浏览器访问过后的资源，会被浏览器缓存的本地，当下次在访问页面的时候，如果没有过期，直接读取缓存，加快浏览器的加载效率。
网络请求相较于CPU计算以及页面渲染速度都较为缓慢，故性能优化及加快页面显示都应从网络请求这下手，最大化减少网络请求的体积和数量。

缓存优点：

①　减少了不必要的数据传输,节省带宽
②　减少服务器的负担,提升网站性能
③　加快了客户端加载网页的速度
④　用户体验友好
可被缓存的资源：静态资源(js css img)

缓存机制（流程）：

当客户端请求某个资源时，先根据这个资源的http header判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；强缓存没有命中，客户端会发送请求到服务器端，服务器端通过另一些request header验证这个资源是否命中协商缓存，如果命中，服务器将强求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；如果协商缓存也没有命中，服务器就会将资源发送回客户端。

浏览器缓存分为强缓存和协商缓存：

强缓存：
浏览器控制：后端把需要的资源发过来，附带发送过期时间，浏览器每次取缓存看一下时间到没到。这个就是强缓存。
有两种方式：
绝对时间：后端发资源的时候，直接把过期时间发过来，这就是后端给浏览器请求响应的expires字段；
相对时间：后端给你发有效时长，浏览器自己倒计时，这就是给请求响应的cache-control字段；
协商缓存：
服务器控制：后端把需要的资源发过来，附带它的标识(后端资源变，标识变)。浏览器每次用的时候就拿着和后端存的比一下，不一样了就更新。这个就是协商缓存。
两种方式：
最后修改时间做判断：Last-Modified；
（1）浏览器第一次请求时，给浏览器一个最后修改时间(Last-Modified)；浏览器后面访问自己的缓存时，向后端请求header带着自己存的最后修改时间(If-Modified-Since);后端拿到了，和现在的最后修改时间对比，没变化返回304，时间不一样，就正常返回资源(带着新的修改时间Last-Modified)；这个时候浏览器就接收资源，然后把Last-Modified更新，下一次发If-Modified-Since就用这个；
（2）资源对应的标识字符串来做判断：ETag；
这个就和Last-Modified基本一模一样了，不同的就是它请求资源时header里面用Etag传标识字符串，后端返回唯一标识字符串用的是If-None-Match

cookie和session的区别

1）cookie数据存放在客户的浏览器上，session数据放在服务器上
2）cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session
3）session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
4）单个cookie保存的数*据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie
5）建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中
6）session保存在服务器，客户端不知道其中的信心；cookie保存在客户端，服务器能够知道其中的信息
7）session中保存的是对象，cookie中保存的是字符串
8）session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的

sessionStorage、localStorage和cookie的区别

1）相同点是都是保存在浏览器端、且同源的
2）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
3）存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
4）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
5）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
6）web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
7）web Storage的api接口使用更方便

sessionStorage与页面js数据对象的区别

1）页面中一般的js对象的生存期仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了
2）sessionStorage只要同源的同窗口中，刷新页面或进入同源的不同页面，数据始终存在，也就是说只要浏览器不关闭，数据仍然存在

浏览器本地存储与服务器端存储的区别

1）数据既可以在浏览器本地存储，也可以在服务器端存储
2）浏览器可以保存一些数据，需要的时候直接从本地存取，sessionStorage、localStorage和cookie都是由浏览器存储在本地的数据
3）服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据
4）服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端 ，服务器端也可以保存用户的临时会话数据，服务器端的session机制，如jsp的session对象，数据保存在服务器上
5）服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象，会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期
6）服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分别保存在用户各自的浏览器中，浏览器端一般只用来存储小数据，而非服务可以存储大数据或小数据服务器存储数据安全一些，浏览器只适合存储一般数据

请求头有什么

通用首部字段（请求报文与响应报文都会使用的首部字段）
Date：创建报文时间
Connection：连接的管理
Cache-Control：缓存的控制
Transfer-Encoding：报文主体的传输编码方式
请求首部字段（请求报文会使用的首部字段）
Host：请求资源所在服务器
Accept：可处理的媒体类型
Accept-Charset：可接收的字符集
Accept-Encoding：可接受的内容编码
Accept-Language：可接受的自然语言
响应首部字段（响应报文会使用的首部字段）
Accept-Ranges：可接受的字节范围
Location：令客户端重新定向到的URI
Server：HTTP服务器的安装信息
实体首部字段（请求报文与响应报文的的实体部分使用的首部字段）
Allow：资源可支持的HTTP方法
Content-Type：实体主类的类型
Content-Encoding：实体主体适用的编码方式
Content-Language：实体主体的自然语言
Content-Length：实体主体的的字节数
Content-Range：实体主体的位置范围，一般用于发出部分请求时使用

浏览器的多进程和多线程

多线程:　　多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个程序创建多个并行执行。
优点：可以提高CPU的利用率。在多线程程序中，一个线程必须等待的时候，CPU可以运行其它的线程而不是等待，这样就大大提高了程序的效率。
缺点：线程也是程序，所以线程需要占用内存，线程越多占用内存也越多；
多线程需要协调和管理，所以需要CPU时间跟踪线程；
线程之间对共享资源的访问会相互影响，必须解决竞用共享资源的问题；
线程太多会导致控制太复杂，最终可能造成很多Bug；
单线程:　　线程是程序中的一个执行流，每个线程都有自己的专有寄存器(栈指针、程序计数器等)，但代码区是共享的，即不同的线程可以执行同样的函数

什么是进程？

当一个程序开始运行时，它就是一个进程，进程包括运行中的程序和程序所使用到的内存和系统资源。而一个进程又是由多个线程所组成的。

什么是线程？

线程是程序中的一个执行流，每个线程都有自己的专有寄存器(栈指针、程序计数器等)，但代码区是共享的，即不同的线程可以执行同样的函数。

多线程与单线程的区别

生活举例：你早上上班，正要打卡的时候，手机响了。。你如果先接了电话，等接完了，在打卡，就是单线程。如果你一手接电话，一手打卡。就是多线程。2件事的结果是一样的。。你接了电话且打了卡。

前后端分离

前端负责将数据按照产品设计渲染以及调用后端接口实现产品功能，而后端则提供数据接口，功能接口！前后端分离的开发模式是为了让专业的人做专业的事，且现在前端和后端可以通过接口文档实现并行开发，提高开发效率。
核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

前后段分离的优点

（1）最大的好处就是前端JS可以做很大部分的数据处理工作，对服务器的压力减小到最小；
（2）后台错误不会直接反映到前台，错误接秒较为友好；
（3）由于后台是很难去探知前台页面的分布情况，而这又是JS的强项，而JS又是无法独立和服务器进行通讯的。所以单单用后台去控制整体页面，又或者只靠JS完成效果，都会难度加大，前后台各尽其职可以最大程度的减少开发难度。

为什么前后端分离

本质原因：前端开发没有像后端开发那样实现工程化、模块化、可复用化的思想。所以就会出现前后端开发不协调、效率低、扯皮的问题，这很不利于项目开发。因此项目管理者就想办法来解决这种问题，如何解决？→解耦 将前端也工程化、模块化、项目化

如何做到前后端分离

在前后端分离的应用模式中 ，前端与后端的耦合度相对较低。在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。
设计阶段：设计阶段的第一个层面是系统设计，前后端分别对自身架构进行设计，第二层面是接口设计，前后端交互是通过接口来实现的，所以model层面上的接口约定也就极其重要，包括：接口的请求方式、数据类型、返回数据格式等。
开发阶段：前后端开发人员按照先前约定好的接口独立开发，互相透明
测试阶段：要保证前后端独立可测试，前端测试包括：页面、跳转、展示、输入、传参、响应等；后端则包括：数据接口的提供、数据格式、校验、异常、数据一致性、权限问题等。
部署阶段：要保证前后端独立可部署

ajax

它可以在不刷新整个页面的情况下与服务器通信保持原有页面状态。

Ajax的工作原理

即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

Ajax的基本步骤

①　创建XMLHttpRequest对象,也就是创建一个异步调用对象.
②　创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
③　设置响应HTTP请求状态变化的函数.
④　发送HTTP请求.
⑤　获取异步调用返回的数据.
⑥　使用JavaScript和DOM实现局部刷新.

优点：

1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
2.使用异步的方式与服务器通信，不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求

缺点：

①增加了设计和开发时间
②比构建经典Web应用程序更复杂
③AJAX应用程序中的安全性较低，因为所有文件都是在客户端下载的。
④可能出现网络延迟问题
⑤禁用JavaScript的浏览器无法使用该应用程序。
⑥由于安全限制，只能使用它来访问服务于初始页面的主机的信息。如果需要显示来自其他服务器的信息，则无法在AJAX中显示。

封装一个简易的Ajax请求

（１）创建一个XMLHttpRequest对象
（２）初始化一个异步请求
（３）Ajax引擎得到响应数据后，将XHR的ｒｅａｄｙｓｔａｔｅ属性设为４，将响应数据保存在ｒｅｓｏｎｓｅ／ｒｅｓｏｓｅＴｅｘｔ属性上，调用此回调函数
（４）如果状态值不为４，直接结束
（５）如果响应码在２００－２９９之间，说明请求成功，否则失败。
Ajax与一般HTTP请求
Ajax请求是一种特别的HTTP请求，对服务器端来说，没有任务区别，区别在浏览器端，浏览器端只有XHR或fetch发出请求，才是Ajax请求，其他都是非Ajax请求，另外，浏览器接收响应也不同
一般请求：浏览器一般会直接显示响应数据，也就是刷新／跳转页面
Ajax：浏览器不会对界面进行任何更新操作，回车得到的数据，这个数据不会在页面中直接展现出来，需要对数据进行一些操作，才能在页面中体现。

前端性能优化

从前端的角度来说，性能优化可以分为两个方向。从用户角度来看，一个是页面加载的很快，另一个是页面使用起来很流畅。因此，对性能优化的探索，我们可以分为页面加载时间跟页面运行效率两个方向来进行研究。
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

webSocket

websocket是HTML5的一种新协议，允许服务器想客户端传递信息，实现浏览器和客户端双工通信

websocket特点

（1）与http协议有良好的兼容性；
（2）建立在TCP协议之上，和http协议同属于应用层；
（3）数据格式比较轻量，性能开销小，通信高效；
（4）可以发送文本，也可以发送二进制；
（5）没有同源限制，可以与任意服务器通信。

http和websocket的区别

http协议是短链接，因为请求之后，都会关闭连接，下次请求需要重新打开链接。websocket协议是一种长连接，只需要通过一次请求来初始化连接，然后所有请求和响应都是通过TCP链接进行通信。

websocket和socket的区别

socket是应用层与TCP/IP协议通信的中间软件抽象层，它是一组接口。而websocket协议是一个完整的应用层协议，柏寒一套完整的API
websocket中常用注解有哪些
@ServerEndpoint 类似与servlet中的 RequestMapping
@OnOpen类似与servlet中的 init（）初始化
@OnClose类似与servlet中的destroy() 销毁
@OnMessage类似于servlet中的service请求 （意思就是发送数据的方式 @doPost() / @doGet() 组合）

Git常用命令

git init : 初始化一个本地的库
git add . :将当前的目录交给git管理
git commmit -m ‘提示信息’ : 提交代码到本地库
git status :查看版本库的状态，什么时候被修改过，但是还没有提交
git diff : 查看当前状态和上一次修改之间的状态
git log: 查看日志
git reset --hard 提交的id号 ：回滚到提交的id号的版本
git reflog :查看曾经使用过的命令
git clone 远程代码库的地址 ：从远程克隆地址

// 重点命令
git branch :查看本地所拥有的分支
git checkout -b 分支名称：创建了一个新的分支，并切换到新分支
git checkout 分支名称： 切换到当前分支
git merge 分支名称：将后面的分支合并到当前分支上
git tag -a ‘名称’ -m ‘值’ ：给当前代码打个标记
git tag : 获取当前本地标记
git push origin 标签名：推送一个标签到远程
git tag -d 标签名 ： 删除本地的标签
git push origin :/refs/tags/标签名 :删除远程的标签

二、VUE

vue优点

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

Vue.js到底是什么？

用于搭建表单项繁多，且内容需要根据用户的操作进行修改的网页版应用

什么是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 来统一管理。

mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷

组件

Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

如何让CSS只在当前组件中起作用？

答：在组件中的style前面加上scoped

组件通信：

vue中子组件向父组件传递数据
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
父组件向子组件传递数据
父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，在子组件中通过props来接收。
兄弟通信
每个vue实例都有一个Event Bus，都支持＄ｏｎ／＄ｅｍｉｔ，可以为兄弟组件的实例之间ｎｅｗ一个vue实例，作为Event Bus进行通信。

vue组件中ｄａｔａ为什么是函数

主要是为了避免组件间的数据相互影响
如果ｄａｔａ是一个对象，那么由于对象是属于引用类型，当我们修改其中一个属性时，会影响到所有vue实例的数据。
如果ｄａｔａ时一个函数，函数返回一个对象，那么每个实例的ｄａｔａ属性都是独立的，不会相互影响。

引入组件步骤

答: 在template中引入组件；
在script的第一行用import引入路径；
用component中写上组件名称。

请说下封装 vue 组件的过程？

答我们搭建一个项目的时候就会创建一个views目录和一个ｃｏｍｍｅｎ目录和一个feature目录，views目录中放页面级的组件，commｅｎ中放公共组件（比如：ｈｅａｄ公共头组件，foot公共底部组件等），feature目录内放功能组件（比如：swipeｒ轮番功能组件，ｔａｂｂａｒ切换组件，ｌｉｓｔ上拉加载更多功能组件）
优点：组件是vue．ｊｓ最强大的功能之一
　　　组件可扩展ｈｔｍｌ元素，封装可重用代码，组件是可重用的vue实例，组件可提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发效率低　难维护　等问题
　　　过程：
　　　（１）使用vue.extend方法创建一个组件
　　　（２）使用vue.component方法注册事件，但我们一般使用脚手架开发项目，这时候每个．ｖｕｅ单文件就是一个组件
　　　（３）另一组件用import导入，并用components中注册，子组件需要数据可以在props中接受定义，而子组件修改数据后，想把数据传递给父组件，可采用emit方法。

单页应用程序

在说单页应用程序之前，先说一下 多页面应用程序。多页面（MPA）就是指一个应用中有多个页面，页面跳转时是整页刷新。
单页应用程序是加载单个Html页面并在用户与应用程序交互时动态更新该页面的web应用程序。顾名思义，单页应用一般指的就是一个页面就是一个应用，当然也可以是一个子应用。单页应用程序中一般交互处理非常多，且页面当中的内容需要根据用户的操作进行动态的变化。
单页web应用的优点：

提供了更加吸引人的用户体验，具有桌面应用的即时性，网站的可移植性和可可访问性。
单页应用的内容改变不需要重新加载整个页面，web更具相应
单页应用没有页面之间的切换，就不会出现“白屏”现象，也不会出现假死并且有“闪烁”的现象
单页应用相对服务器来说压力较小，服务器只需要出数据就可以，不用管展示逻辑和页面的合成，吞吐能力会提高几倍
良好的前后端分离，后端不再负责模板渲染，输出页面工作，后端API通用化
完全的前端组件化开发，不再以页面为单位，更多地采用组件化的思想，代码解构和组织方式更加地规范化，便于修改和调整。

单页web应用的缺点
首次加载耗时比较多
SEO问题，不利于SEO优化，单页页面，数据在前端渲染，就意味着没有SEO
容易造成css命名冲突
页面的导航不可用，如果一定要导航需要自行实现前进，后退。（由于单页面不能用浏览器的前进后退功能，所以需要自己建立起堆栈管理）

渐进式的框架

渐进式代表的含义是：没有多做职责以外的事情，主张较少，可以根据不同的需求选择不同的层级；
vue.js只提供了vue-cli生态中最核心的组件系统和双向的数据绑定。像vuex、vue-router都属于围绕vue.js开发的库。
比如你要使用Augular，就必须强制接受以下的东西：

必须使用它的模块机制
必须使用它的依赖注入
必须使用它的特使形式定义组件（这一点每个视图框架都有，难以避免）

Vue与React/Angular的不同，他就是渐进式的

你可以在原有的系统上面，把一两个组件改用它来实现，当jQuery来用
也可以整个用它来进行全家桶开发， 当Augular来用
还可以用它的视图，搭配你自己设计的整个下层来用
也可以函数式，都可以，他只是个轻量的视图而已，只是做了最核心的东西

v-show和v-if指令的共同点和不同点？

答: 共同点：都能控制元素的显示和隐藏；
不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

v-for和v-if优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，每v-for循环一次都要进行v-if判断，影响性能
解决方案：（１）在外层嵌套temple，在这里进行v-if判断，然后内部进行v-for循环
（２）如果条件出现在循环内部，可以通过计算属性提前过滤掉那些不需要显示的项

vue常用的修饰符

.prevent: 提交事件不再重载页面

.stop: 阻止单击事件冒泡

.self: 当事件发生在该元素本身而不是子元素的时候会触发

.capture: 事件侦听，事件发生的时候会调用

.once: 跟v-once作用类似，只渲染一次，第二次不会执行

vue中 key 值的作用

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
key 管理可复用的元素，提高循环的性能。

的作用是什么?

用来缓存组件，避免多次加载响应的组件，减少性能消耗，简单一点来说，就是从页面１链接到页面２再回退到页面１，这时候不用重新执行页面１的代码，指挥从缓存中加载之前已经缓存的页面１，这样可以减少加载时间及性能消耗
比如：当我们需要频繁切换路由时，这时候可以用keep　alive来达到避免数据的重复请求的目的。

如何获取dom?

答：利用vue提供的API，在ｄｏｍ标签属性上加上一个ref=“domName”，然后通过vue实例的this.$refs.domName来直接获取这个元素的节点。

说出几种vue当中的指令和它的用法？

答：v-model双向数据绑定；
v-for循环；
v-if v-show 显示与隐藏；
v-on事件；v-once: 只绑定一次。

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

答：解析和转换．vue文件，提取其中的逻辑代码　样式代码以及HTML模板，再分别把他们交给对应的loader去处理。
vue文件的一个加载器，将template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

.axios及安装?

答：请求后台资源的模块。npm install axios --save装好，
js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。

.v-modal的使用。

答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件
本质：它负责监听用户输入事件，从而更新数据，并对一些极端场景进行一些特殊处理，v-model会忽略所有表单元素的ｖｕｌｕｅ　checkｅｄ，selected特殊的初始值，它总是将vue实例中的数据作为数据来源，然后输入事件发生时，实时更新vue实例中数据。

vue-cli目录解析：

build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
src: 存放项目源码及需要引用的资源文件。
src下assets：存放项目中需要用到的资源文件，css、js、images等。
src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
src下emit：自己配置的vue集中式事件管理机制。
src下router：vue-router vue路由的配置文件。

vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

第一步：在components目录新建你的组件文件（indexPage.vue），script一定要export default {}

第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’

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

第四步：在template视图view中使用，

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

分别简述computed和watch的使用场景

答：computed:计算属性，它可以帮助我们将模块中的一些稍微复杂的逻辑计算返回到JS代码中，方便理解与修改维护，通过几个数据的变化来影响数据
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子： 购物车商品结算的时候
watch:属性监听器，一般用来监听属性的变化，并做一些逻辑，它通过一条数据的变化来影响数据。
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据

computed和methods

computed访问的时候会直接返回已缓存的结果，而不会像methods一样再次计算。

v-on可以监听多个方法吗？

答：可以，栗子：。

$nextTick的使用

答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

VUE双向数据绑定

vue双向绑定：
把model绑定到view的同时，也将view绑定到model，这样既可以通过更新model来实现view的自动更新，也可以通过更新view来实现model数据的更新。所以当我们使用JS代码更新model时，view就会自动更新，反之，如果用户更新了view，model的数据也自动更新了。

数据双向绑定：
简单的说，在数据的渲染时使用prop渲染数据，将prop绑定到字组件自身的数据上，修改数据时更新自身数据来替代prop，watch子组件自身数据的改变触发事件通知父组件更改绑定到prop的数据。
好处：父组件数据改变时，不会修改存储prop的子组件数据，只是以子组件数据为媒介，完成对prop的双向修改。

VUE事件绑定原理

每一个vue实例都有一个ＥＶｅｎｔｂｕｓ，当子组件被创建时，父组件将事件传递给子组件，子组件初始化的时候使用＄ｏｎ方法将事件注册到内部，在需要的时候使用＄ｅｍｉｔ触发函数，而对原生ｎａｔｉｖｅ事件，使用ａｄｄＥｖｅｎｔＬｉｓｔｅｒ绑定到真实ｄｏｍ元素上。

响应式数据

数据发生变化了，页面也会随之进行渲染，此时这样的数据叫响应式数据。
在vue组件中，data中的数据是响应式数据，计算属性中的数据也是响应式的数据
原理：当一个vue实例创建时，vue会遍历data选项的属性，用object．defineProperty将他们转化为getter／setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化，而每个组件实例都有响应的watcher程序实例，它会在组件渲染的过程中把属性记录为一轮之后，当依赖的setter被调用时，会通知watcher重新计算，从而使它关联的组件得以更新。

vue中添加响应式数据的方式：
（１）ｓｅｔ方法
（２）在data对象中的数据赋值之前添加的数据

单页面应用和多页面应用区别及优缺点

答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

assets和static的区别

相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点
不同点：（１）ａｓｓｅｃｔｓ中文件会经过ｗｅｂｐａｃｋ打包并重新编译，而ｓｔａｔｉｃ中的文件时不会经过编译的，打包后会生成ｄｉｓｔ文件夹
（２）将图片放入在ａｓｓｅｃｔｓ和static中，在HTML页面中都可以使用但在动态绑定中，ａｓｓｅｃｔｓ路径的图片会加载失败。

vue的两个核心点

答：数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。传统的做法是需要手动改变ｄｏｍ来使视图更新，而vue只需要改变数据。
组件系统：应用类UI可以看作全部是由组件树构成的。组件是为了解决页面布局等的一系列问题，而vue中组件分两种　全局组件和局部组件，它提供了强大了页面布局功能。

vue和jQuery的区别

答：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
比如：列表添加一个元素，vue只需要向数据message里面push一条数据就可以完成添加一个ｌｉ标签操作，而jQuery则需要获取ｄｏｍ元素节点，并对ｄｏｍ进行添加一个标签的操作，如果ｄｏｍ结构特别复杂或者添加的元素非常复杂，则代码h会变得非常复杂且阅读性低。

Vue-router跳转和location.href有什么区别

答：使用location.href=’/url’来跳转，简单方便，但是刷新了页面；
使用history.pushState(’/url’)，无刷新页面，静态跳转；
引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

vue slot

答：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

答：根据vue-cli脚手架规范，一个js文件，一个CSS文件。

Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

答：Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

.Vue2中注册在router-link上事件无效解决方法

答： 使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

答: 方法一：只用a标签，不适用button标签；方法二：使用button标签和Router.navigate方法

.axios的特点有哪些

答：从浏览器中创建XMLHttpRequests；
node.js创建http请求；
支持Promise API；
拦截请求和响应；
转换请求数据和响应数据；
取消请求；
自动换成json。
axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。

.params和query的区别

答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据
params刷新 会 丢失 params里面的数据。

vue初始化页面闪动问题

答：使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
首先：在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题，则在根元素加上style=“display: none;” :style="{display: ‘block’}"

vue更新数组时触发视图更新的方法

答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
vue常用的UI组件库
答：Mint UI，element，VUX

vue修改打包后静态资源路径的修改

答：cli2版本：将 config/index.js 里的 assetsPublicPath 的值改为 ‘./’ 。
build: {
…
assetsPublicPath: ‘./’,
…
}
cli3版本：在根目录下新建vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）
module.exports = {
publicPath: ‘’, // 相对于 HTML 页面（目录相同） }

生命周期函数面试题

什么是 vue 生命周期？有什么作用？

答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。

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

答：beforeCreate， created， beforeMount， mounted

简述每个周期具体适合哪些场景

答：
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

.created和mounted的区别

答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

vue获取数据在哪个周期函数

答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

请详细说下你对vue生命周期的理解？

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和\ast \ast 数据对象\ast \ast data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

vue路由面试题

1.mvvm 框架是什么？
答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

.vue-router 是什么?它有哪些组件

答：vue用来写路由一个插件。router-link、router-view

active-class 是哪个组件的属性？

答：vue-router模块的router-link组件。children数组来定义子路由

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

答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。

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

答：三种，
第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子
第三种：单独路由独享组件

.$route 和 $router 的区别

答：$router是VueRouter的实例，在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

.vue-router的两种模式

答:hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。

.vue-router实现路由懒加载（ 动态加载路由 ）

答:三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

vuex常见面试题

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

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

.vuex有哪几种属性？

答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

不用Vuex会带来什么问题？

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

.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

ajax、axios、fetch之间的详细区别以及优缺点

Ajax：

是对原生XHR的封装，为了达到我们跨越的目的，增添了对JSONP的支持。经过这么多年的更新维护，不得不承认它已经很成熟，能够满足我们的基本需求，但是随着react,vue新一代框架的兴起，以及ES规范的完善，更多API的更新，它逐渐暴露了自己的不足

针对MVC的编程设计,不符合现在前端MVVM的趋势
基于原生的XHR开发，XHR本身的架构不够清晰
JQuery较大，单纯使用ajax却要引入整个JQuery非常的不合理
虽然axios不支持jsonp，但是可以通过引入jsonp模块来解决
Axios：

Axios本质就是对原生XHR的封装，增加了Promise的实，符合最新的ES规范，从它的官网上可以看到它有以下几条特性：

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF（请求中携带cookie）
提供了一些并发请求的接口（重要，方便了很多的操作）
Axios既提供了并发的封装，体积也较小，也没有下文会提到的fetch的各种问题，当之无愧是现在最应该选用的请求的方式。

fetch：
号称是AJAX的替代品，fetch是基于原生的XMLHttpRequest对象来实现数据请求的，同时也是基于Promise实现链式调用的。它的好处在：

（１）符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
（２）是一种更好更方便的写法，诸如：
使用 await 后，告别面条式调用，将异步写成同步，

坦白说，Jquery还是Axios都已经将xhr封装的足够好，使用起来也足够方便，但是Fetch还是得到很多开发者的认可，说明它还是存在很多优势的：

更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式
跨域处理（mode为"no-cors"）
但是在使用fetch的时候，也会遇到了一些问题：

fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
fetch默认不会带cookie，需要添加配置项fetch(url, {credentials: ‘include’})
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
fetch没有办法原生监测请求的进度，而XHR可以
所有版本的 IE 均不支持原生 Fetch，fetch-ie8 会自动使用 XHR 做 polyfill。但在跨域时有个问题需要处理。IE8, 9 的 XHR 不支持 CORS 跨域，不支持传 Cookie！所以推荐使用 fetch-jsonp