前端面试题总结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）子组件向父组件：

术语：自定义事件
父组件通过$on监听事件，子组件通过$emit触发事件

（3）非父子组件通信（兄弟组件、跨级组件）：

通过事件总线Bus来通信。

另外，还可以通过Vuex来管理多个组件共享的状态，从而实现组件之间的通信。

13、事件修饰符

//事件修饰符
    .stop 阻止单机事件冒泡
    .prevent 阻止默认行为（比如 @submit.prevent 会阻止提交后刷新页面）
    .capture 添加事件侦听器时使用捕获模式
    .self 只有事件在元素本身（而不是子元素）触发时触发回调
    .once 只触发一次（组件也适用）
    .key 触发事件的按键
    .native 原生点击事件
//v-model 修饰符
    .lazy在输入框中，默认是在input事件中同步输入框的数据，使用 lazy修饰符会转变为在change事件中同步（失去焦点或按回车才更新）。
    . number将输入转换为Number类型，默认是String
    .trim 自动过滤输入的首尾空格

14、更多vue合集转载 2022年vue面试题总结 - 简书vue 中 data 为什么是一个函数 vue 组件的通信 vuex 的原理 vue 生命周期 v-if 与 v-for 的优先级 v-if 和 v-show 的区别 vue...https://www.jianshu.com/p/af9ee4f2ce7f15、vue中实例与组件的区别

1.vue实例有el指定挂载元素，组件没有，因为组件也是通过调用在渲染页面，直接通过调用组件名渲染；
2.vue实例中data属性：data:{“name”:“aa”,“age”:18},
组件中的data属性：data(){ return{“name”:“aa”,“age”:18} },
3.vue实例的html元素是直接渲染到页面中，而组件的html元素是定义在template上，通过调用再渲染到页面

16、vue怎么取消事件绑定？

Vue 事件绑定与解绑_“玫瑰无原则 ”的博客-优快云博客_vue解绑事件

语法

解绑一个自定义事件：this.$off('事件名称') //字符串形式
 
解绑多个自定义事件：this.$off([ '事件1', '事件2'])   //数组形式
 
解绑所有自定义事件：this.$off()   //无参
        
        
组件实例对象销毁，此组件身上的自定义事件全部失效
 
vm 实例对象销毁， vm的所有 组件实例对象 身上的自定义事件全部失效

实例 

mounted() {
      console.log(this.$refs.student.$on("aaa", this.getStusentName));
  },
 
beforeDestroy() {
     this.$off("aaa");
}

17、VUEX怎么修改state数据？可以直接用.state修改吗？

VUEX怎么修改state数据？_班花亡命天涯的博客-优快云博客_vuex修改state的值

我们知道在VUEX中获取state数据可以通过this.$store.state.变量名进行获取，那么按常理来说，要想修改这个变量我们重新给他赋个值就行了。

this.$store.state.helloWorld = "你好世界"

官方不建议这么做，因为直接赋值的话我们VUEX无法对这个变量进行跟踪，无法得知state中的helloWorld变量在哪里被修改了；所以下面我们使用官方推荐的方案。首先我们来到VUEX所在的入口文件中，写入mutations对象

18、computed、watch的区别

computed用于计算产生新的数据，有缓存；method没有缓存。

watch 用于监听现有数据。

19、HTMLCollection和NodeList区别

Node和Element：DOM是一棵树，所有的节点都是Node

HTMLCollection 是element的集合

NodeList是Node集合

20、vue的通信方式

props 父组件传递子组件

$emit 子组件传递父组件

event event.on / event.off 不相关组件传递

$attrs  是props和emit的后补

v-bind 传递所有参数（一层一层传递）

$parent 获取父节点的属性和方法

$ref 获取子节点的属性和方法

provide、inject 用于跨级传参（一级传三级等等）

—— 跨级传响应式，则用函数的方式；传死数组，则使用对象的形式

21、vuex中mutation、action的区别？

mutation：原子操作，必须同步代码；

action：可包含多个mutation;包含异步代码

两者是层级关系

22、js严格模式有什么特点

开启严格模式 ‘use strict’ (用于生产环境、线上）

特点：
1、全局变量必须声明；
2、禁止使用with;
3、创建eval作用域；
4、禁止this只想window call()可以改变this指向；
5、函数传参不能重名

23、http跨域请求时，为何发送options请求？

options请求是跨域请求之前的预检查
浏览器自行发起的，无需我们干预
不会影响实际的功能

附加：
浏览器同源策略（不可以跨域）
同源策略一半限制Ajax网络请求，不能跨域请求serve
不会限制<link>、<script>、<iframe>、<img> 加载第三方资源

解决跨域：
JSONP跨域方法，利用<script>
CORS配置允许跨域（服务端）

24 、JS基本数据类型？

String、Number、Undefined、Null、Obejct、Boolean、Symbol、BigInt（ES10）

25、null 与undefined 的区别？

声明变量默认的是undefined；
一般设置对象的初始值为null,非对象为undefined；
null是关键字，undefined不是

typeOf（null） = Object;
typeOf(NaN) = number;
注意：NaN表示一个不能表示的数字，但NaN是一个number型

26、0.1+0.2为什么不等于0.3？

浮点数的精度不准，0.1在存储的时候是以二进制的形式，实际上二进制并不完全等于0.1，是近似值取为0.1，在进行算术运算时，会先转为二进制再相加，所得到的的结果是0.300000000000004，所以四舍五入，(0.1+0.2).toFixed(2) = 0.3

27、let、const、var的区别

let是es6提出来的变量声明方法，有块级作用域的概念，不可重复声明。

const是声明一个指定的变量，一旦声明就不可被改变。

var是ES5以前使用的变量声明方法，全局作用域，有变量提升，可重复声明。

28、说说箭头函数和普通函数的区别

箭头函数写法简洁

不可作为构造函数

this指向，跟函数定义的作用域有关，一般指向外层对象

当只有一条可执行语句的时候，可省略花括号

29、你对json怎么理解的？

json是一种数据交换格式，可以是对象也可以是数组

json-js对象 JSON.parse(str)

js对象-json JSON.stringify(obj)

30、unicode和utf8区别？

unicode是一个字符集

utf8是一种编码方式，uft8是unicode的实现方法之一（还可以是uft16、utf32）

31、DOM和BOM区别？

DOM是Document Object Model 文档对象模型，对浏览器内容进行操作，比如document.getElementByID

BOM是Browser Object Model 浏览器对象模型，对浏览器进行操作，比如：键盘上下键、回车键等等。

32、原型、原型链的理解？

对象都有原型，最底层的原型为Object.

对象有原型，原型也是对象，这样子环环相扣，就形成了原型链。

比如：p是person()的实例，是一个Person对象，它拥有一个属性proto，并且proto是一个对象，包含两个属性值constructor和proto.

33、什么是闭包？

定义：函数A中定义了函数B，函数B可以访问函数A的变量，函数B就是闭包。函数的本质就是在一个函数内部创建了另一个函数。

特性：1、函数嵌套函数

2、函数内部可以引用函数外部的参数和变量

3、函数和变量不会被垃圾回收机制回收

作用：

1、好处：保护函数内变量的安全，防止冲突

2、坏处：被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值null。

34、js异步编程的实现方式？

回调函数、promise，asyc/await

promise的作用是啥：解决回调地狱问题

35、并发和并行的区别？

并发：一个cpu处理多个线程，同时进行

并行：多个cpu处理多个线程，同事进行

36、MVVM和MVC的区别？

1、MVVM：model view viewModel 实现数据双向绑定，修改视图会更新数据，修改数据会更新视图，是自动的双向绑定

2、MVC：model view controller 手动控制model和view

37、slot是啥？

默认插槽：当组件有内容需要独立定义

具名插槽：如果一个组件中想使用多个slot

作用域插槽：在定义插槽的时候，可以在插槽上存放数据，把带有数据的插槽叫做作用域插槽。

38、v-model、v-bind？

<input v-model='sth'/>
<input v-bind:value='sth' v-on:input='sth=$event.target.value' />

第一行代码其实只是第二行的语法糖（相同功能下，语法糖更加简洁，比如箭头函数）

 39、h5的新特性

1、拖拽释放（drag and drop）API
2、语义化更好的内容标签（header footer nav aside article section）
3、音频、视频（audio video）API
4、画布（Canvas）API
5、地理（Geolocation）API
6、localstorage 和 sessionstorage 缓存方式
7、表单控件（calendar date time email ul search）
8、新技术（webworker websocket Geolocation）

40、h5移除特性

1、纯表现元素：basefont font big center s tt u strike
2、对可用性有负面影响的元素：frame frameset noframes 

41、浏览器缓存

localstorage（本地存储）则以文件的方式存储在本地,永久保存；
sessionstorage( 会话存储 ) ,临时保存。
vuex存储在内存，vuex的数据刷新页面会丢失。
localStorage和sessionStorage只能存储字符串类型

 42、vue-router的导航钩子（有7个）

vue-router中有7个钩子函数，主要分3类：

全局钩子
前置守卫：router.beforeEach；
后置守卫：router.afterEach；
全局解析守卫：router.beforeResolve；

注意：全局解析守卫（router.beforeResolve）是在所有组件内守卫和异步路由组件被解析之后（导航被确认之前）调用。

路由独享钩子
路由独享钩子：单个路由独享的导航钩子，是在路由配置上直接定义的。

beforeEnter（路由独享守卫）；
const router = new VueRouter({
  routes: [
    {
      path: "/setting",
      component: () => import("@/components/setting.vue"),
      beforeEnter: (to, from, next) => {
        console.log("beforeEnter");
        // do something
        next();
      },
    },
  ],
});
钩子函数有三个参数：to、from、next（）
to：router即将进入的路由对象；

from：当前导航即将离开的路由；

next（）：是一个function，进行管道中的一个钩子，如果执行完了，那导航的状态就是 confirmed（确认的），否则为false，终止导航。

组件内导航钩子
beforeRouteEnter：执行时间 ==> 渲染该组件的对应路由被 confirm 之前;
beforeRouteUpdate：执行时间 ==> 当前路由已经改变，但是依然渲染该组件时;
beforeRouteLeave：执行时间 ==> 导航离开该组件的对应路由时;

这三种导航钩子是在路由组件内部直接定义的。

const File = {
  template:`<div>File文件</div>`,
  beforeRouteEnter (to, from, next) {
    // ...do something
  },
  beforeRouteUpdate (to, from, next) {
     // ...do something
  },
  beforeRouteLeave (to, from, next) {
    // ...do something
  }
}

43、vue 中 data 为什么要 return 一个对象？（or：vue中data为什么是一个函数一样的问题）

如果是以对象中的数据返回的话，组件之中会共用同一块内存，在一个组件中修改数据，另一个组件也会受到影响，以函数 return 出去的形式，每次 return 都会重新开辟内存，各个组件中得 data 也就没有任何关系。

44、webpack四个核心概念

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

分享12个Webpack中常用的Loader_小小蛙人的博客-优快云博客

45、keep-alive

缓存，频繁切换页面可以使用，在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。

46、数组去重

1、sort() 排序 利用sort

function qc(arr){
    var arr = arr.sort();
    var arrs = [arr[0]];
    for(let i=1;i<arr.length;i++){
        if(arr[i]!==arr[i-1]){
            arrs.push(arr[i]
        }
    }
    return arrs;
}

2、用sort和splice方法

function qc(arr){
    var arr = arr.sort();
    var arrs = [];
    for(let i=0;i<arr.length;i++){
        if(arr[i]==arr[i+1]){
            arr.splice(i,1);
            arrs = arr
        }
    }
    return arrs;
}

3、用indexOf方法
   
function qc(arr){
    var arr = arr;
    var arrs = [];
    for(let i=0;i<arr.length;i++){
        // 不存在下标时 则push
        if(arrs.indexOf(arr[i]) === -1){
            arrs.push(arr[i])
        }
    }
    return arrs;
}

4、用includes方法（检测数组是否有某个值）

function qc(arr){
    var arr = arr;
    var arrs = [];
    for(let i=0;i<arr.length;i++){
        if(!arrs.includes(arr[i])){
            arrs.push(arr[i])
        }
    }
    return arrs;
}

5、用es6中的set去重

function qc(arr){
    var arr = Array.from(new set(arr));
    return arr
}

运用

var c = qc([1,1,2,3,4,4,6,5,6,9,9,7,8])

47、forEach/map/filter 方法

for循环：break
forEach:没有返回值
map:返回一个数组，适用于需要对数据结构进行重新整理或加工的数组
filter:返回一个符合条件的数组，用来过滤数据，配合return 使用，只保留数组中符合条件内容