常见的前端面试题【90道】_前端常见面试题

1.请简单叙述Vue2和Vue3的区别和变化至少说6点

vue2中响应式原理是object.defineProperty；vue3中响应式原理是proxy
vue2中不支持多根节点；vue3中支持多个根节点
main.js文件：vue2中使用的是构造函数，vue3中使用的是工厂函数
指令与插槽：
vue2中使用slot可以直接使用slot，而vue3中必须使用v-slot的形式
v-for与v-if在vue2中v-for指令的优先级较高，不建议一起使用；
在vue3中，只是把当前的v-if当成一个判断语句，不会相互冲突
vue3中移除了v-on.native修饰符
vue3中移除了过滤器
生命周期：
vue3中setUp函数替代了vue2中的beforeCreate和created，vue3中生命周期函数都带有on前缀
vue2中卸载阶段是beforeDestory，destoryed；vue3中卸载阶段是onBeforeUnmount，onUnmounted
碎片化：vue2不支持碎片化，vue3是支持碎片化的
vue2中的数据都是在data(){return{}}中存储的，vue3的数据课方法都定义在setup语法糖中，并统一进行return
父给子传值：props，$refs，自定义事件，provideinject，v-model，vuex，消息订阅与发布vue2中：在父组件中引入子组件地址，然后在上面定义一个子组件标签，并在里面定义一个属性=“要传递过来的值”，子组件通过props接收父组件传递过来的值vue3中：和vue2传值方式一样，在子组件接收的时候也是也是用到了props，但是需要在setup中定义一下，如果不定义props的话会不显示子给父传值：vue2中：通过this.$emit(“名称”,this.data中定义的那个数据)，父组件通过v-on接收，@方法名称=“方法名称"
vue3中，用到了context方法，context.emit(方法的名字，要传入的值)，父组件还是通过v-on接收，@方法名称=“方法名称"
API：
Vue2：选项形API，以vue为后缀的文件，组件状态写在data中，组件方法写在mothods中等，
Vue3：组合式API，将所以的API放到一起，形成高内聚低耦合在状态
在逻辑组织和逻辑复用方面，Composition API是优于Options API
因为Composition API几乎是函数，会有更好的类型推断。
Composition API对 tree-shaking 友好，代码也更容易压缩
Composition API中见不到this的使用，减少了this指向不明的情况
如果是小型组件，可以继续使用Options API，也是十分友好的

2.Vue3中组件通信的方法有些，流程是什么?

父子传值：在vue2中父给子传值用到了:方法=要传递过去的数据，子组件通过props接收父组件传递过来的数据，子传父：子组件通过this.$emite(方法，要传递过去的数据)，父组件通过@方法=方法名称接收；在vue3中父给子传值用到了:方法=要传递过去的数据，子组件通过props接收父组件传递过来的数据，但是在子组件中这个方法要写在setup中，不然不会展示出来，子传父：子组件通过contex(方法，要传递过去的数据)，父组件通过@方法=方法名称接收
Provide和inject传值：用于祖孙传值，这两个是成对出现的，有inject就必须有provide，这个方法不需要知道他的组件是谁，只需要在需要传值的地方写入inject即可将下载provide的地方的数据直接传递过去，当然他也可以用于父子传值，不需要想props那也复杂，也不需要知道父组件是谁，即可立即使用，并把数据接收，传递成功
Vuex传值
Refs传值

3.说说对盒子模型的理解？

盒子模型分为两种，W3C盒子模型，IE怪异盒子模型
盒子模型是由content，border，margin，padding这四部分组成
W3C盒子模型的总宽度是：width+padding+border+margin
总高度是：height+padding+border+margin
也就是说，width/height 不包含padding和border值

IE怪异盒子模型的总宽度是：width+margin
总高度是：height+margin
也就是说，width/height 包含了padding和border值

4.Css的选择器有哪些？优先级?哪些可以继承

Id选择器，class选择器，标签选择器，属性选择器，内联选择器，后代选择器，标签选择器
选择器的优先级是由其特定性决定的。特定性通常由选择器中包含的各种不同类型的选择器组成
Id选择器>class选择器>标签选择器

5.元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

负margin居中
Tranform居中
Flex居中
绝对定位，这个方法最好用，最实用
不确定宽高居中
table-cell居中

6.怎么理解回流跟重绘？什么场景下会触发？

回流：指元素的布局或几何属性发生变化时，浏览器重新计算元素的几何属性和页面布局，这个过程称为回流。回流会使其他的元素的布局也受到影响，可能会引起其他元素的重新布局和回流，导致性能问题。
重绘：指元素的绘制属性发生变化时，浏览器会重新绘制元素的外观，但不会重新布局，这个过程称为重绘。例如，修改元素的颜色、背景颜色、边框颜色等属性都只会引起重绘
添加、删除、修改 DOM 元素。
改变窗口大小，或者滚动页面。
修改元素的样式，如改变元素的颜色、大小、位置等。
读取某些属性，如 offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight 等

7.说说重排和重绘的区别？触发条件有哪些？

重排：指对 DOM 结构进行修改后，浏览器需要重新计算元素的布局和位置，以及页面的几何属性，重新构建渲染树，并进行重新布局。重排是相对耗费时间和性能的操作。
重绘：指对 DOM 结构进行修改后，浏览器需要重新绘制元素的外观和样式，但不需要改变其位置和大小，因为在重排时已经计算好了。重绘是比重排更轻量的操作。
触发条件：
页面初次渲染时；
浏览器窗口大小发生变化；
元素的位置、大小或布局发生变化；
元素的内容发生变化；
元素的样式发生变化；
用户交互事件，如鼠标滚动、点击

8.什么是响应式设计？响应式设计的基本原理是什么？如何做？

Vue2中响应式原理是双向绑定的原则，是在数据获取的时候获取到getter和setter这两个方法，然后对这两个方法进行监听处理，最后在实现之中就实现了响应式原理

Definproperty，不能将数组传入进去，也不能获取到数据发生变化的时候。立即获取到的值，
Definproperty中的data是一次性传值的，用户体验感不好，会使页面加载速度慢，出现卡顿，不动的现象
Proxy可以监听到数组，以及数据进行更改的时的操作，可以获取到添加和修改的操作数据
其次在proxy中，data可以分批次渲染的，这样不会影响性能，也不会影响用户体验
在proxy和defineproperty中都是不可以使用异步操作的

9.如果要做优化，CSS提高性能的方法有哪些？

谨慎使用高性能属性：浮动，定位
尽量减少页面的重排和重绘
空规则的产生的原因一般来说是为了预留样式。去除这些空规则则无疑能减少css文档体积。
属性值为0时，不加单位。
属性值为浮动小数，可以省略小数点之前的0。
标准化各种浏览器前缀，带浏览器前缀的在前。标准属性在后。
不使用@import前缀，它会影响css的加载速度。
选择器优先嵌套，尽量避免层级过深。

10.对前端工程师这个职位是怎么样理解的？它的前景会怎么样

主要负责开发和构建网站、Web 应用程序和移动应用程序的用户界面。前端工程师需要具备一定的编程技能，熟悉 HTML、CSS 和 JavaScript 等前端技术，能够将设计师提供的视觉稿转化为网页或应用程序，并确保用户界面的高度可用性和响应性
主要工作：
开发并优化用户界面，确保良好的用户体验；
实现交互功能，与后端接口进行数据交互；
优化页面加载速度和性能，提升网页的响应速度；
解决不同浏览器和设备间的兼容性问题；
参与产品需求分析、原型设计和技术评审等工作。

11.说说JavaScript中的数据类型？存储上的差别？

JavaScript中的数据类型分为基本数据类型和引用数据类型
基本数据类型：null，string，number，布尔类型，symbol，undefined，其中symbol是es6中新增的特性
引用数据类型统称为object，细分为object，array，date，regexp，function
引用数据类型存储在堆中，基本数据类型存储在栈中
堆栈池存储
栈：存放变量
堆：存放复杂对象
池：存放常量
引用数据类型存储在堆内存中，每个对象在堆内存中有一个引用地址，栈中保护的就是这个对象在堆内存中的引用地址

12.请简单叙述js数据类型判断的方法有哪些？

Typeof方法：typeof是一个操作符，可以判断基本数据类，返回值有null，string，number，布尔类型，symbol，undefined，function，object这几种类型
Instanof方法：一般用来检测引用数据类型，表达式A instancof B，就是判断A是否是B的实例，如果是则返回true，不是就返回False有构造类型判断出数据类型
Constructor方法：Constructor是prototype对象上的属性，指向构造函数object.prototype.toString方法来检查对象类型

13.说说你对闭包的理解？闭包使用场景

闭包就是一个可以读取其他内部变量的函数，函数内可以再次嵌套函数，内部函数可以引用只外层的参数和变量，参数和变量不慌被垃圾回收站机制回收
使用闭包就是为了设置私有属性的方法和变量，闭包的优点是完全可以避免全局变量的污染
缺点：闭包会常驻内存，增大内存的使用率，使用不当的时候也会造成内存的泄漏，在js中，函数就是闭包只有函数才会产生作用域的概念，
闭包的好处：可以读取内部的变量；也可以让变量始终保持在内存中，可以很好的封装私有属性和方法
弊端：由于闭包会在函数中的变量都被保存在内存中，内存消耗增大，会造成网页的性能不佳，然后造成内存泄漏的风险

14.Javascript本地存储的方式有哪些？区别及应用场景？

分为Localstore，cookie，sessionStore这三种
Localstore是浏览器本地缓存，存储容量比较大，能够达到5mb，可以存储很多的数据，页面销毁数据不会丢失，除手动删除之外，他就会永远存在
Cookie是由服务器返回它标记已经过期的时间，经常用于跟踪用户行为等操作，但是它存储的数据量非常小，只有4kb左右
Sessionstore浏览器缓存，存储容量和localstore一样，都可以达到5mb，他们的不同之处在于sessionStore的存储时间，当页面标签页关闭并且销毁时，存储内容就会消失

15.请叙述Vue2和Vue3数据响应式原理的不同？

在vue2中数据响应式原来用到的是object.definprototype，定义变量的时候在data这个函数中去定义一些需要的变量Vue2中响应式原理是双向绑定的原则，是在数据获取的时候获取到getter和setter这两个方法，然后对这两个方法进行监听处理，最后在实现之中就实现了响应式原理
Vue3中数据响应式原理用到的是proxy，如果setup语法糖，那么在script标签下就直接定义就可以了，如果是在写了一个setup函数，那么就需要在这个函数内部去定义，然后返回一个return的返回值，需要将上面定义的变量全部暴露出去
Definproperty，不能将数组传入进去，也不能获取到数据发生变化的时候。立即获取到的值，
Definproperty中的data是一次性传值的，用户体验感不好，会使页面加载速度慢，出现卡顿，不动的现象
Proxy可以监听到数组，以及数据进行更改的时的操作，可以获取到添加和修改的操作数据
其次在proxy中，data可以分批次渲染的，这样不会影响性能，也不会影响用户体验
在proxy和defineproperty中都是不可以使用异步操作的

16.请叙述Vue2和Vue3的diff算法的区别？

vue2中采用的是双指针算法，称之为虚拟dom的精细比较，在每次更新组件的时候，vue会对新旧虚拟节点进行比较，并找出需要更新的节点，然后应用到真实dom上，单某些情况可能会有性能问题
vue3中采用了完全不同的算法，静态提升+预编译，即模板编译阶段将模板转换成渲染函数，直接生成可执行代码，这种方式可以减少运行时的开销，避免由于虚拟节点比较导致的一些额外计算，提高了应用程序的性能
vue3中diff算法的实现也发生了变化，vue3中diff算法更加优化和灵活，采用的是单层级虚拟dom对比的方式，当一个节点发生变化时，只需要更新他自身的子树即可，不需要遍历整个树，同时还引入了静态节点标记和动态节点标记等优化措施，可以更细粒地控制组件的渲染和更新，提高应用性能

17.Vue3中的生命周期函数的变化以及含义

vue3中新增了setup这个函数，直接将vue2中的创建前beforeCreate，创建后created替换掉了，
OnbeforeMount，在数据挂载前执行该钩子函数
OnMounted；在数据挂载完成后执行该钩子函数，并返回dom
OnbeforeUpdate，在数据更新前去执行该钩子函数
更新后OnUpdated；在数据更新完成之后执行该钩子函数
销毁前阶段：OnUnmounted在事件不符合情况的时候销毁中使用

18.@import和link有什么区别？

和 @import 都可以用来导入外部资源，但它们有以下区别： 加载方式： 是 HTML 标签，而 @import 是 CSS 的一种方式，因此 可以放在 HTML 文档的 中，或者放在文档中任何位置，而 @import 只能出现在 CSS 文件中。 加载时间： 标签会在页面加载时同时加载，并行加载外部资源，而 @import 会等到页面全部加载完毕之后再加载。 兼容性： 标签的兼容性好于 @import，在早期版本的 IE 浏览器中不支持 @import。 功能扩展： 标签可以通过 rel 属性指定不同类型的外部资源，比如 rel="stylesheet" 可以加载样式表，rel=“icon” 可以加载网站图标等，而 @import 只能加载 CSS 样式表。

19.说说你都用过css3中的那些新特性？

新选择器：包括属性选择器、伪类选择器、伪元素选择器，提供了更加灵活的元素选择方式；
多列布局：可以通过 CSS3 实现多列布局，使得页面的布局更加灵活、美观；
盒模型：CSS3 引入了新的盒模型，使得计算盒子大小的规则更加直观和简洁；
媒体查询：可以针对不同的设备和屏幕大小使用不同的样式；
2D/3D 转换：CSS3 提供了丰富的 2D/3D 变换方式，使得更加丰富的效果可以通过 CSS 实现；
动画效果：CSS3 可以通过 transition 和 animation 属性实现各种动画效果；
Flexbox 布局：CSS3 引入了弹性盒子布局，为实现复杂布局提供了更好的支持；
Grid 布局：CSS3 提供了基于网格的布局方式，使得多列、多行布局更加高效；
文字阴影和高亮渲染、边框的颜色渐变、背景动画和多重背景图等效果。

20.说说你对flex布局的了解，使用场景？常用属性？

Flex布局是一种灵活的CSS布局模型，用于在容器内部对子元素进行排列和定位。它提供了更简洁、直观的方式来创建响应式的网页布局。
使用场景：响应式布局；等高布局；垂直居中
常用属性：display：flex
flex-direction：指定主轴方向
justify-content：用于定义主轴上子元素的对齐方式；
align-items：用于定义交叉轴上子元素的对齐方式；
flex-wrap：指定子元素在容器内是否换行；
align-self：用于单独设置某个子元素在交叉轴上的对齐方式

21.浏览器的内核都有哪些,什么区别？

浏览器内核分为五种，他们之间各有各的所保护的内存所在之处，他们之间也会有互相关联的内部相关联
Trident内核：是Microsoft开发的浏览器内核，被用于Internet Explorer浏览器。
Gecko内核：是Mozilla开发的浏览器内核，被用于Firefox浏览器。
WebKit内核：是苹果公司开发的浏览器内核，被用于Safari浏览器和Chrome浏览器的早期版本。
Blink内核：是由Google基于WebKit内核开发的浏览器内核，被用于Chrome浏览器和Opera浏览器。

22.说一下什么是事件代理？应用场景？

事件代理又成为事件委托，是 JavaScript中常用绑定事件的常用技巧。以名为由，事件代理就是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的任务。事件代理的原理是DOM元素的事件冒泡，使用事件代理的好处是：可以提高性能
应用场景：可以大量节省内存占用，减少事件注册，比如在table表格上上代理所有某一行td的click的点击事件就非常方便
可以实现当新增子对象时无需再次对其绑定

23.说说你对事件循环的理解？

Js是单向数据流，容易造成堵塞，所以使用到了事件循环这一个方法，事件循环就是说我们执行一些逻辑操作的时候，就会出现同步和异步的操作，在执行同步操作的时候，将会直接进入到循环内直接执行，而执行异步操作的时候，就需要先进入到任务队列中，等待执行，等同步任务执行完成之后，再去进行任务队列中的一些任务，去执行，来回循环操作，就形成了事件循环

24.说说js的内存泄露的几种情况

闭包，未及时清理的dom，定时器，全局变量，循环利用

25.同步和异步的区别

同步操作是指当一个操作开始执行后，必须等待它执行完成后才能执行下一个操作。也就是说，同步操作是按照顺序依次执行的，每个操作都要等待上一个操作完成后才能执行。同步操作的优点是操作的执行顺序可控，但是如果某个操作执行时间过长，会导致整个程序停顿，用户体验差。
异步操作是指当一个操作开始执行后，不需要等待它执行完成，可以继续执行后续的操作。也就是说，异步操作不是按照顺序依次执行的，某些操作可以在其它操作完成之前就开始执行。异步操作的优点是不会阻塞程序的执行，提高了程序的执行效率，但是操作的执行顺序是不可控的

26.说说Promise和async/await的区别是？

首先这两者都可以进行一个异步操作，目的是为了更改代码逻辑的弊端
语法：Promise 通过链式调用 then() 方法来处理异步操作的结果，而 async/await 利用 async 和 await 关键字来处理异步操作的结果，使得代码更加简洁易懂。
错误处理：在 Promise 中，错误处理通常使用 catch() 方法来捕获 Promise 返回的错误，而在 async/await 中，可以使用 try/catch 语句来捕获异步操作中的错误。
控制流：在 Promise 中，如果有多个异步操作需要依次执行，可以使用链式调用 then() 方法来处理。而在 async/await 中，可以使用 async/await 结合 for…of 循环来处理异步操作的顺序执行。
可读性：由于 async/await 使用了同步代码的风格，所以它通常比 Promise 更加易读和易于理解。但是，当出现多个异步操作需要依次执行时，使用 Promise 可能会更加简洁明了。

27.Javascript如何实现继承？

原型链继承：将子类的原型对象指向父类的实例。这种方式可以实现简单的继承关系，但是如果父类的属性或方法是引用类型，那么子类实例共享这个引用类型，会导致子类实例之间相互影响。
借用构造函数继承：通过在子类的构造函数中调用父类的构造函数来实现属性的继承。这种方式可以避免子类实例之间共享引用类型的问题，但是父类原型上定义的方法无法被继承。
组合继承：结合原型链和借用构造函数的方式实现继承。子类的原型对象指向父类的实例，而子类的构造函数通过借用父类的构造函数来实现属性的继承。这种方式既可以继承父类的属性，也可以继承父类原型上的方法。
原型式继承：通过使用一个空对象作为中介，将一个对象作为另一个对象的原型来实现继承。这种方式可以实现简单的对象之间的继承关系，但是会存在对象共享的问题。
寄生式继承：在原型式继承的基础上，通过在新对象上增加方法来扩展对象。这种方式可以在不影响原对象的情况下扩展对象，但是也会存在对象共享的问题。
寄生组合式继承：通过借用构造函数来继承属性，通过原型链的方式来继承方法。这种方式可以避免父类构造函数被调用多次的问题，同时也可以继承父类原型上的方法。

28.什么是防抖和节流？使用场景有哪些？

节流：在规定时间内只执行一次，如果在规定时间内重复触发，那么他只有这一次生效
防抖：n秒后执行该事件，若在n秒后被重复定义，就会重新计时
节流：通过定时器，闭包的方式，定义一个变量用于存储上一个事件执行完的时间，在闭包函数中获取执行前的时间在获取执行后的时间，只要这个时间大于上依次执行完的时间时才会执行节流函数

防抖：也是通过闭包定时器来实现，在闭包中定义一个timer便来用于存储定时器，在闭包返回函数中对timer进行判断，是否存在，存在则表示上一个事件还没有执行完则清除定时器，否则开启定时器执行方法
例如这趟电梯当我们进入之后还有一个人需要进入，再次点击电梯的时候，就会触发一次，并且去执行他，重新开始等待，同一楼层的上升空间是相同的，不会因为等待而减少时长

29.说说什么是严格模式，限制都有哪些？

是 es5引入的一种运行模式，它主要对 JavaScript 的一些不安全的或者不合理的语法进行了限制，使代码更加规范、严谨，避免出现一些难以发现的错误
变量必须声明后再使用，否则会抛出错误。
函数的参数不能有同名属性，否则会抛出错误。
不能使用 with 语句。
在严格模式下，对一个对象进行只读属性的赋值会抛出错误。
对象不能有重名的属性，否则会抛出错误。
函数不能有重名的参数，否则会抛出错误。
eval 函数的作用域不再是调用它的函数的局部作用域。
在严格模式下，delete 关键字删除变量时，需要用到变量名，否则会抛出错误

30.如何快速的让一个打乱一个数组的顺序，比如 var arr = [1,2,3,4,5,6,7,8,9,10];

打乱一个数组的顺序，可以使用 Fisher-Yates 洗牌算法，它的基本思路是从数组末尾开始，每次随机生成一个下标，将当前元素与该下标的元素交换位置，然后继续从数组末尾开始，直到数组首位元素都被交换过。这样就可以将数组打乱顺序

31.Vue的自定义指令钩子函数有哪些？你用自定义指令做过什么？

Vue的自定义指令钩子函数包含，bind，unbind，inserted，update，componentUpdate
Bind：只调用一次，指令的第一次就会绑定到元素时，调用，用这个钩子函数可以定义一个绑定时的一个状态也就是一个初始化动作
Unbind：只调用一次，就是在指令和元素解绑的时候调用
Inserted：被绑定的元素插入到父节点时调用，只需要在父节点存在的时候调用即可，不需要存在document中
Update：被绑定在元素所在的模板更新时调用，而无论绑定的值是否发生变化，就需要通过比较对更新前后去做对比，解决了没有必要的更新问题
compontUpdate：被绑定元素所在模板完成一次更新周期时调用，
使用自定义指令实现一个点击外部区域关闭弹窗的功能

32.Vue是如何实现实现权限管理的，按钮级别权限如何实现？

Vue 实现权限管理一般需要从前端和后端两个方面考虑，前端主要是 UI 的控制和请求的发送，后端主要是数据的处理和权限校验。
在前端中，Vue 可以通过路由守卫来进行权限控制，也可以使用自定义指令来控制按钮的显示和隐藏，根据用户的权限动态地添加或移除对应的指令。
在后端中，需要对用户的身份进行认证和鉴权，可以通过 session、token 或者 OAuth 等方式实现。一般情况下，用户的权限信息会存储在数据库中，需要在服务器端进行查询和校验。对于按钮级别的权限控制，可以在后端通过权限拦截器对请求进行拦截，根据用户的权限信息来判断是否允许进行操作。

33.对于MVVM的理解

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

以Vue.js 为例。Vue是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。

它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发
更加高效、便捷。

34.请详细说下你对vue生命周期的理解

Vue2：
beforeCreate：在创建之前执行的时候执行该钩子函数
Created：在创建完成之后执行的时候执行该钩子函数
beforeMount：页面初次挂载的时候执行该钩子函数
Mounted：页面挂载完成之后去执行该钩子函数
beforeUpdate：在更新之前执行改钩子函数
Updated：在组件更新完成之后再去执行该钩子函数
Beforedetory：在组件卸载之前执行该钩子函数
Detoryed：在组件卸载之后执行
Vue3中：
新增了setup函数，这个函数废弃了vue2中的beforecreate和created这两个钩子函数
onBeforeMount：页面初始化的时候去执行改钩子函数
OnMounted：页面挂载完成之后去执行该钩子函数
onbeforeUpdate：在更新之前执行改钩子函数
onUpdated：在组件更新完成之后再去执行该钩子函数
onBeforedetory：在组件卸载之前执行该钩子函数
onUnmount：在组件卸载之前执行
Unmountd：在组件卸载之后执行

35.Vue的路由实现：hash模式 和 history模式原理

hash路由后会跟有一个#，当#后面发生变化的时候，浏览器并不会重新发起请求，而是会触发onhashchange事件，
他的优点是，只需要前端配置路由表，不需要后端的参与配置；
兼容性比较好，所有的浏览器都支持

因为他不会向后端发送任何请求，完全属于前端的一个路由
缺点：有一个#，不美观

History是H5中新增是一个特性，允许开发者直接更改前端路由，就是更新浏览器url地址时不会重新发请求,这其中还新增了pushState()和replaceState方法

优点：符合命名规范美观
缺点：兼容性不好，需要服务器支持重定向，不然一刷新就会报404的错误，

36.vue路由的钩子函数有哪些

全局路由钩子函数：beforeEach是在每一个路由改变的时候都需去执行一遍，他带有三个参数(to,from,next)，beforeeach再页面加载之前的，aftereach是页面加载之后的，所以这些钩子函数不好去next函数，也不会改变自身

当路由内部的钩子函数：beforeenter可以直接在路由配置上直接定义beforeenter的，这些守卫与全局前置守卫的方法参数是一样的

组件内的路由钩子函数：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

37.v-if 和 v-show 区别

v-show隐藏则是为该元素添加css–display:none,dom元素依旧存在，v-if显示隐藏是将dom元素整个添加或删除
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

38.$route和$router的区别

$route 对象包含当前路由信息，可以访问当前路由的路径、参数、查询参数等信息，是只读的，不能修改。
$router 对象是路由实例，包含了整个应用程序的路由信息，可以访问路由实例的方法，如 push、replace、go 等，用于动态地跳转到不同的路由。

39.如何让CSS只在当前组件中起作用?

在style标签中加上scope属性
使用cssmodules，vue中提供了对他的一些支持，可以让css样式只在当前组件中起作用

40.在Vue中使用插件的步骤

在使用插件前，先安装插件，可以使用npm/yarn来安装，也可以手动安装，
在安装好插件之后，
就需要在main.js文件中引入该插件，并挂载到vue实例上，在所有组件中都可以使用，因为他是一个全局引入；
也可以使用局部引入，在我们一个具体所需要的文件夹下引入这个插件；
还可以使用对象的形式：以对象形式创建插件，该对象至少包含了一个方法，可以用来安装我们所需要的插件
类形式的方式引入：定义一个构造函数来创建插件，并在原型上扩展插件的功能，也需要暴露一个静态文件

41.请列举出3个Vue中常用的生命周期钩子函数?

Created：组件实例已经创建完成之后调用，在这一步实例已经完成了数据的观测，属性和一些方法的运算
Mounted：el被创建的$el替换，并挂载到实力上之后在调用该钩子函数
Actived：看keep-alive组件是否被激活时调用

42.什么是Vue SSR

SSR是服务器将组件渲染成html，然后将html发送给客户端，客户端接收到html后再去进行渲染，最终呈现出来的这个页面，SSR还可以提高首屏渲染速度，SEO优化和用户体验感
因为客户端在收到html后不会在进行渲染查看了，而在直接展示在页面中
使用SSR还可以提高网站的性能和用户体验，重点在对一些大型的网站或者页面的时候，可以展示出来SSR提高到SEO效果，因为搜索引擎会直接抓取渲染后的页面，而不是等待客户端渲染完成之后再去抓取页面

43.Proxy 相比于 defineProperty 的优势

defineProperty 不能将数组传入进去，也不能获取到数据发生变化的时候立即获取到它的值，defineProperty 中的data是一次性传值的，用户体验感不好，因为会出现页面卡顿，速度慢等情况
Proxy可以监听到数组的变化，以及对数组进行更改时的操作，可以获取到添加和修改的一些数据，然后在proxy中，data是分批次渲染的，这样不好影响性能，也不会造成用户页面卡断，速度慢等情况，用户体验感良好

44.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex是一个状态管理仓库，专门用于vue应用的一个状态管理，它可以通过集中管理的应用程序的所有组件共享的状态，并提供了可预测的数据流机制，他还包含了五个属性：
state：应用程序需要存储的共享状态
Action：修改state的方法，可以异步操作
Mutations：修改state的方法，必须是同步操作
Getters：封装state
Moduel
通过npm或者yarn安装vuex，在main.js文件中，引入vuex并注册到vue组件实例中，之后在创建一个store文件夹，这里面包含多个状态值，以及$store来访问vuex中的状态
使用场景：
多个组件需要共享同一状态。
多个视图需要依赖同一个状态进行协调。
状态需要在组件之间共享和传递。
单个组件处于多个异步流程中，需要统一管理状态。

45.Vue2.x 响应式原理

在vue2中响应式原理是object.defineProperty，实现了实现数据绑定的原则，实在数据获取的时候，获取到了两个方法getter()和setter()这两个，然后对这两个方法进行监听处理，就实现了响应式原理

46.ES5、ES6和ES2015有什么区别?

ES5中用到的是一些简单的特性，想要实现一些功能会比较麻烦，但是也会实现，但是实现步骤很费劲，然后ES6就新增了很多特性，foreach进行遍历等等一些操作，会使我们可以很轻松的实现一个对数组的遍历，省时省力还很轻松

47.babel是什么，有什么作用?

Babel是一个编译器，将ecm新版本语法转换成当前旧版本的，或者是低版本允许ED5的代码，主要作用是让开发者在项目中使用最新版本的JavaScript语言特性，不用担心在旧版本中是否会正常使用，因为JavaScript语言的更新速度比较快，浏览器的版本会出来跟不上的操作，所以就延展出来label，就使我们可以使用最新版本的语言去编写代码，babel会帮我我们编译成旧版本的ES5特性

48.let有什么用，有了var为什么还要用let？

Let块级作用域，不会将代码提升到最顶端，不允许出现重名，
Var全局作用域，允许出现重名，会将代码提升
因为let比var更方便，更快

49.举一些ES6对String字符串类型做的常用升级优化?

使用模板字面量${}来插入一个变量或表达式
使用prototype.startsWith()和prototype.endswith()判断字符串是否以指定的前缀或后缀开头或者结尾
使用string.prototype.includes()判断字符串中是否包含某个字符串
使用string.prototype.repeat()判断字符串重复指定次数
使用解构赋值语法来方便地获取字符串的字符或子串

50.举一些ES6对Array数组类型做的常用升级优化

使用扩展运算符…来展开数组或合并数组
使用array.from()将类似数组的对象或迭代对象转换为真正的数组
使用array.of创建一个包含任意数量元素的新数组
使用箭头函数等方法对数组进行快速操作
使用for…of循环遍历数组
使用解构语法去获取数组的元素

51.说说你对ES6模块化的理解？和commonJS的区别？

ES6 模块化是 JavaScript 语言的一种模块化规范，它在 ECMAScript 6 版本中正式被加入到 JavaScript 语言中。与之前的模块化方案相比，ES6 模块化更加标准、灵活和易用，成为了现代前端开发中使用最广泛的一种模块化方式

52.说说实现图片懒加载的思路？

将图片的加载时机延迟到用户需要访问它们时在进行加载，从而降低页面一次性加载大量图片造成的网络请求压力和页面加载速度
将所有需要进行懒加载的图片元素的 src 属性暂时设置为占位符，或者使用 data-src 属性存储真实的图片链接 不会发起网络请求；
监听页面的滚动事件，当用户滚动到某个区域时，检测需要懒加载的元素是否进入了浏览器视窗内部；
若元素进入了视窗内部，则获取其中保存的真实图片链接，并将其设置为该元素的 src 属性值。这时才会发起网络请求，加载真实图片内容；
考虑兼容性问题，可以尝试使用 Intersection Observer API 或自行编写 IntersectionObserver 的 polyfill 实现。

53.说说你对webpack的理解？plugin和loader有什么区别？

Webpack 是一个前端模块化打包工具，它可以将多个模块和依赖文件打包成少量的静态资源文件。通过这种方式，能够提高前端应用程序的加载速度和性能，并且实现资源的管理、优化和更新等功能。
Plugin 和 Loader 是 Webpack 中的两个核心概念，它们分别用于不同的场景和目的：
Loader：它是用于处理非 JavaScript 文件的 Webpack 插件，可以将这些文件转换为模块，并最终被添加到依赖图中，Loader 可以串联起来使用，并以管道方式传递数据，最终输出处理后的 JavaScript 模块代码。
Plugin：它是用于扩展 Webpack 功能的 JavaScript 模块，可以实现各种自动化任务、资源优化和环境变量注入等功能。Plugin 属于对 Webpack 整个编译过程的拦截和操作，它可以在一定程度上控制 Webpack 的构建流程和结果。

54.如何让CSS只在当前组件中起作用?

在vue中，有两种方法：

使用scoped属性，在组件的

55.说说你对flex布局的了解，使用场景？常用属性？

Flex是弹性盒子的布局，它可以使块级元素合并成一行，这其中也包含了弹性盒子的内容撑开，靠左，靠右，之间的间距都是一样的，或者是居中展示常用属性，默认是靠左
使用场景：当我们想要展示头部内容的时候，内容分为了三个模块，想要实现的效果是这三个模块都分布居中一点，那么这时候我们就需要用到flex弹性盒子了，给最外层的这个盒子加上display:flex属性，之后再设置span-between这样就会形成我们想要的那种效果了
常用属性：靠左，靠右，居中，内边距一至，外边距一致等等

56.

57.说说你对BOM的理解，常见的BOM对象你了解哪些？

BOM是浏览器对象模型，在客户端发送请求给服务器的时候，服务器接收到这一响应，就会和数据进行比对，如果正确，就会想客户端发送一个数据请求，之后客户端拿到这数据之后，通过层层比对就会渲染到浏览器h5的页面上，这其实就是将这些都看为一个dom对象，但是对于浏览器来说，这个dom对象就是一个BOM对象

58.浏览器的内核都有哪些,什么区别？

浏览器内核分为五种，他们之间各有各的所保护的内存所在之处，他们之间也会有互相关联的内部相关联
Trident内核：是Microsoft开发的浏览器内核，被用于Internet Explorer浏览器。
Gecko内核：是Mozilla开发的浏览器内核，被用于Firefox浏览器。
WebKit内核：是苹果公司开发的浏览器内核，被用于Safari浏览器和Chrome浏览器的早期版本。
Blink内核：是由Google基于WebKit内核开发的浏览器内核，被用于Chrome浏览器和Opera浏览器。

59.说说你对事件循环的理解？

Js是单向数据流，容易造成堵塞，所以使用到了事件循环这一个方法，事件循环就是说我们执行一些逻辑操作的时候，就会出现同步和异步的操作，在执行同步操作的时候，将会直接进入到循环内直接执行，而执行异步操作的时候，就需要先进入到任务队列中，等待执行，等同步任务执行完成之后，再去进行任务队列中的一些任务，去执行，来回循环操作，就形成了事件循环

60.

61.说说Promise和async/await的区别是？

首先这两者都可以进行一个异步操作，目的是为了更改代码逻辑的弊端
语法：Promise 通过链式调用 then() 方法来处理异步操作的结果，而 async/await 利用 async 和 await 关键字来处理异步操作的结果，使得代码更加简洁易懂。
错误处理：在 Promise 中，错误处理通常使用 catch() 方法来捕获 Promise 返回的错误，而在 async/await 中，可以使用 try/catch 语句来捕获异步操作中的错误。
控制流：在 Promise 中，如果有多个异步操作需要依次执行，可以使用链式调用 then() 方法来处理。而在 async/await 中，可以使用 async/await 结合 for…of 循环来处理异步操作的顺序执行。
可读性：由于 async/await 使用了同步代码的风格，所以它通常比 Promise 更加易读和易于理解。但是，当出现多个异步操作需要依次执行时，使用 Promise 可能会更加简洁明了。

62.从A页面跳转到B页面，缓存A组件，从A组件跳转到C组件，取消缓存，如何实现？

这就用到了keep-alive这一个属性，他的目的是为了决定该组件是否缓存，当我们在a页面的时候，进入b页面，a组件中的内容和样式不发生改变，我们就需要在主路由那a页面下添加meta{keep-alive：true}这样a组件就会进入缓存，写一个判断，判断我们是进入哪个页面，如果是a页面进入b页面就需要在相对应的位置存入keep-alive，进入c页面就需要在相对应的位置讲keep-alive改为false，让他取消缓存，和其余页面一致

63.Vue2和Vue3中响应式原理及区别？

Vue2和Vue3中的响应式原理都是通过数据劫持实现的，但是具体实现方式有所不同。

Vue2使用了Object.defineProperty()方法来劫持数据，即将对象的属性转化为getter和setter，通过getter进行依赖收集，当setter被触发时，通知相关的依赖进行更新。这种方式有一些限制，比如无法监听到数组下标的变化以及新增属性的变化。
Vue3则采用了ES6的Proxy来实现数据劫持。通过创建一个代理对象，可以监听到对象属性的访问和修改，可以监听到数组下标的变化以及新增属性的变化。同时，Vue3还使用了WeakMap来进行依赖收集，比Vue2中使用的基于数组的依赖收集方式更加高效。
此外，Vue3中的响应式系统还引入了一些新特性，比如可对多个响应式对象进行操作的组合式API、全局API和应用级别的静态属性、更好的Typescript支持等等。

64.如何让一个盒子水平垂直居中,有哪些方法越多越好？

1. 绝对定位居中（最常用，好用）
2. 负margin居中
3. margin固定宽高居中
4. flex居中
5. transform居中
6. table-cell居中
7. 不确定宽高居中

65.说说javascript都有哪些数据类型，如何存储的？

基本数据类型和引用数据类型
基本数据类型：undefined，Null，string，number，boolean，symbol，其中symbol是ES6新增的，
引用类型统称为Object，细分为5个：object，array，date，regexp，function
基本数据类型和引用数据类型的区别：
基本数据类型和引用数据类型存储在内存中的位置不同，基本数据类型存储在栈中，引用数据类型的对象存储在堆中
堆栈池存储
栈：存放变量
堆：存放复杂对象
池：存放常量
栈和堆是两种基本的数据类型，Stack在内存中自动分配内存空间，Heap在内存中动态分配内存空间，不一定会释放，一般在项目手动设置为null的原因，减少无用内存消耗
引用数据类型存放在堆内存中，每个对象在堆内存中有一个引用地址，栈中保存的就是这个对象在堆内存中的引用地址

66. 如何理解响应式，实现响应式的方法有哪些？有什么区别？

响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕
响应式的4种方法：
媒体查询：使用@media可以根据不同的屏幕定义不同的样式
百分比：百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕
vw/vh：vw/vh是视口单位，即根据浏览器的窗口大小进行适配
rem： rem是指相对于根元素的字体大小的单位，rem只是一个相对单位

67.Css性能优化有哪些常见的方法？具体如何实现？

慎重使用高性能属性：浮动，定位。
尽量减少页面的重排和重绘。
空规则的产生的原因一般来说是为了预留样式。去除这些空规则则无疑能减少css文档体积。
属性值为0时，不加单位。
属性值为浮动小数，可以省略小数点之前的0。
标准化各种浏览器前缀，带浏览器前缀的在前。标准属性在后。
不使用@import前缀，它会影响css的加载速度。
选择器优先嵌套，尽量避免层级过深。

68.判断数据类型的方法有哪些？有什么区别？

typeof方法 typeof是个操作符，可以判断基本数据类型（返回的结果只能是number，string，boolean，null，symbol，function，object） 返回值分以下几种 对于基本类型。
instanceof方法 一般用来检测引用数据类型，表达式为：A instanceof B，判断A是否是B的实例，如果 A 是 B 的实例，则返回 true,否则返回 false，由构造类型判断出数据类型
constructor方法 constructor是prototype对象上的属性，指向构造函数
Object.prototype.toString 方法 用来检测对象类型

69.说说你对BOM的理解，BOM的核心都有哪些？作用是什么

BOM实际上就是浏览器对象模型，他提供了独立于内容和浏览器窗口进行交互的对象，然后他的作用就是跟浏览器做一些交互效果，比如：如何更先进的进行页面的前进，后退，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取一些用户的个人信息，浏览器的版本，以及浏览器的屏幕分辨率等，浏览器的全部内容都可以看成一个DOM，整个浏览器都可以看成BOM

70.Bind,call,apply有什么区别？如何实现一个bind方法？

Call、apply和bind都是用来改变函数this指向的
Call、apply和bind之间的区别比较大，前两者是在改变this指向的同时，也会把目标函数给执行的，bind只负责改造this，不做任何执行操作
Call和apply之间的区别，就体现在了对入参的要求上，call只需要将目标函数的入参捉个传入就可以了，后者就希望入参是用到数组形式被传入进去
通过特定的方法，改变他们的this指向，把参数等传递到改变后的类中，首先接收一个对象，和参数列表等信息，把这个this指向赋值给新的属性，再通过apply改变this执行的方法，把参数和对象放入到这个里面，最后在合并参数，返回一个新的方法就模拟了一个bind

71.说说你对作用域链的理解？

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的
通俗来说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期

72.说说你对原型和原型链的理解？

在JavaScript中，每个对象都有一个关联的原型对象，也称为原型。原型对象是一个普通对象，它具有一组属性和方法，它可以被用来继承这些属性和方法。每当你创建一个新的对象时，它都会自动关联到它的构造函数的原型对象上。
原型链是一种机制，它使得对象之间可以通过它们各自的原型对象相互关联起来。一个对象的原型对象又可以有自己的原型对象，这样就形成了一个原型链。当你试图访问一个对象上的属性或方法时，JavaScript会首先在对象自身上查找，如果没有找到，它就会去该对象的原型对象上查找，如果还没有找到，它就会继续沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶部，即Object.prototype。如果最终还是没有找到该属性或方法，JavaScript会返回undefined。

73.null 和 undefined 的区别

当数据返回null的时候，就代表着我们一层级一层级向下找的时候找到了该属性的值，只是这个属性的值为空，这里的为空不是没有找到的空，而是没有数据为空
而当数据返回undefined的时候，就代表的是我们一层级一层级向下找的时候，在某一个地方是没有这个属性名称的，所以会出现undefined，出现这个的时候就代表的是没有此值，而是真正的为定义

怎么判断一个变量arr的话是否为数组（此题用 typeof 不行）
让他进入一个forEach循环遍历，因为只有数组列表可以进入foreach循环遍历，如果不能进入循环就说明该arr不是一个数组，如果可以就说明他是一个数组，可以进入循环遍历；
也可以使用判断数据类型的哪几种方法，进行判断

74.你了解vue的diff算法吗？说说看？

Diff算法首先就是通过同层树的节点进行比较的高效算法，只会在同一层级上进行比较，他不会进行跨层级的比较，在diff算法的比较过程中，循环从两边向中间进行比较，diff算法在很多的场景下都有应用，在vue中，作用于虚拟dom渲染为真实dom的新旧node节点比较

75.Vue3.0的设计目标是什么？做了哪些优化？

首先在运行速度方面，做了一个大的框架来进行了速度的一个提升效果，其次就是在setup语法糖中，碎片化的时候，在vue2中是不支持碎片化的，而在vue3中他是支持碎片化的，在定义一些方法和属性上，vue2是在data（）{}中定义的，而vue3是直接在setup语法糖中定义的，其次就是在父子传值方面，vue2中父子传值需要走向this.$emit(),而vue3中直接使用了setup，其中setup的第二个参数中携带的内容就可以直接进行传值，然后在父组件给子组件传值的时候需要直接在父组件中使用一个方法然后这个方法携带两个参数（’自定义的名称‘，需要传入的名称），然后在子组件中接收即可立即使用；生命周期上，vue2中生命周期有创建前创建后，beforeCreate和created，在vue3中废弃了这两个生命周期，使用了setup代替了这两个生命周期，在main.js文件中不同，vue2中使用的是构造函数，vue3中使用的是工厂函数；双向数据绑定不同，在vue2中使用的definpropyte，在vue3中使用的是proxy

76.Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同

Vue3.0 中的 Composition API 和 Vue2.x 中的 Options API 是两种不同的组件编写方式。
不同之处：
组合 API 可以将功能逻辑封装到单个函数中，这使得代码更容易重用和组合。相比之下，Options API 是基于定义组件选项对象的方式，其中每个选项对应一个功能。
Composition API 更加灵活，可以让开发者更加自由地组织代码。相比之下，Options API 需要严格按照 Vue 的组件选项规范来定义组件。
Composition API 更加强大，可以使用 React Hooks 的方式来管理组件状态、生命周期和逻辑。相比之下，Options API 只能在生命周期钩子中处理状态和逻辑。
Composition API 支持更好的 TypeScript 支持，因为可以使用泛型来标记状态和逻辑。相比之下，Options API 的类型定义通常需要手动编写。

77.说说 React 生命周期有哪些不同阶段？每个阶段对应的方法是？

创建阶段：constructor–>getDervedstateFromProps–>componentDidMount
更新阶段：getDervedstateFromProps–>shouldCompontentUpdate–>render–>getSnapshotBeforeUpdate–>componentDidUpdate
卸载阶段：componentWillUnmounted

78.如何解决跨域问题？

CORS：在服务端设置相应的头部信息，允许跨域访问。需要后端支持。

JSONP：利用 script 标签可以跨域请求的特性，将请求封装成 script 请求，服务器返回 JavaScript 脚本，通过回调函数的方式将数据返回到前端。只支持 get 请求。

反向代理：通过 nginx、Apache 等反向代理服务器，将前端请求转发到目标服务器，再将目标服务器返回的数据返回给前端，使得前端代码和目标服务器属于同一域名和端口。需要服务器的配置和管理。

WebSocket：建立双向通信通道，通过特定的 API 实现浏览器和服务器之间的实时数据传输。需要服务器的支持。

79.如何优化webpack打包速度？

使用合适的loader和plugin；
减小打包体积；
使用缓存；
使用多线程或并行构建；
按需加载；
使用Tree Shaking；
优化文件查找范围；
使用DLL或缓存预编译

80.SPA首屏加载速度慢的怎么解决？

加载慢的原因是因为在页面渲染的过程中，网络延迟，资源过大，或者是资源重复发送请求，加载脚本，渲染的堵塞等的
解决办法：减小入口文件体积，静态资源从本地缓存ui框架按需加载，图片优化；CDN加速；预渲染技术；代码压缩；路由懒加载；

81.new操作符具体干了什么？

New操作符创建了一个新的对象；将空对象的原型prototype指向构造函数的原型 ；将空对象作为构造函数的上下文并且改变this指向；对构造函数有返回值的判断

82.说说你对promise的了解？

是一个用于异步操作的，传入了三个参数等待中，已完成状态，已拒绝状态，这都是promise中缺一不可的内容，也需要用到以下这三种方法
Then():用于指定当promise对象状态变为 Fulfilled 时的回调函数，接收一个参数来处理异步操作的结果
catch():用于指定当promise对象状态变为 Rejected时的回调函数，接收一个参数来处理异步操作的结果
finally():用于指定在 Promise 对象无论状态如何都会执行的回调函数，无论是 Fulfilled 还是 Rejected 都会执行

83.说说webpack中常见的Plugin？解决了什么问题？

HtmlWebpackPlugin：将打包后的JS、CSS等文件自动注入到HTML文件中，方便开发者使用。
MiniCssExtractPlugin：将CSS文件从JS文件中分离出来，避免JS文件过大，提高页面加载速度。
CleanWebpackPlugin：每次打包前清空输出目录，避免旧文件对新文件的影响。
DefinePlugin：定义全局变量，方便在代码中使用。
HotModuleReplacementPlugin：热更新插件，可以在不刷新页面的情况下更新代码，提高开发效率。
UglifyJsPlugin：压缩JS代码，减小文件体积，提高页面加载速度。
CopyWebpackPlugin：将静态资源文件复制到输出目录中，方便开发者使用。

84.什么是宏任务和微任务、说说你对event Loop的理解？

宏任务可以理解为较大的任务单元，包括整体代码块、定时器回调、事件回调等。宏任务队列按照先后顺序依次执行，每个宏任务完成后，才会执行下一个宏任务
微任务则是宏任务中的更小的任务单元，可以认为是在当前宏任务执行结束之后、渲染之前需要立即执行的任务。常见的微任务有 Promise 的回调函数、MutationObserver 的回调函数等。微任务会在当前宏任务执行完毕后立即执行，而不需要等待其他的宏任务。
Event Loop：event Loop简称事件循环，事件循环是单线程的，但是我们要去执行很多的异步和同步任务的时候就会造成页面堵塞，然而呢事件循环就很好的解决了这个问题，当我们在执行任务的过程中，遇到同步任务就立即执行，遇到异步任务就将所以的异步任务放入到异步队列中，等同步任务执行完成之后再去执行异步任务中的异步任务，这样就避免了堵塞问题，来回使用，就形成了事件循环

85.页面上拉加载的实现思路和方法？

监听页面滚动事件：使用JavaScript监听页面的滚动事件，以便实时获取页面滚动的位置。
判断滚动位置：通过判断页面滚动的位置，可以确定是否已经滚动到了页面底部。
触发加载：当滚动位置达到底部时，可以触发加载数据的操作。可以通过Ajax请求、动态添加DOM元素或者其他方式来实现数据的加载。
加载数据：根据需求，可以从服务器端获取新的数据，并将数据插入到页面中已有的内容后面，或者通过模板引擎等方式渲染新的内容。
更新页面状态：在数据加载完成后，需要更新页面上拉加载的状态，可以修改加载按钮的文本，或者添加加载完成的提示信息等。

85.说说你对前端工程化如何理解？

指通过使用一系列的工具，技术和方法来提高前端的开发效率，降低维护成本，增强代码质量和团队协作的过程，他的核心目标是将前端开发过程中的重复性工作自动化，使开发人员能够更专注于业务逻辑和用户体验，主要涉及到了：构建与打包，自动化测试，代码规范与静态检查，版本控制与协作，自动化部署与持续集成，组件化与模块化

86.说说你对webpack的理解？webpack的构建流程？

Webpack是一个开源的前端项目打包工具，它可以解析各种类型的模块，并将其转换成浏览器可读的文件，同时还能实现代码压缩，模块化管理，资源优化等多项功能，为前端开发者提供了高效的工程化解决方案
构建流程：入口–>模块解析–>加载器–>插件–>输出

87.webpack的热更新是如何做到的？原理是什么？

Webpack的热更新是一种能够在开发过程中实时更新修改的代码而无需完全刷新页面的技术。它通过在运行时替换、添加或删除模块，实现应用程序的局部更新，从而提供更快的开发体验
Webpack编译阶段，开发服务器阶段，客户端阶段，客户端模块更新

88.Vue封装一个modal模块态框的思路

首先，创建一个Vue组件作为模态框的基础，可以使用template、script和style标签定义组件的模板、逻辑和样式。
定义Props：在模态框组件中，定义Props属性来接收外部传递的数据，例如标题、内容、是否显示等。
在组件的data对象中添加一个变量，用于控制模态框的显示和隐藏状态。可以使用v-if或v-show指令来根据变量值来决定是否渲染/展示模态框。
在组件的模版中使用插槽来接收模态框的内容，插槽可以提供灵活的内容组合方式，例如自定义按钮、表单等。
事件触发：为模态框组件添加合适的事件处理逻辑，例如点击确定/取消按钮的处理、点击遮罩层的处理等。可以使用@click、@submit等Vue指令来监听事件。
封装和导出：将模态框组件封装成一个独立的模块，通过export default导出，以便在其他地方方便地引用和使用。

89.说说你对Object.observable的了解

Object.observable是一个JavaScript原生对象的方法，用于创建一个可观察的对象。它是ECMAScript提案中的一部分，旨在提供一种观察对象属性变化的机制。
通过使用Object.observable方法，我们可以将一个普通的对象转换为一个可观察对象。可观察对象具有以下特点：
监听属性变化：可观察对象会监听其属性的变化，包括属性的新增、修改和删除。
发出变更通知：当属性发生变化时，可观察对象会发出变更通知，以便其他部分可以及时获取新的属性值。
订阅和取消订阅：我们可以通过调用可观察对象的subscribe方法来订阅属性变化的通知，并可以使用unsubscribe方法来取消订阅。

90.说说React的事件机制？

合成事件是 React模拟原生 DOM事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器，根据W3C规范来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接
React事件和原生事件的区别：事件名称命名方式不同，事件处理函数书写不同
React所有事件都挂载在document对象上；
当真实dom元素触发事件，会冒泡到document对象后，在处理react事件
所以会先执行原生事件，然后处理react事件
最后执行document上挂载的事件