前端超高频面试题！

1，前端的话 css里面的伪类和伪元素

2，清除浮动的方式有哪些？

• 回答：第一种方法就是利用我们的BFC原理就是盒子里面即便做了浮动啊，定位啊都不会影响盒子外面的布局 给浮动盒子的父盒子加上一句 overflow：hidden
• 第二种方法：就是给大盒子中再添加一个div标签 然后给个类名 再在这个类名的样式中加一句 left 就可以解决塌陷的问题，而且标签内不需要写什么东西
• 第三种方法：就是给大盒子加个伪元素，但是要让这个伪元素的样式设置成 块级元素 才能实现清除浮动，它的原理和第二种方法一样

3，水平垂直居中的方式有哪些？

• 回答：
• display: flex; 然后设置主轴 侧轴都居中 可以实现块级元素的居中 ，， 行内元素设置的时候需要display：inline-flex
• 块级元素的水平居中有： margin 0 auto，再给个margin-top 大盒子高度的一半减去自身高度的一半， 也可以使用 transform:translateX(); 搭配绝对定位和相对定位实现
• 行内元素： text-align: center; 搭配line-height: ; 来设置垂直居中

4，块级元素和行内元素的区别

• 回答：
• 1，块级元素它可以设置宽高，独占一行，一般有
• 2，行内元素一般是一行显示多个，无法设置宽高，它的宽高只能让内容撑开

5，css中权重优先级

• 回答：
• 最高级的是 ! important
• 第二是 行内样式
• 第三是 id选择器
• 第四是类选择器
• 第五是 标签选择器
• 第六是 继承或者 *号

6，说一下什么是原型 和 原型链

• 原型就是：构造函数通过prototype指向原型对象，而原型对象中的属性和方法被所有实例共享，

• • 在 JavaScript 中，每个对象都有一个原型对象，它可以是 null 或者是另一个对象。原型对象可以看作是一个模板或者蓝图，它包含了可以在实例对象中共享的属性和方法。在创建一个新对象时，会从其原型上继承属性和方法，这种继承关系被称为原型继承。
    原型继承是 JavaScript 中非常重要的概念，它使得 JavaScript 成为一门强大的面向对象的语言。利用原型，我们可以非常方便地实现对象之间的继承，从而实现代码的复用。同时，原型也是 JavaScript 中实现继承的核心机制之一。

• 原型链：

• • 在 JavaScript 中，每个对象都有一个内部属性 [[Prototype]]，它指向该对象的原型。如果我们试图访问一个对象中不存在的属性或方法，JavaScript 引擎会查找该对象的原型，如果在原型上也不存在这个属性或方法，则会继续查找原型的原型，直到找到为止。这个查找的过程就形成了原型链。
  • 原型链是由每个对象的原型所组成的链条，它连接了一个对象到其原型，再连接到该原型的原型，依此类推，一直到达位于原型链顶部的 Object.prototype 对象。这个顶部的对象是所有对象的基础，其中定义了一些常用的属性和方法，例如 toString()、valueOf() 等方法。通过原型链机制，每个对象都可以访问其原型上定义的属性和方法，从而实现了代码的复用和对象之间的继承关系。
  • 它使得对象可以从其原型中继承属性和方法，并且可以在原型链上寻找到需要的属性和方法。

7，知道promise对象是什么吗？ 说一下它的优缺点，也说一下async和await

• • Promise 对象是 JavaScript 中处理异步编程的一种解决方案
  • Promise 对象的最大优点是避免了回调地狱，即避免了多层嵌套的回调函数，使异步编程变得更加易于理解和维护
  • 缺点有：不支持取消：一旦创建了 Promise，就无法取消它。。无法处理同步任务：Promise 在实现异步操作时非常好用，但无法处理同步任务。
  • async：

• • • 它可以让函数返回一个 Promise 对象
    • async 函数内部的错误可以使用 try-catch 进行捕获和处理
    • async 函数内部可以使用同步代码，与普通函数一样。 使用下来就感觉更方便的处理异步代码，代码也更加简介易懂

• • await： await 关键字只能放到 async 函数里面。 2，await关键字放在返回值为promise对象的方法前面，等这个方法执行完才会执行下面的代码

8，说一下 webpack 的打包原理

• 原理：

• • webpack打包就是 将一切视为模块，不管是 html还是css还是js 他们都可以互相引用。第一步是 解析入口文件，第二步是分析依赖模块，第三步是解析和加载模块

• • • 第四步是执行插件，第五步是输出打包结果。但是一些es6新增语法 比如 less,sass,vue文件 就需要 别的处理工具了

9，说一下vue2里面的生命周期，还有里面钩子的细节

• 生命周期：

• • 创造前，创造后，挂在前，挂在后，更新前，更新后，销毁前，销毁后。这几个就是常用的钩子，
  • 一般一些页面一打开就要拿去请求数据的我都是在 created里面拿，它是创建后的钩子，它可以访问data啊，计算属性啊监听啊之类的。
  • 一般我之前的同事都喜欢 在 mounted 里面拿数据 挂在后
  • 在组件缓存的时候 还会出现两个钩子 activated deactivated
  • 借机再拿vue3和它做个对比

10，说一下你对vuex的理解

• 理解

• • 首先在vuex中有 几个属性 1，mutation(放方法的地方),2，state(放数据的，存储变量的地方),3，action(放异步方法的地方，经常在这里放一些公共异步请求)
  • 4，getters(可以对state里面的变量进行过滤，类似于计算属性),5，modules(项目特别复杂的时候可以让每一个模块都拥有自己的 这几个属性 ，更清晰，更方便管理)
  • 在vuex的调用时还做了简化处理，比如辅助函数处理 可以在调用vuex中属性时简化代码清晰明了
  • vuex的一些使用场景：比如存储用户信息啊，存储token啊之类的

11，说一下vue2和vue3的区别--1生命周期的区别--2存储数据的区别

• 区别：

• • 1，vue3对于vue2来说性能优化了，Vue3对虚拟DOM进行了优化，可以调高渲染性能并减少内存占用，他在打包的时候会将没有用到的代码移除掉减少代码体积
  • 2，Vue3是用TS编写的
  • 3，vue2和vue3的生命周期也有点不一样，vue2的创造前创造后，被vue3中的setup代替了，而且vue3中最后两个钩子叫法也变了叫做卸载前和卸载后，其次

• • • vue3的钩子前面都加了on

12，兄弟组件怎么通信

• 兄弟组件可以利用vuex来通信
• 也可以使用Event Bus通信，，使用方法就是 通过$emit触发一个事件，通过$on()方法，监听一个事件，在这个方法里处理数据

13，vue怎么自定义写一个过滤器

• 回答:

• • 我们可以通过Vue.filter()方法来注册一个自定义过滤器。里面放着两个参数 一个是过滤器的名称，一个是函数而这个函数里也有一个参数 这个参数就是传进来的
  • 参数，对该值进行处理后返回处理结果。
  • 使用过滤器的时候 双大括号包起来 里面放着 过滤器名 | 要传进去的参数 ------- { {过滤器名 | 传进去的参数 }}

14，说一下 keep-alive---1 keep-alive有什么限制

• keep-alive 是组件缓存，触发组件缓存后 会多出两个钩子，一个是activated 一个是 deactivated
• 它的使用方法就是 将要缓存的组件包裹起来
• 它的限制： 他只能缓存动态组件，， 可能会导致内存泄漏，也有可能影响渲染

15，http和websocket的区别 和使用场景

• 区别：

• • 1，http属于短连接 每次发送请求都会简历一个短连接，请求玩会立即关闭连接
  • websocket属于长连接 在建立连接后，客户端和服务器会保持连接状态，双方可以随时向对方发送数据，连接关闭时才会关闭
  • 消息格式也是不一样的，http的消息格式是固定的，而websocket的消息格式是 客户端和服务器可以自由发送消息格式

• 使用场景：

• • http常用于 客户端向服务器发送请求，数据传输完毕就会断开连接
  • websocket常用于 聊天室啊，通讯场景啊，且使用它的时候要考虑兼容新问题，一些低版本浏览器是不支持websocket的

16，你对跨域是怎么了解的

• 跨域就是同源策略的保护机制，当一个页面去请求另一个页面的资源的时候，端口，域名，协议任意一个不同 就会跨域，
• 解决跨域的方法 可以通过CORS，JSONP，代理等方式，
• 其中JSONP是一种动态生成<script>标签实现跨域请求的方法，
• CORS就是一种允许网页跨域服务器发起ajax请求，CORS的实现是需要设置相应的相应头来控制允许跨域规则的，这个相应头英文太长了 在跨域报错里面可以看到A开头的

17，代理怎么实现

• 代理的实现：

• • 代理服务器解决跨域问题， 在代理服务器上搭建一个服务器，监听前端请求，在服务器端捕获前端请求，并将请求转发到目标服务器上，目标服务器接收到请求后，将响应结果返回给代理服务器

18，前后端之间有什么安全问题

• XSS（跨站脚本前后端之间存在多种安全问题，以下是其中一些常见的安全问题
• 敏感信息泄露：前端代码中存储了一些敏感信息，例如加密算法的密钥、API 接口的访问密钥等，在未经加密处理的情况下，这些信息可能被恶意攻击者获取，从而对系统造成威胁。

19，说一下vue路由的动态路由

20，说一下支付流程

• 就说，要做支付是需要前端+后端一起的，后端需要先申请不同支付的sdk，比如微信的、比如支付宝的sdk，然后后端再写好对应的接口。前端在界面上提供支付宝、微信等选择界面，用户点哪个就调用哪个对应的接口。然后由后端接口生成订单号返回给前端。前端再调用对应的支付api，等用户输入完密码得到完成的回调，如果是成功支付显示支付成功页面。并把数据传递给后端做记录，如果失败则传递支付失败页面

21，说一下let const var 的区别 const 可以定义一个不固定的对象吗

• let const var的区别：

• • let用于定义 可以修改的变量，它的作用域是块级的
  • const 一般用于定义常量 的变量，就是不会去改变的变量
  • var声明的变量作用域是函数级的，而let和const声明的变量作用域是块级的。
  • var声明的变量可以多次声明而不会报错，而let和const声明的变量只能声明一次，重复声明会报错。

22，封装过哪些自定义组件

• 通用类的有：按钮组件呀，弹窗组件啊，下拉选项组件等。可以在多个页面使用
• UI组件类：如轮播图啊，导航啊，列表等
• 功能组件：图片上传组件啊，地图组件等

23，说一说websocket 和它是怎么实现的？和它里里面有哪些API

• WebSocket是一种基于TCP协议的全双工通信协议，它在建立连接后，服务器端和客户端都可以主动向对方发送和接收数据，实现了实时、高效、双向的网络通信。由于WebSocket是一种标准化协议，不仅可以在Web应用中使用，也可以在其他应用中使用，如移动应用、桌面应用等。
• 实现：

• • WebSocket的实现主要是通过HTTP协议进行握手，然后升级为WebSocket协议

• 里面有哪些API

• • 1，WebSocket：表示一个WebSocket连接，通过它可以发送和接收数据。
  • 2，onopen：WebSocket连接建立成功后的回调函数。
  • 3，close：关闭连接的方法。
  • 还有一些接受信息，发送消息时的回调函数

24，说一下pinia

• 区别：

• • 更小更快：Pinia的代码量比Vuex少，性能也更好。
  • 更简单：Pinia的API相对简单，学习和使用起来更容易。
  • 更安全：Pinia使用了强类型，可以提供更好的类型检查和错误提示。
  • pinia对比 vuex来说 它的API更少，直观，简单， 但vuex的就相对来说比较复杂且强大
  • 模块化的支持不同：在 Vuex 中，所有的状态都存储在一个单一的 store 对象中，而 Pinia 支持将状态分组成多个 store 模块，使得应用更加模块化和可维护。

25，说一下宏任务和微任务都有哪些 有什么区别？

• 常见的宏任务有： setTimeout，setInterval，DOM事件，AJAX请求
• 常见的微任务有：Promise，async/await
• 有什么区别？

• • 它们的区别在于执行时机和优先级不同, 微任务执行时机比宏任务早， DOM渲染执行时机也比宏任务早----- 微任务> DOM渲染 > 宏任务

26，说一下什么是vue.use