vue生命周期
加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount ->
子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
vue-router 有哪几种导航钩子?
三种全局导航钩子 router.beforeEach(to, from, next), router.beforeResolve(to, from, next), router.afterEach(to, from ,next)组件内钩子 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 单独路由独享组件beforeEnter
vue 的双向绑定的原理是什么(常考)
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter， 在数据变动时发布消息给订阅者，触发相应的监听回调。 具体步骤： 第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话， 给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
第二步：compile 解析模板指令，
将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，
一旦数据有变动，收到通知，更新视图
第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:在自身实例化时往属性订阅器(dep)里面
添加自己自身必须有一个 update()方法待属性变动 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，
则功成身退。第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，
通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；
视图交互变化(input) -> 数据 model 变更的双向绑定效果。
axios取消请求
原理 将正在请求的ajax放入一个数组中 名称为url+请求方式+参数字符串=>[{ajaxName:'http://crm/login&post',fun:xxx}]
在请求的时候先去这个数组中找是否有这个ajax，如果有就调用这个ajax的fun函数，取消了上一次请求，如果没有就 在这个数组中添加上这个ajax
结束的时候将这个ajax从数组中清除了
import axios from 'axios';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';
let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken;//重要代码
let removePending = (ever) => {
for(let index in pending){
if(pending[index].ajaxName === ever.url + '&' + ever.method) { //当当前请求在数组中存在时执行函数体
pending[index].fun(); //执行取消操作
pending.splice(index, 1); //把这条记录从数组中移除
}
}
}
//http request 拦截器
axios.interceptors.request.use(
config => {
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/x-www-form-urlencoded'
}
// ------------------------------------------------------------------------------------
removePending(config); //在一个ajax发送前执行一下取消操作
config.cancelToken = new cancelToken((c)=>{//重要代码
//c是一个回调函数，就是取消ajax的函数！ajax就是这么定义的
// 这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式最好把参数也加上
// 因为会出现一种 比如配置薪酬模板 同一个接口只是参数不同但是一进页面需要将四种模板的数据全部加载出来
pending.push({
ajaxName: config.url + '&' + config.method,
fun: c
});
// 如果不是 封装的话 就为某一个 请求单独写的话 那就需要 用一个全局变量接住这个c 然后在某个函数中调用它
});
// -----------------------------------------------------------------------------------------
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 拦截器
axios.interceptors.response.use(
response => {
// ------------------------------------------------------------------------------------------
removePending(res.config); //ajax响应后 删除数组中的ajax，把已经完成的请求从pending中移除
// -------------------------------------------------------------------------------------------
return response;
},
error => {
return Promise.reject(error)
}
)
xss-csrf
xss是在请求参数中写入一些代码
格式化参数如
比如用户输入：<script>alert("222")</script>，保存后最终存储的会是
<script>alert="222;</script>在展现时浏览器会对这些字符转换成文本内容显示，而不是一段可执行的代码
csrf是拿到用户的cookie在自己的网址上利用cookie去模拟用户发送请求
1利用token校验，
2利用Request Headers 中Referer的值他里面存储了请求是从哪个网址来的 来做一个基本的判断
http-https(http+ssl/tls(数字证书)的组合)
Http与Https的基本概念和他们的区别:
HTTP 标准端口是 80 ，而 HTTPS 的标准端口是 443
HTTP无需认证证书,而https需要认证证书
在 OSI 网络模型中，HTTPS的加密是在传输层完成的,因为SSL是位于传输层的,TLS的前身是SSL,所以同理
简单来说http是用来进行html等超媒体传输的,但是http不安全,为了安全,使用证书SSL和HTTP的方式进行数据传输,也就是HTTPS
Https工作原理：
服务器给客户端传输证书 证书就是公钥里面包含证书的过期时间证书颁发机构等信息
客户端验证证书是否过期等 如果一切正常就生成一个随机值（私钥）然后证书对私钥进行加密，发送给服务器
服务器将消息进行对称加密（简单说就是 将消息和私钥进行混合，只有私钥才能解开消息 正好只有客户端有私钥（安全））发送给客户端
客户端用私钥进行信息解密
HTTP优化
资源内敛 : 资源内联 : 既然每个资源的首次访问都会存在握手等rtt损耗,那么越少数量的资源请求就越好,例如咋一个html中src访问css,不如直接将其这个css集成到html中
图片懒加载 ; 用到的时候在加载,这个已经很普遍了,就不细说了
服务器渲染 : 让服务端先将页面渲染好,在发送给客户端,也可以减少rtt的次数
HTTP1.0-HTTP2.0
http1.0:
无连接,无状态,一次请求一个tcp连接
一个请求接收到响应之后才会接着发送下一个,这也造成了head of line blocking(队头阻塞),
现在的浏览器为了解决这个问题,采用了一个页面可以建立多个tcp连接的方式来进行
http1.1:
持久连接：持久连接新增加了connecion字段,里面可以设置keey-Alive(保持连接)或者close(关闭长连接),
避免了每次请求都会新建连接,提高了网络的利用率,
请求管道化(有一些缺陷)：http1.1的管道:可以发送很多请求到服务端,但是服务端必须要按顺序返回响应,
由此可以看出http1.1的管道只是把客户端的请求序列变成了服务端的响应序列,还是有问题,很多浏览器并不是很支持 ,
增加了host字段,缓存,断点续传
http2.0 : 二进制分帧(多路复用的实现基础), 多路复用,头部压缩
http缓存机制
HTTP1.0
采用Expires头部控制来实现 Expires只能根据绝对时间来刷新缓存内容
HTTP1.0
Cache-Control支持max-age用来表示相对过期时间
另外请求服务器时也可以根据Etag和Last-Modified来判断是否从浏览器端缓存中加载文件，
此时缓存的控制和判断将决定服务器的响应报文中头部内容的状态码200还是304。
具体过程：
第一步：浏览器会先查询Cache-Control (这里用Expires判断也是可以的，如果两者都设置了，则只有Cache-Control的设置生效)
来判断内容是否过期，如果未过期，则直接读取浏览器端缓存文件，不发送HTTP请求，否则进入下一步。
第二步：在浏览器端判断上次文件返回头中是否含有Etag信息，有则带上If-None-Match字段信息发送请求给服务器，
服务端判断Etag未修改则返回304，如果修改则返回200，否则进入下一步。
第三步：在浏览器端判断上次文件返回头中是否含有Last-Modifed信息，有则带上
If-Modified-Since字段信息发送请求，服务端判断Last-Modified失效则返回200， 有效则返回304。
第四部：如果Etag和Last-Modified都不存在，则直接向服务器请求内容。
这就是Cache-Control、Etag 和Last-Modified控制请求缓存的主要过程。
