前端面试题总结2022

自己闲暇时间整理的一份题，不对之处望大佬们指点啦~

持续更新中....

1、父子组件生命周期

父beforeCreate - 父created - 父beforeMount - 子beforeCreate - 子create - 子beforeMount - 子mounted - 父mounted - 父beforeUpdate - 子beforeUpdate - 子updated - 父update - 父 beforeDestroy - 子beforeDestroy - 子destroyed - 父destroyed

2、路由两种模式

路由器(vue-router)有两种工作模式:hash模式和history模式,默认是hash模式。

3、路由拦截器

通过vue-router的beforeEach方法进行每一次路由访问的拦截，判断拦截信息中是否有鉴权要求或者权限校验，以此来实现鉴权。
如果权限不够，访问的路径虽然存在但会被拦截。

4、路由传参方式

地址拼接传参，query传参通过path跳转，params传参通过name跳转

1、接收参数的方式不同
    ==>this.$route.params/this.$route.query
2、query的方法传参url路径会显示传递的参数
3、params刷新页面会丢失参数
4、params是用name属性，query是用path属性来编写传参地址

5、加载10000条数据怎么才不卡？

6、offsetHeight、clientHeight、scrollHeight的区别？

offsetHeight /offsetWidth：padding+border+content

clientHeight / clientWidth：padding+content

scrollHeight /scollW：padding+实际内容尺寸

7、for...in、for...of、for...await...of的区别？

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

for await..of 用于遍历多个 Promise

8、节流防抖有什么区别？分别用于什么场景？

节流：限制执行频率，有节奏的执行

防抖：限制执行次数，多次密集的出发只执行一次

节流关注“过程”，防抖关注“结果”

使用场景：

防抖，可使用在输入框连续输入时，到输入最后一个时才触发；

节流：连续点击按钮时首次触发，后面连续点击就不会再次触发。

9、请描述TCP三次握手和四次挥手

建立TCP连接

a、先建立连接（确保双方都有收发消息的能力）

b、在传输内容（如发送给一个get请求）

c、网络连接是TCP协议，传输内容是HTTP协议

三次握手 - 建立连接

Client发包，Server接收。Server：有Client要找我

Server发包，Client接收。Client：Server已经收到消息了

Client发包，Server接收。Server：Client要准备发送了

四次挥手 - 关闭连接

Client发包，Server接收。Server：Client以请求结束

Server发包，Client接收。Client：Server已收到，我等待他关闭

Server发包，Client接收。Client：Server此时可以关闭连接了

Client发包，Server接收。Server：可以关闭了（然后关闭连接）

10、Ajax Fetch Axios的区别？

Ajax，一种技术统称

Fetch，一个原生api

Axios，一个第三方库

11、箭头函数的缺点，哪里不能用箭头函数？

不能用箭头函数的场景：

a、对象方法

b、对象原型

c、构造函数

d、动态上下文的回调函数

e、Vue生命周期method

12、Vue组件通讯方式有几种？尽量说全面。

1.常见组件通信场景大致有：

（1）父子组件通信

（2）非父子组件通信（兄弟、跨层级）

2.组件间通信方式有：

（1）父组件向子组件：

父组件通过props传递数据，包括一般数据、函数

（2&