郑州面试题
郑州朋友的面试题, 还是有很多太基础的
# Axios 的理解优缺点及应用
安全性更高，客户端支持防御 XSRF 就是让你的每个请求都带一个从 cookie 中拿到的 key, 根据浏览器同源策略，假冒的网站是拿不到你 cookie 中得 key 的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略
# VUE 相关
# 父子组件的生命周期顺序
在父组件执行 beforeMount 阶段后， 进入子组件的 beforeCreate、 Created、 beforeMount 阶段， 这些阶段和父组件类似， 按下不表。
beforeMount 阶段后， 执行的是 Mounted 阶段， 该阶段时子组件已经挂载到父组件上， 并且父组件随之挂载到页面中。
加载渲染过程 父 beforeCreate - > 父 created - > 父 beforeMount - > 子 beforeCreate - > 子 created - > 子 beforeMount - > 子 mounted - > 父 mounted
子组件更新过程 父 beforeUpdate - > 子 beforeUpdate - > 子 updated - > 父 updated
销毁过程 父 beforeDestroy - > 子 beforeDestroy - > 子 destroyed - > 父 destroyed
# 你能谈谈你对 keep - alive 了解么
keep - alive 是一个抽象组件： 它自身不会渲染一个 DOM 元素， 也不会出现在父组件链中；
使用 keep - alive 包裹动态组件时， 会缓存不活动的组件实例， 而不是销毁它们
场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表， 由列表页面进入数据详情页面， 再返回该列表页面， 我们希望： 列表页面可以保留用户的筛选（ 或选中） 状态。 keep - alive 就是用来解决这种场景。 当然 keep - alive 不仅仅是能够保存页面 / 组件的状态这么简单， 它还可以避免组件反复创建和渲染， 有效提升系统性能。 总的来说， keep - alive 用于保存组件的渲染状态
include 定义缓存白名单， keep - alive 会缓存命中的组件；
exclude 定义缓存黑名单， 被命中的组件将不会被缓存；
max 定义缓存组件上限， 超出上限使用 LRU 的策略置换缓存数据
# Foreach 和 map 的区别
# Promise 的理解
# 防抖
原理：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。
适用场景：
- 按钮提交场景：防止多次提交按钮，只执行最后提交的一次
- 搜索框联想场景：防止联想发送请求，只发送最后一次输入
// 防抖1
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}
// 防抖2
function debounce2(func, wait) {
let timer;
return function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(func, wait);
};
}
// 防抖3
function debounce3(func, wait, mustRunDelay) {
let timer;
let t_start;
return function() {
return new Promise((resolve, reject) => {
let context = this;
let args = arguments;
let t_curr = +new Date();
clearTimeout(timer || 0);
if (!t_start) {
t_start = t_curr;
}
if (t_curr - t_start >= mustRunDelay) {
const data = func.apply(context, args);
resolve(data);
t_start = t_curr;
} else {
timer = setTimeout(function() {
const data = func.apply(context, args);
resolve(data);
}, wait);
}
});
};
}
# 节流
原理：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
适用场景
- 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
- 缩放场景：监控浏览器 resize
- 使用时间戳实现: 使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。
// 节流
function throttle(func, wait) {
let context, args;
let previous = 0;
return function() {
let now = +new Date();
context = this;
args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
};
}
# 斐波那契数列
function fibonacci(n) {
if (n == 0) {
return 0;
}
if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
# css
1） 伪类(pseudo - classes)
其核⼼ 就是⽤ 来选择 DOM 树之外的信息, 不能够被普通选择器选择的⽂ 档之外的元素，⽤ 来添加⼀ 些选择器的特殊效果。⽐ 如: hover: active: visited: link: visited: first - child: focus: lang 等 由于状态的变化是⾮ 静态的， 所以元素达到⼀ 个特定状态时， 它可能得到⼀ 个伪类的样式； 当状态改变时， 它⼜ 会失去这个样式。 由此可以看出， 它的功能和 class 有些类似， 但它是基于⽂ 档之外的抽象， 所以叫 伪类。 2） 伪元素(Pseudo - elements)
DOM 树没有定义的虚拟元素 核⼼ 就是需要创建通常不存在于⽂ 档中的元素，⽐ 如::before::after 它选择的是元素指定内容， 表示选择元素内容的之前内容或之后内容。 伪元素控制的内容和元素是没有差别的， 但是它本身只是基于元素的抽象， 并不存在于⽂ 档中， 所以称为伪元素。⽤ 于将特殊的效果添加到某些选择器
# 浅拷贝 深拷贝
浅拷贝： 浅拷贝通过 ES6 新特性 Object. assign() 或者通过扩展运算法... 来达到浅拷贝的目的， 浅拷贝修改 副本， 不会影响原数据， 但缺点是浅拷贝只能拷贝第一层的数据， 且都是值类型数据， 如果有引用型数据， 修改 副本会影响原数据。
深拷贝： 通过利用 JSON. parse(JSON. stringify()) 来实现深拷贝的目的， 但利用 JSON 拷贝也是有缺点的， 当要拷贝的数据中含有 undefined / function / symbol 类型是无法进行拷贝的， 当然我们想项目开发中需要 深拷贝的数据一般不会含有以上三种类型， 如有需要可以自己在封装一个函数来实现。
# 陈述输入 URL 回车后的过程
- 读取缓存： 搜索自身的 DNS 缓存。(如果 DNS 缓存中找到 IP 地址就跳过了接下来查找 IP 地址步骤， 直接访问该 IP 地址。)
- DNS 解析: 将域名解析成 IP 地址
- TCP 连接： TCP 三次握手， 简易描述三次握手 客户端： 服务端你在么？ 服务端： 客户端我在， 你要连接我么？ 客户端： 是的服务端， 我要链接。 连接打通， 可以开始请求来
- 发送 HTTP 请求
- 服务器处理请求并返回 HTTP 报文
- 浏览器解析渲染页面
- 断开连接： TCP 四次挥手
关于第六步浏览器解析渲染页面又可以聊聊如果返回的是 html 页面 根据 HTML 解析出 DOM 树 根据 CSS 解析生成 CSS 规则树 结合 DOM 树和 CSS 规则树， 生成渲染树 根据渲染树计算每一个节点的信息 根据计算好的信息绘制页面
