全网最全前端必问面试题（持续更新中）_前端面试问题

全网最全前端必问面试题

1、html新增了哪些标签？

1. <header> : 定义文档或节的页眉。
2. <nav> : 定义文档的导航链接部分。
3. <section> : 定义文档中的节或区域。
4. <article> : 定义独立的自包含文章内容。
5. <aside> : 定义页面内容之外的内容，如侧边栏或广告。
6. <footer> : 定义文档或节的页脚。
7. <main> : 定义文档的主要内容。
8. <figure> : 定义自包含的媒体内容，如图像、图表或视频。
9. <figcaption> : 定义 <figure> 元素的标题。
10. <video> : 定义视频。
11. <audio> : 定义音频。
12. <canvas> : 定义用于绘制图形的画布。
13. <datalist> : 定义输入字段的选项列表。
14. <progress> : 定义任务的进度条。
15. <meter> : 定义度量衡的标量值。
16. <time> : 定义日期或时间。
17. <mark> : 定义突出显示的文本。
18. <details> : 定义用户可查看或隐藏的附加细节。
19. <summary> : 定义 <details> 元素的摘要或标题。

这只是HTML5中新增的一些标签，还有其他更多的标签可以用于不同的目的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、怎么理解vuex

在Vue.js中，Vuex是一种用于管理应用程序状态的官方状态管理模式。它允许您在应用程序的不同组件之间共享和访问数据，以及在整个应用程序中进行状态的一致性管理。
以下是对Vuex的一些理解：

1. 集中式存储：Vuex将应用程序的状态存储在一个单一的地方，称为"store"。这个store类似于一个全局对象，可以在应用程序的任何组件中访问。
2. 状态管理：Vuex提供了一种管理状态的方式，以确保状态的一致性。通过定义状态和在store中进行修改，您可以追踪应用程序状态的变化，并在需要时进行响应。
3. 状态的响应式更新：当在组件中修改store中的状态时，所有依赖于该状态的组件都会自动更新，确保应用程序中的所有组件保持同步。
4. 模块化：Vuex允许您将store分割成模块，每个模块可以有自己的状态、操作、获取器和提交方式。这样可以更好地组织和管理大型应用程序的状态。
5. 方便的数据获取和修改：通过使用Vuex的getters和mutations，您可以方便地获取和修改store中的状态，而不需要在组件之间传递数据或使用事件总线。

3、单页面vs多页面的理解

单页面应用（Single Page Application，SPA）和多页面应用（Multiple Page Application，MPA）是两种不同的前端应用架构方式。

单页面应用（SPA）：

• SPA是一种基于JavaScript的应用程序，通过动态地更新当前页面的部分内容，而不是每次加载整个页面来实现页面切换和交互。
• SPA通常使用前端框架（如Vue.js、React等）来实现，通过路由机制来管理不同的页面状态。
• SPA的优点包括更流畅的用户体验、更快的页面切换速度、减少服务器负载、更方便的开发和维护。
• 缺点包括初始加载时间较长、对SEO不友好（需要额外处理）、较大的JavaScript包大小。

多页面应用（MPA）：

• MPA是一种传统的Web应用程序架构，每个页面都是一个独立的HTML文件，每次页面切换都需要重新加载整个页面。
• MPA通常使用服务器端渲染（SSR）或模板引擎来生成不同的页面。
• MPA的优点包括更好的SEO支持、更快的初始加载时间、更小的JavaScript包大小。
• 缺点包括页面切换速度较慢、用户体验相对较差、开发和维护相对复杂。

选择SPA还是MPA取决于具体的应用需求。如果您需要更流畅的用户体验、更快的页面切换速度和更方便的开发体验，可以选择SPA。如果您需要更好的SEO支持、更快的初始加载时间和更小的JavaScript包大小，可以选择MPA。

4、vue-loader是什么

vue-loader是一个Webpack加载器（loader），用于将Vue单文件组件（.vue文件）转换为JavaScript模块。

Vue单文件组件是一种将组件的模板、样式和逻辑封装在一个文件中的方式。它包含三个部分：

1. 模板（template）：用于定义组件的结构和布局，使用Vue的模板语法编写。
2. 样式（style）：用于定义组件的样式，可以使用CSS、Sass、Less等预处理器编写。
3. 逻辑（script）：用于定义组件的行为和数据，使用JavaScript编写。

使用vue-loader，可以将这些部分合并为一个JavaScript模块，以便在应用程序中进行加载和使用。

vue-loader还提供了许多其他功能，例如：

• 支持预处理器：可以使用Sass、Less等预处理器编写样式。
• 支持CSS模块化：可以将样式文件作为模块导入，并在组件中使用模块化的类名。
• 支持热重载：在开发过程中，可以实时预览和调试组件的修改，无需刷新页面。
• 支持自定义块：可以在单文件组件中定义自定义块，用于编写其他类型的代码（如模板引擎、Markdown等）。

总之，vue-loader是一个用于将Vue单文件组件转换为JavaScript模块的Webpack加载器，提供了许多功能和扩展，使得开发Vue应用程序更加方便和高效。

5、router和route有什么区别

1. Router（路由器）：路由器是一种网络设备，用于在计算机网络中转发数据包。它连接多个网络，并根据目标地址来确定数据包的最佳路径，以便将其从源网络发送到目标网络。路由器通常用于在互联网中转发数据。

2. Route（路由）：路由是指在网络中定义的路径，用于将数据包从源地址发送到目标地址。路由是由网络管理员配置的，它指定了数据包在网络中的传输路径。路由可以基于不同的因素进行选择，例如最短路径、最快路径或特定的网络策略。

6、vue中的路由模式有哪些

1. Hash 模式：默认模式，URL 中会有一个 # 符号，例如 http://example.com/#/route 。在这种模式下，路由的改变不会触发浏览器的页面刷新，而是通过监听 URL 中的 hash 变化来进行路由切换。

2. History 模式：通过使用 HTML5 的 History API，URL 中不再有 # 符号，例如 http://example.com/route 。在这种模式下，路由的改变会修改浏览器的历史记录，并触发浏览器的页面刷新。

7、vue2.x和3.x的diff算法有什么区别

Vue.js 3.x 的 diff 算法相对于 2.x 更加高效，通过静态标记和其他优化措施，可以减少不必要的操作和提升性能。这使得 Vue.js 3.x 在性能方面有了显著的改进。

8、js中的== 和 === 有什么区别

1. == 操作符进行相等比较时，会进行类型转换。它会尝试将两个操作数转换为相同类型，然后再进行比较。
2. === 操作符进行严格相等比较时，不会进行类型转换。它会首先比较两个操作数的类型，如果类型不同，则直接返回 false 。只有当类型相同且值相等时，才会返回 true 。

9、iframe的优缺点是什么

优点：

1. 分离内容：iframe 可以将页面内容分割成独立的区块，每个区块可以有自己的独立的 HTML、CSS 和 JavaScript。这样可以实现模块化开发和维护，方便团队协作。
2. 安全性：iframe 可以提供一定的安全性，因为它可以将外部内容隔离在一个独立的环境中。这可以防止外部内容对主页面的恶意攻击，例如跨站脚本攻击（XSS）。
3. 并行加载：使用 iframe 可以实现页面的并行加载，因为每个 iframe 都有自己的独立的请求和加载过程。这可以提高页面的加载性能，特别是在处理大量内容或延迟加载时。

缺点：
4. SEO 难度：搜索引擎对于 iframe 中的内容处理相对困难，可能无法正确解析和索引其中的内容，从而影响页面的搜索引擎优化（SEO）。
5. 页面性能：每个 iframe 都需要加载独立的 HTML、CSS 和 JavaScript，这会增加页面的请求和加载时间，降低页面的性能。
6. 交互限制：由于浏览器的安全策略，跨域的 iframe 之间的通信受到限制，无法直接访问和操作对方的内容。这可能导致一些交互功能的实现困难。

10、Vue 的双向数据绑定的原理

Vue 的双向数据绑定是通过使用 Object.defineProperty() 方法来实现的。

当 Vue 实例化时，Vue 会遍历 data 对象中的属性，并使用 Object.defineProperty() 将每个属性转换为 getter 和 setter。这样，当数据属性被读取或修改时，Vue 就能够捕获到，并触发相应的更新。

具体的实现步骤如下：

1. Vue 遍历 data 对象中的属性。
2. 对于每个属性，Vue 使用 Object.defineProperty() 将其转换为 getter 和 setter。
3. 在 getter 中，Vue 将属性的值返回给调用者，并进行依赖收集。这意味着 Vue 会追踪每个属性的依赖关系，以便在属性发生变化时，能够通知相关的组件进行更新。
4. 在 setter 中，Vue 接收到属性的新值，并将其存储起来。然后，Vue 会触发相应的更新，通知相关的组件进行重新渲染。

通过这种方式，Vue 实现了双向数据绑定。当数据发生变化时，视图会自动更新；当用户与视图进行交互时，数据也会自动更新。

11、js的作用域链是什么

是作用域与作用域嵌套关系，这个关系为变量查询提供依据 。具体依据内容：就近原则

12、script标签的defer属性

在 HTML 中，可以使用

当使用 defer 属性时，浏览器会异步加载脚本文件，并且会在 HTML 解析完毕后、DOMContentLoaded 事件触发之前按照顺序执行脚本。换句话说， defer 属性保证了脚本的执行会在文档解析完成后进行，但是在 DOMContentLoaded 事件之前。

13、xss攻击 CSRF 攻击

XSS (Cross-Site Scripting) 攻击是一种常见的网络安全漏洞，攻击者通过在受信任的网页中注入恶意脚本，使其在用户浏览器中执行。这种攻击可以用来窃取用户的敏感信息、劫持用户会话或者操纵用户的浏览器行为。

CSRF (Cross-Site Request Forgery) 攻击是一种利用受信任用户的身份执行未经授权操作的攻击。攻击者通过诱使受害者在已登录的状态下访问恶意网站，从而在受害者不知情的情况下发送伪造的请求，执行攻击者所期望的操作。这种攻击可以导致用户的资金被盗、账户被劫持或者其他未经授权的操作。

14、html5、css3有什么新属性

HTML5 新属性：
1. <video> 和 <audio> 标签：用于在网页上嵌入视频和音频内容。
2. <canvas> 标签：提供了一个用于绘制图形、动画和图像处理的 API。
3. <svg> 标签：用于创建矢量图形，支持动画和交互性。
4. <datalist> 标签：定义一个选项列表，供用户在输入时选择。
5. <progress> 和 <meter> 标签：分别用于展示进度条和度量衡的值。
6. <input> 新类型：例如 <input type="date"> 用于选择日期， <input type="email"> 用于输入电子邮件等。

CSS3 新属性：
1. 选择器：包括属性选择器、伪类选择器和伪元素选择器，使得选择元素更加灵活。
2. 盒模型：引入了 box-sizing 属性，用于控制元素的盒模型计算方式。
3. 边框和背景：提供了更多样式和效果的选项，如圆角边框、阴影和渐变背景。
4. 过渡和动画：通过 transition 和 animation 属性，可以实现元素的平滑过渡和动画效果。
5. 弹性布局：通过 flexbox 属性，可以更方便地实现灵活的布局。
6. 媒体查询：用于根据设备的特性（如屏幕尺寸、分辨率等）来应用不同的样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

15、css盒子模型 怎么互相转换

要进行盒子模型的转换，只需简单地设置元素的 box-sizing 属性为对应的值即可。例如，要将一个元素从标准盒子模型转换为边界盒子模型，可以使用以下 CSS 代码：

 box-sizing: border-box;
1

16、css定位有哪几种

1. 静态定位（Static Positioning）：

• 默认的定位方式。
• 元素按照文档流正常排列，不受其他定位方式的影响。
• 使用 position: static; 来指定静态定位。

2. 相对定位（Relative Positioning）：

• 相对于元素自身在文档流中的位置进行定位。
• 元素仍然占据原来的空间，不会影响其他元素的位置。
• 使用 position: relative; 来指定相对定位，并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。

3. 绝对定位（Absolute Positioning）：

• 相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块（通常是 元素）进行定位。
• 元素脱离文档流，不占据空间，可以覆盖其他元素。
• 使用 position: absolute; 来指定绝对定位，并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。

4. 固定定位（Fixed Positioning）：

• 相对于浏览器窗口进行定位，固定在屏幕上的位置不变。
• 元素脱离文档流，不占据空间，始终可见。
• 使用 position: fixed; 来指定固定定位，并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。

17、清除浮动的方式

1. 使用空元素清除浮动：

• 在浮动元素后面添加一个空的
  元素，并设置其样式为 clear: both; 。

2. 使用伪元素清除浮动
3. 使用父元素的 overflow 属性：

• 将父元素的 overflow 属性设置为 hidden 或 auto 。

18、vue中的生命周期钩子有哪些

1. beforeCreate：

• 在实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。
• 在此阶段，实例的属性和方法还未初始化。

2. created：

• 在实例创建完成后被立即调用。
• 可以访问实例的属性和方法，但无法访问到 DOM 元素。

3. beforeMount：

• 在挂载开始之前被调用。
• 在此阶段，模板编译完成，但尚未将编译结果挂载到 DOM 中。

4. mounted：

• 在挂载完成后被调用。
• 可以访问到挂载的 DOM 元素，可以进行 DOM 操作。

5. beforeUpdate：

• 在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。
• 在此阶段，可以对更新前的状态进行修改。

6. updated：

• 在数据更新之后被调用，发生在虚拟 DOM 重新渲染和打补丁之后。
• 可以进行 DOM 操作，但要避免无限循环的更新。

7. beforeDestroy：

• 在实例销毁之前调用。
• 在此阶段，实例仍然完全可用。

8. destroyed：

• 在实例销毁之后调用。
• 所有的事件监听器会被移除，所有的子实例也会被销毁。

19、除了element-ui、vue-router 还用到了哪些库

1. Vuex：Vue.js 官方的状态管理库，用于管理应用程序的状态。

2. Axios：一个基于 Promise 的 HTTP 客户端，用于发送 AJAX 请求。

3. VueXgplayer：一个基于 Vue.js 的视频播放器插件。

4. Vue-i18n：Vue.js 的国际化插件，用于处理多语言的需求。

5. Vue-lazyload：一个用于实现图片懒加载的插件，可以延迟加载页面上的图片，提升页面加载速度。

6. Vue-Router：Vue.js 官方的路由管理器，用于实现单页面应用的路由功能。

7. Vue-axios：将 Axios 集成到 Vue.js 中的插件，简化了 AJAX 请求的使用。

8. Vue-awesome-swiper：一个基于 Swiper 的 Vue.js 轮播图插件。

9. Vue-echarts：一个基于 ECharts 的 Vue.js 图表插件，用于绘制各种图表。

10. Vue-moment：一个用于格式化日期和时间的 Vue.js 插件，基于 Moment.js 库。

20、路由守卫有哪几种【全局的、组件内的、路由内的】

1. 全局的守卫：全局的守卫会在整个应用程序的生命周期中被调用，用于对路由进行全局的控制和管理。全局守卫包括以下三个方法：

• beforeEach(to, from, next) ：在每个路由跳转之前调用，可以用来进行身份验证或权限检查等操作。
• beforeResolve(to, from, next) ：在每个路由跳转之前调用，但在路由组件被解析之后调用。在该守卫中可以执行一些需要在路由组件解析之前完成的操作。
• afterEach(to, from) ：在每个路由跳转之后调用，可以用来进行一些后续操作，如页面滚动、统计等。

2. 组件内的守卫：组件内的守卫是在组件实例中定义的钩子函数，用于对当前组件的路由进行控制和管理。组件内的守卫包括以下三个方法：

• beforeRouteEnter(to, from, next) ：在进入路由之前调用，但在组件实例被创建之前调用。在该守卫中无法访问组件实例，需要通过回调函数 next 来访问组件实例。
• beforeRouteUpdate(to, from, next) ：在当前路由改变，但是该组件被复用时调用。在该守卫中可以对组件进行更新操作。
• beforeRouteLeave(to, from, next) ：在离开当前路由时调用，可以用来进行一些离开前的确认操作或数据保存操作。

21、vuex有几个模块

1. State（状态）：存储应用程序的状态数据，即存储在 Vuex 中的数据。可以通过 this.$store.state 来访问和修改状态数据。

2. Getters（获取器）：用于从状态中派生出一些新的数据，类似于 Vue 组件中的计算属性。Getters 可以接收状态作为参数，并返回计算后的值。可以通过 this.$store.getters 来访问 Getters。

3. Mutations（变更）：用于修改状态数据的方法。Mutations 是同步的，每个 Mutation 都有一个字符串类型的事件类型（type）和一个回调函数（handler）。可以通过 this.$store.commit 来触发 Mutations。

4. Actions（动作）：用于处理异步操作和提交 Mutations 的方法。Actions 可以包含任意异步操作，并通过 context.commit 来提交 Mutations。可以通过 this.$store.dispatch 来触发 Actions。

除了以上四个核心模块，Vuex 还有一个模块化的概念Module，可以将 Vuex 的代码拆分成多个模块，每个模块都有自己的 State、Getters、Mutations 和 Actions。这样可以更好地组织和管理大型的 Vuex 应用程序。

22、v-if和v-show的区别

1. v-if是“真正”的条件渲染，当条件为真时，元素会被渲染到DOM中；当条件为假时，元素会从DOM中移除。因此，v-if具有更高的切换开销，因为它会频繁地添加或移除元素。

2. v-show是简单的显示/隐藏指令，当条件为真时，元素会被显示；当条件为假时，元素会被隐藏。元素始终会被渲染到DOM中，只是通过CSS的display属性来控制其显示与隐藏。因此，v-show具有较低的切换开销。

23、js 中 BOM和DOM的区别

BOM是浏览器对象模型，它提供了一组对象和方法，用于操作浏览器窗口和浏览器本身的属性。BOM包括了window对象，它代表浏览器窗口，提供了许多方法和属性，如alert()、setTimeout()、location等。

DOM是文档对象模型，它提供了一组对象和方法，用于操作HTML或XML文档的内容和结构。DOM可以将HTML或XML文档表示为一个树状结构，每个节点都是一个对象，可以通过DOM API来访问和修改这些节点。DOM提供了一系列的方法和属性，如getElementById()、appendChild()、innerHTML等。

1. BOM是用来操作浏览器窗口和浏览器本身的属性，而DOM是用来操作文档结构和内容的。
2. BOM提供了一些与浏览器交互的方法和属性，如弹窗、重定向等，而DOM提供了一些用于操作HTML或XML文档的方法和属性，如获取元素、修改内容等。
3. BOM是浏览器厂商根据W3C标准之外的补充，不同浏览器实现可能有差异，而DOM是W3C标准定义的，不同浏览器实现应该保持一致性。

总的来说，BOM是操作浏览器窗口和浏览器本身的属性，而DOM是操作HTML或XML文档的内容和结构。

24、什么是虚拟DOM

虚拟DOM（Virtual DOM）是一种编程概念，用于描述一种轻量级的、存在于内存中的、以JavaScript对象的形式表示的虚拟页面结构。

在Web开发中，通常使用DOM（Document Object Model）来表示和操作HTML文档的结构。但是，直接操作DOM是非常耗费性能的，因为每次对DOM的修改都会引起浏览器的重绘和重新布局，影响页面的性能。

为了解决这个问题，虚拟DOM的概念被引入。虚拟DOM是对真实DOM的一种抽象，它通过在内存中创建一个虚拟的DOM树来代替真实的DOM树。当应用程序的状态发生变化时，虚拟DOM会通过比较新旧两个虚拟DOM树的差异，然后只更新需要修改的部分，最后将这些变化应用到真实的DOM树上。

使用虚拟DOM可以提高页面的性能，因为它减少了对真实DOM的直接操作。此外，虚拟DOM还可以简化页面的开发和维护，因为它提供了一种声明式的方式来描述页面的结构和状态。

25、vue2和3 写法有什么区别

1. Composition API：Vue 3引入了Composition API，它允许开发者通过逻辑组合的方式编写组件，而不是依赖于选项对象。这使得代码更加模块化和可复用。

2. setup 函数：在Vue 3中，组件的逻辑代码主要放在一个名为 setup 的函数中。这个函数在组件实例化之前执行，并且接收 props 作为参数。它可以返回一个响应式对象，提供给模板使用。

3. 响应式系统：Vue 3对响应式系统进行了改进，使用了Proxy代替了Vue 2中的Object.defineProperty。这使得Vue 3的响应式系统更加强大和灵活。

4. Teleport：Vue 3引入了Teleport（传送门）功能，它允许将组件的内容渲染到DOM中的任意位置，而不仅仅是组件所在的父元素内部。

5. Fragment：Vue 3中可以使用Fragment（片段）来包裹多个根级元素，而不需要再使用额外的标签。

26、js有几种基本数据类型

1. 字符串（String）：表示文本数据，用引号（单引号或双引号）括起来。

2. 数字（Number）：表示数值，包括整数和浮点数。

3. 布尔值（Boolean）：表示逻辑值，只有两个可能的值：true（真）和false（假）。

4. undefined：表示未定义的值，当声明了一个变量但没有给它赋值时，它的值就是undefined。

5. null：表示空值，表示变量被明确地赋值为null，表示它为空。

6. Symbol：表示唯一的标识符，用于对象属性的键。

除了以上的基本数据类型，JavaScript还有一种复杂数据类型：

7. 对象（Object）：表示一组键值对的集合，可以存储各种类型的值。

27、如何判断数据类型 typeof 、instaceof有什么区别

typeof 用于判断大多数基本数据类型和函数的数据类型，而 instanceof 用于判断对象是否是某个特定类型的实例。

28、typeof null 返回什么值

尽管 null 是一个特殊的值，表示空值或缺少对象，但在使用 typeof 运算符时，它会被错误地归类为对象类型。实际上， null 不是对象，而是一个单独的基本数据类型。

29、什么是重绘 什么是回流

1. 重绘（Repaint）：当元素的样式发生改变，但不影响其布局时，浏览器会进行重绘。重绘仅涉及像素的颜色和透明度的改变，不会改变元素的位置和大小。重绘的代价相对较小，因为它不会重新计算元素的布局。

2. 回流（Reflow）：当元素的布局发生改变，例如改变元素的尺寸、位置、隐藏或显示等，浏览器会进行回流。回流会重新计算元素的几何属性（位置和尺寸），以及其他元素的相对位置和尺寸。回流的代价相对较高，因为它需要重新计算和重新布局多个元素。

30、如何让元素垂直水平居中

1. 使用flexbox布局：将父容器设置为 display: flex; ，并使用 justify-content: center; 和 align-items: center; 来水平和垂直居中子元素。
2. 使用绝对定位和transform：将要居中的元素设置为 position: absolute; ，并使用 top: 50%; 、 left: 50%; 和 transform: translate(-50%, -50%); 来使其水平和垂直居中
3. 使用表格布局：将父容器设置为 display: table; ，并将子元素设置为 display: table-cell; 和 vertical-align: middle; 来垂直居中。
4. 使用grid布局：将父容器设置为 display: grid; ，并使用 place-items: center; 来水平和垂直居中子元素

31、css选择器有哪几种

1. 元素选择器

2. 类选择器

3. ID选择器

4. 属性选择器

5. 后代选择器

6. 直接子元素选择器

7. 伪类选择器

8. 伪元素选择器

9. 兄弟选择器

32、css动画有哪几种

1. Transition（过渡动画）：通过改变元素的属性值来实现动画效果，可以在鼠标悬停、点击或其他事件触发时发生。使用 transition 属性来定义属性的变化过程
2. Animation（关键帧动画）：通过在关键帧上定义元素的属性值来实现动画效果，可以定义多个关键帧来控制动画的过程。使用 @keyframes 规则来定义关键帧，使用 animation 属性来应用动画效果
3. Transform（变换动画）：通过应用2D或3D变换来改变元素的位置、大小、旋转等属性，从而实现动画效果。使用 transform 属性来应用变换
4. CSS动画库（Animation Libraries）：除了原生的CSS动画技术，还可以使用第三方的CSS动画库，如Animate.css、Hover.css等，这些库提供了丰富的预定义动画效果，只需添加相应的类名即可应用动画效果

33、localstorage、sessionstorage、cookie有什么区别

1. 存储容量：

• LocalStorage：可以存储较大量级的数据，一般可以达到5MB或更多。
• SessionStorage：存储容量较小，一般可以达到5MB或更多。
• Cookie：存储容量有限，一般只能存储几KB的数据。

2. 生命周期：

• LocalStorage：存储的数据在浏览器关闭后仍然保留，除非主动清除或过期。
• SessionStorage：存储的数据在当前会话（浏览器窗口或标签页）关闭后会被清除。
• Cookie：可以设置过期时间，可以在过期时间之前一直保留，也可以在浏览器关闭后清除。

3. 数据共享：

• LocalStorage：存储的数据在同一域名下的所有页面间共享，即使是不同的窗口或标签页。
• SessionStorage：存储的数据只在同一会话（浏览器窗口或标签页）下共享。
• Cookie：存储的数据在同一域名下的所有页面间共享，包括不同的窗口或标签页。

4. 与服务器的通信：

• LocalStorage和SessionStorage：数据存储在客户端，不会自动发送给服务器。
• Cookie：数据存储在客户端，并在每次HTTP请求时自动发送给服务器。

5. 访问权限：

• LocalStorage和SessionStorage：只能被同一域名下的页面访问。
• Cookie：可以通过设置域名和路径来限制访问权限。

34、什么是防抖 什么是节流

防抖：
防抖是指在事件触发后，等待一段时间后再执行回调函数。如果在等待时间内又发生了相同的事件，那么就会重新计时。防抖的主要目的是减少函数的执行次数，尤其是在频繁触发事件的情况下，可以避免函数多次执行。常见的应用场景包括输入框的搜索建议、窗口大小改变的回调等。

例如，当用户在输入框中输入关键字时，可以使用防抖来减少发送请求的次数，只有在用户停止输入一段时间后才发送请求。

节流：
节流是指在一段时间内只执行一次回调函数。即使在这段时间内发生了多次事件，也只会执行一次回调函数。节流的主要目的是控制函数的执行频率，尤其是在高频率触发事件的情况下，可以限制函数的执行次数。常见的应用场景包括滚动事件、鼠标移动事件等。

例如，当用户滚动页面时，可以使用节流来限制触发回调函数的次数，避免频繁执行导致性能问题。

35、es6新增的方法有哪些

1.Promise：用于处理异步操作的对象，可以更优雅地处理回调函数。
2.let 和 const：用于声明块级作用域的变量。
3.箭头函数：更简洁地声明函数。
4.模板字符串：用于创建多行字符串或在字符串中插入变量。

36、vue项目中的跨域怎么解决

1. 使用ProxyTable进行代理：在项目的 config/index.js 文件中，可以配置ProxyTable来代理请求
2. 使用CORS（跨域资源共享）：在后端服务器的响应头中添加 Access-Control-Allow-Origin 字段来允许跨域请求
3. 使用JSONP：如果后端服务器支持JSONP，可以使用Vue的 jsonp 库来发送跨域请求
4. 使用服务器反向代理：在生产环境中，可以使用Nginx等服务器作为反向代理，将前端的请求转发到后端服务器上。

37、vue项目中 数据改变了 页面没更新怎么解决的，比如给对象中新增属性了，但页面中没更新

1. 对象新增属性没有使用Vue.set或this.$set方法：Vue无法检测到对象新增的属性，需要使用Vue.set或this.$set方法将属性添加到对象中，以便Vue能够监听到该属性的变化并更新页面。
2. 数组修改索引或长度时没有使用Vue.set或this.$set方法：Vue无法检测到数组索引的变化或长度的变化，需要使用Vue.set或this.$set方法来修改数组，以便Vue能够监听到数组的变化并更新页面。
3. 异步更新数据时没有使用Vue.nextTick方法：如果在异步操作中更新数据，Vue可能无法立即更新页面。可以使用Vue.nextTick方法来确保在DOM更新后再进行操作。
1
2
3

38、js中改变this的指向的方法

使用call()、apply()方法、bind()方法，

39、call()、apply()方法、bind()方法 的区别

• call()和apply()方法会立即执行函数，而bind()方法会返回一个新函数，需要手动调用该函数才会执行。
• call()方法和apply()方法的参数传递方式不同，call()方法是逐个传入参数，而apply()方法是将参数放在一个数组或类数组对象中传入。
• bind()方法会创建一个新函数，并将原始函数中的this绑定到指定的thisArg值上，后续调用新函数时，新函数的this将始终指向thisArg。

40、给元素添加事件的方法有哪些 addEventLister() 的第三个参数有什么用

1. 使用HTML属性：可以直接在HTML标签中使用事件属性，如onclick、onmouseover等。

2. 使用DOM属性：可以通过JavaScript代码直接给元素的事件属性赋值，如element.onclick = function(){}。

3. 使用addEventListener()方法：可以使用addEventListener()方法给元素添加事件监听器，语法为：element.addEventListener(event, function, useCapture)。

其中，addEventListener()方法的第三个参数useCapture用于指定事件是在捕获阶段还是冒泡阶段触发，默认为false，表示在冒泡阶段触发事件。如果设置为true，则在捕获阶段触发事件。

41、移动端如何进行项目适配

1. 响应式设计：使用CSS媒体查询和弹性布局等技术，根据设备屏幕大小自动调整页面布局和元素大小。

2. 自适应布局：根据不同的设备和屏幕尺寸，使用不同的布局方式和尺寸。

3. 移动优先：优先考虑移动设备的使用体验，设计并优化移动端界面，再逐步扩展到其他设备。

4. 图片优化：使用适当的图片格式和大小，以提高页面加载速度和用户体验。

5. 字体适配：使用相对单位（如em、rem）来设置字体大小，以适应不同屏幕尺寸。

6. 浏览器兼容性：测试并确保项目在各种移动浏览器和操作系统上都能正常显示和使用。

7. 去除冗余功能：移动端使用场景不同于PC端，需要去除一些冗余的功能，以提高用户体验。

42、JavaScript原型链

JavaScript中的原型链是一种机制，用于实现对象之间的继承。每个对象都有一个原型对象，可以通过 proto 属性访问。当访问一个对象的属性时，如果对象本身没有该属性，JavaScript会沿着原型链向上查找，直到找到该属性或者到达原型链的顶端（即Object.prototype）

43、如何解决闭包内存泄漏问题

1. 避免循环引用：闭包函数中引用的外部变量如果是一个对象，需要确保在闭包函数执行完毕后，将该对象的引用置为null，以便垃圾回收机制可以回收该对象。

2. 使用WeakMap或WeakSet：可以使用WeakMap或WeakSet来存储闭包函数中引用的外部变量，这样当外部变量不再被其他地方引用时，垃圾回收机制会自动回收该变量，避免内存泄漏。

3. 及时释放资源：如果闭包函数中引用的外部变量是一些资源，比如定时器、网络请求等，需要在合适的时机及时释放这些资源，以防止内存泄漏。

4. 使用IIFE（立即执行函数表达式）：将闭包函数放在一个立即执行函数中，这样当函数执行完毕后，闭包函数中引用的外部变量会被销毁，从而避免内存泄漏。

5. 使用事件委托：如果闭包函数是一个事件处理函数，可以使用事件委托的方式来绑定事件，这样当事件触发后，闭包函数执行完毕后，闭包函数中引用的外部变量会被销毁，从而避免内存泄漏。

44、闭包的好处

1. 数据的封装：闭包可以将数据封装在函数内部，使得外部无法直接访问和修改，从而保护数据的安全性。

2. 保持状态：闭包可以保存函数的状态，即使函数执行完毕后，闭包仍然可以访问和修改函数内部的变量。这对于需要保持状态的场景非常有用，比如计数器、缓存等。

3. 延长变量的生命周期：闭包可以使得函数内部的变量在函数执行完毕后仍然存在，不会被垃圾回收机制回收。这对于需要在函数执行完毕后继续使用变量的场景非常有用。

4. 实现函数的柯里化：闭包可以实现函数的柯里化，即将多个参数的函数转换为只接受一个参数的函数。这样可以方便地复用函数，提高代码的可读性和可维护性。

5. 实现函数的装饰器：闭包可以用于实现函数的装饰器，即在不修改原函数的情况下，为函数添加额外的功能。这样可以提高代码的复用性和灵活性。

45、var/let/const 有哪些区别

• var：函数作用域，变量提升，可以重复声明和赋值。
• let：块级作用域，不存在变量提升，不可以重复声明，但可以赋值。
• const：块级作用域，不存在变量提升，不可以重复声明和赋值。

46、const定义的对象能不能修改

使用const定义的对象可以修改其属性的值，但不能重新赋值给另一个对象。

47、Set和Map有什么区别

1. 存储方式：Set是一组唯一的对象集合，不允许重复元素；而Map是一组键值对的集合，每个键值对都是唯一的。

2. 数据访问：Set中的元素没有索引，只能通过迭代器或者foreach循环遍历；而Map中的元素可以通过键来进行访问，可以使用键获取对应的值。

3. 数据顺序：Set中的元素没有固定的顺序，可以是任意顺序；而Map中的元素有固定的顺序，可以是插入顺序或者根据键的排序顺序。

4. 存储性能：Set的存储性能比Map高，因为Set只需要存储对象本身；而Map需要同时存储键和值。

5. 数据操作：Set中的元素只能添加和删除，不能修改；而Map中的键和值都可以修改。

总的来说，Set适用于需要存储一组唯一对象的场景；而Map适用于需要存储键值对的场景，并且需要根据键来快速查找值的场景。

48、created中能操作dom吗

在JavaScript中，可以使用 created 生命周期钩子函数来操作DOM。 created 生命周期钩子函数是在Vue实例被创建之后调用的，此时Vue实例的DOM元素已经被创建，但尚未被挂载到页面中。

在 created 生命周期钩子函数中，可以使用 this.$el 来访问Vue实例的根DOM元素，并进行操作。

49、computed和watch的区别

1. computed：computed是一个计算属性，它根据依赖的数据动态计算出一个新的值，并将这个值缓存起来，只有当依赖的数据发生变化时，才会重新计算。computed属性是基于它的依赖进行缓存的，只有当依赖发生变化时，computed属性才会重新计算。computed属性适用于需要根据已有的数据计算出新的值的场景，例如根据商品的价格和数量计算出总价。

2. watch：watch是一个观察者，它用于监听指定数据的变化，并在数据变化时执行相应的回调函数。watch可以监听一个或多个数据的变化，当被监听的数据发生变化时，watch会立即执行回调函数。watch适用于需要在数据变化时执行异步或开销较大的操作的场景，例如监听用户输入的搜索关键词，在关键词变化时发送网络请求获取搜索结果。

总结来说，computed适用于计算属性的场景，可以根据已有的数据动态计算出新的值；watch适用于监听数据变化并执行相应操作的场景，可以用于执行异步或开销较大的操作。

50、promise常用的方法有哪些

1. Promise.resolve(value)：返回一个以给定值解析后的Promise对象。
2. Promise.reject(reason)：返回一个带有拒绝原因的Promise对象。
3. Promise.prototype.then(onFulfilled, onRejected)：添加解析和拒绝处理程序到Promise对象。
4. Promise.prototype.catch(onRejected)：添加一个拒绝处理程序到Promise对象。

51、vue中双向绑定的语法有哪些

1. 在input元素上使用v-model实现双向绑定
2. 在自定义组件上使用v-model实现双向绑定

52、vue中这两个v-model, .sync 区别

1. v-model：v-model是Vue提供的一个语法糖，用于实现表单元素和数据之间的双向绑定。它可以用在input、textarea、select等表单元素上，也可以用在自定义组件上。v-model会根据表单元素的不同，自动地更新数据或响应用户的输入。

2. .sync：.sync是Vue提供的一种特殊的语法糖，用于实现父子组件之间的双向数据绑定。它可以让父组件和子组件之间共享一个属性，并且在父组件中更新该属性时，子组件中的值也会同步更新。.sync是通过将属性传递给子组件，并且监听子组件的更新事件来实现的。

总结起来，v-model用于表单元素和数据之间的双向绑定，而.sync用于父子组件之间的双向数据绑定。

53、vue中事件的修饰符有哪些

1. .stop：阻止事件冒泡。
2. .prevent：阻止事件的默认行为。
3. .capture：使用事件捕获模式，即在父组件上监听事件，而不是在子组件上。
4. .self：只有当事件是由当前元素本身触发时才触发事件处理函数，不包括子元素。
5. .once：事件只触发一次，之后自动移除事件监听器。
6. .passive：指示浏览器在滚动事件上不需要执行preventDefault()，可以提升滚动性能。
7. .native：监听组件根元素的原生事件，而不是组件自身触发的事件。
8. .keyCode：只当事件是从特定键触发时才触发事件处理函数。
9. .exact：要求精确匹配修饰符。
10. .left：只当点击鼠标左键时才触发事件处理函数。
11. .right：只当点击鼠标右键时才触发事件处理函数。
12. .middle：只当点击鼠标中键时才触发事件处理函数。

54、前端优化层面有哪些手段

1. 压缩和合并文件：通过压缩和合并 JavaScript、CSS 和 HTML 文件来减少文件的大小，从而减少加载时间。

2. 图片优化：使用适当的图片格式、压缩图片大小、使用 CSS Sprites 或者使用懒加载等方式来优化图片加载。

3. 使用浏览器缓存：设置合适的缓存策略，使得浏览器能够缓存静态资源，减少重复请求。

4. 异步加载资源：将非关键的资源使用异步加载，如将 JavaScript 文件放在页面底部，使用 defer 或者 async 属性来异步加载脚本。

5. 使用 CDN 加速：使用 CDN（内容分发网络）来加速静态资源的加载，使得用户能够从离自己最近的服务器获取资源。

6. 代码优化：减少不必要的重绘和回流，避免使用过多的 DOM 操作和全局变量，优化 JavaScript 代码的执行效率。

7. 使用缓存技术：使用本地缓存或者 IndexedDB 来缓存数据，减少网络请求。

8. 响应式设计：使用响应式设计来适配不同的设备和屏幕大小，提供更好的用户体验。

9. 使用懒加载：延迟加载页面中的某些内容，当用户需要时再进行加载，减少初始加载时间。

10. 优化网络请求：减少 HTTP 请求次数，合并请求，使用 HTTP/2 协议等来提高网络请求的效率。

55、js事件循环机制

JavaScript事件循环机制是指JavaScript在执行异步任务时的一种机制。JavaScript是单线程的语言，意味着它一次只能执行一个任务。但是，JavaScript也支持异步任务，例如网络请求、定时器等。
事件循环机制通过事件队列来管理和调度异步任务的执行。当一个异步任务完成时，它会被放入事件队列中，等待JavaScript引擎执行。JavaScript引擎会不断地从事件队列中取出任务，并执行它们。

事件循环机制的基本流程如下：

1. 执行同步任务：JavaScript引擎首先会执行当前的同步任务，直到所有同步任务执行完毕。

2. 检查事件队列：JavaScript引擎会检查事件队列，看是否有待执行的异步任务。

3. 执行异步任务：如果事件队列中有异步任务，JavaScript引擎会将其取出并执行。执行完毕后，JavaScript引擎会再次检查事件队列。

4. 重复执行：JavaScript引擎会不断地重复执行上述步骤，直到事件队列中没有待执行的任务。

需要注意的是，事件循环机制中的异步任务分为宏任务（macrotask）和微任务（microtask）两种。

宏任务包括一些比较耗时的任务，例如setTimeout、setInterval、AJAX请求等。宏任务会被放入事件队列中，等待执行。

微任务是一些比较轻量级的任务，例如Promise的回调函数、MutationObserver等。微任务会被放入微任务队列中，并在当前宏任务执行完毕后立即执行。

在事件循环机制中，每次执行一个宏任务后，都会先执行所有的微任务，然后再执行下一个宏任务。

56、vue 中 v-for 中 :key 的作用

在 Vue 的 v-for 指令中，:key 的作用是为每个被渲染的元素提供一个唯一的标识。这个标识用于 Vue 的虚拟 DOM 算法中，帮助 Vue 跟踪每个节点的身份，从而高效地更新和重新排序元素。

:key 的值可以是任何能够唯一标识每个元素的值，例如一个字符串或一个数字。通常，:key 的值应该是每个元素在列表中的唯一标识符，比如一个数据库中的 id。

使用:key 可以有效地解决在 v-for 中更新列表时的性能问题，特别是在改变列表顺序或删除/添加元素时。Vue 使用:key 来判断两个元素是否是相同的，从而避免重新渲染整个列表，只更新需要改变的部分，提高了性能。

57、js数组去方法

1. 使用 Set 数据结构：Set 是 ES6 中引入的一种数据结构，它只存储唯一的值。可以将数组转换为 Set，然后再将 Set 转换回数组。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]
1
2
3

2. 使用 filter 方法：使用 filter 方法遍历数组，只保留第一次出现的元素。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]
1
2
3
4
5

3. 使用 reduce 方法：使用 reduce 方法遍历数组，将不重复的元素添加到新数组中。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
1
2
3
4
5
6
7
8

58、GET POST请求方式什么区别?

1. 数据传输位置：GET请求将数据附加在URL的查询参数中，而POST请求将数据包含在请求体中。
2. 数据传输安全性：GET请求的数据暴露在URL中，因此不适合传输敏感信息。POST请求的数据在请求体中，相对更安全。
3. 数据传输长度限制：GET请求的URL长度有限制，不同浏览器限制不同，通常为2048个字符。POST请求的数据没有长度限制。
4. 数据传输语义：GET请求用于获取资源，不应该有副作用，即对服务器数据没有修改的操作。POST请求用于提交数据，可能对服务器数据进行修改。
5. 请求可缓存性：GET请求默认可以被缓存，而POST请求默认不会被缓存。
6. 请求使用场景：GET请求适合获取数据，如获取网页内容、查询数据等。POST请求适合提交数据，如提交表单、上传文件等。

59、vue路由传参?

1. 声明式传参：在路由路径中使用占位符来表示参数，然后在组件中通过 $route.params 来获取参数值。
2. 编程式传参：通过 $router.push 方法来跳转路由，并将参数传递给目标路由。