前端面试 部分题目

整理了部分题，若有不足，恳请指正

vue

1. vue2和vue3的主要区别

答：

①Vue2 只能使用选项API，Vue3 还可以使用组合式API

②Vue3 在组合式API中使用生命周期钩子时需要先引入，而 Vue2 在选项API中可以直接调用生命周期钩子

③Vue3 支持多个根节点

④Vue3 提供 Suspense 组件（异步）

⑤Vue2 响应式原理基础是 Object.defineProperty；Vue3 响应式原理基础是 Proxy

⑥Vue3 相比于 Vue2，虚拟DOM上增加 patchFlag 字段

⑦Vue3 优化打包过程，比 Vue2 轻量很多

⑧Vue3 由 TypeScript 重写，相对于 Vue2 有更好的 TypeScript 支持

2. ref和reactive的实现原理

答：

①ref 实现原理：
当我们调用 ref 函数时，会返回一个包含一个 .value 属性的对象。这个对象会被转换成 Proxy 对象，通过拦截 get 和 set 操作，实现对 .value 属性的监听。当读取 .value 属性时，会触发 get 操作，将 .value 属性的值返回。当修改 .value 属性时，会触发 set 操作，将新的值赋给 .value 属性。

②reactive 实现原理：
当我们调用 reactive 函数时，会将传入的普通 JavaScript 对象转换为一个 Proxy 对象，通过拦截 get 和 set 操作，实现对整个对象的监听。当读取对象的属性时，会触发 get 操作，返回对应属性的值。当修改对象的属性时，会触发 set 操作，将新的值赋给对应的属性。

3. 什么是响应式？其原理是什么？

答：

①响应式：
Vue采用了响应式编程的思想，通过监听数据的变化来自动更新页面的内容

②Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

4. vue如何渲染组件

答：

Vue 的渲染系统是基于 虚拟 DOM 概念构建的

虚拟 DOM 是一种编程概念，意为将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的 DOM 与之保持同步

创建 → 挂载（一个运行时渲染器将会遍历整个虚拟 DOM 树，并据此构建真实的 DOM 树） → 更新（如果我们有两份虚拟 DOM 树，渲染器将会有比较地遍历它们，找出它们之间的区别，并应用这其中的变化到真实的 DOM 上） → 销毁

5. vue如何进行状态管理？

答：
状态管理是指在应用中管理和维持状态的机制。状态包括用户输入、数据源以及其他需要在多个组件中共享的变量。

本地组件状态

全局事件总线

Composition API

vuex 或 pinia

Vuex和Pinia都是Vue.js状态管理库，但它们有一些区别。

1. 架构设计：Vuex是Vue.js官方提供的状态管理库，而Pinia是由Vue作者维护的另一个状态管理库。Vuex采用了集中式的架构，将所有的状态存储在一个单一的全局状态树中，通过mutations和actions来修改和处理状态。而Pinia采用了去中心化的架构，将状态分布在多个模块中，每个模块拥有自己的状态、mutations和actions。
2. 体积和复杂性：由于Vuex是Vue.js的官方状态管理库，它在Vue.js项目中广泛使用，并拥有庞大的生态系统。相比之下，Pinia是一个相对较新的库，较小且更简单。这使得Pinia在一些小型或简单的项目中可能更容易上手，而Vuex则更适合大型和复杂的项目。
3. TypeScript 支持：Vuex从Vue 2.x版本开始引入了对TypeScript的支持，但需要使用额外的插件来实现类型检查。而Pinia在设计之初就对TypeScript提供了原生的支持，提供了更好的类型推导和类型检查的支持。

6. vue的构建工具，vite为什么比vue-cli快？

答：

Vite：

1. 实现原理：
   Vite 是一个基于 ESModule 的构建工具。它利用原生 ESModule 的特性，将每个文件作为一个模块，通过浏览器去解析和执行，而不需要提前将文件打包成一个单独的 bundle。Vite 利用浏览器的原生 ESModule 支持，实现了快速的开发环境启动和热模块替换（HMR）。

2. 优化策略：
   Vite 在开发环境中通过将源代码直接发送到浏览器，避免了传统的打包过程，实现了更快的开发启动速度。此外，Vite 还通过按需加载模块和使用缓存来提高构建和打包的性能。

3. 区别：
   开发环境速度： Vite 的开发环境启动速度较快，因为它充分利用了原生 ESModule 的特性，避免了传统的打包过程。
   构建速度： 由于 Vite 在开发环境中的优势，构建速度通常也较快。
   依赖关系分析： Vite 可以更细粒度地分析依赖关系，实现按需加载，减小了构建体积。
   插件系统： Vite 使用了 Rollup 作为其构建引擎，这与 Vue CLI 使用的 Webpack 不同。这也导致了一些在插件系统上的不同。

Vue CLI：

1. 实现原理：
   Vue CLI 使用 Webpack 作为默认的构建工具。Webpack 是一个模块打包工具，它将项目中的所有资源打包成一个或多个 bundle，以优化加载性能。Vue CLI 还支持其他构建工具，如 Parcel。

2. 优化策略：
   Vue CLI 通过多个功能和插件来进行优化，包括代码分割、压缩、缓存等。通过 Webpack 提供的各种功能，Vue CLI 能够灵活地配置和优化构建输出。

3. 区别：
   开发环境速度： 在开发环境中，Vue CLI 的启动速度相对较慢，因为它需要进行完整的打包过程。
   构建速度： 由于使用了 Webpack，Vue CLI 在构建速度上可能相对较慢一些，尤其是在大型项目中。
   依赖关系分析： Webpack 在处理依赖关系时，可能不如 Vite 那样细粒度，因此可能存在一些冗余的模块。
   插件系统： Vue CLI 使用基于 Webpack 的插件系统，而 Webpack 生态相对成熟，有更多的插件可供选择。

7. 路由拦截和请求白名单如何实现？

全局前置守卫

Vue Router 提供了全局前置守卫，它可以在路由切换之前对请求进行拦截。全局前置守卫可以用来检查用户是否已经登录，或者检查用户是否具有访问该页面的权限

通常使用 axios 发送网络请求，在 axios 中可以自定义网络请求的拦截器。自定义拦截器可以帮助我们在发送网络请求之前对请求的配置进行修改，或是在请求响应之后对响应的结果进行处理

axios

可以对 axios 进行设置，设置请求拦截器和响应拦截器

对网络请求进行拦截的情况，并且还需要排除一些请求不受拦截，即白名单

请求拦截器中的 config 对象包含了当前请求的相关信息，我们可以在拦截器中对这个对象进行修改，比如添加一些请求头信息等。

响应拦截器中的 response 对象包含了网络请求的返回信息，我们同样可以对这个对象进行修改，比如对错误码进行判断等等。

8. 父子组件之间如何通信？

父组件向子组件传递数据，子组件通过defineProps属性接收数据

子组件向父组件传递数据，子组件通过defineEmits触发事件，父组件通过emit接收事件和数据。

父组件向子组件传递数据，父组件通过provide提供数据，子组件通过inject注入数据。

9. 双向数据的绑定以及事件触发是如何进行的？

答：

Vue的数据变量值变化时，变化可以同步到视图；在视图值变化时，视图的值变化可以同步到Vue的数据变量（注意：这里的数据变量是指Vue实例的data属性中的返回值对象的属性，视图值是指表单元素的输入值变化）

MVVM这里的控制层的核心功能便是 “数据双向绑定”

数据层（Model）：应用的数据及业务逻辑
视图层（View）：应用的展示效果，各类UI组件
业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来

ViewModel的主要职责就是：
数据变化后更新视图
视图变化后更新数据

当然，它还有两个主要部分组成

监听器（Observer）：对所有数据的属性进行监听
解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

vue的双向数据绑定

了解vue数据到页面渲染的具体过程

10. 事件触发是如何进行的？

使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。
methods 承载多是事件函数
v-on 可以用 @替换

11. Vite和Webpack的区别

Vite和Webpack都是现代前端项目的构建工具，它们存在一定的差异:

1.构建速度
Webpack 是一个非常强大的构建工具，但是随着项目规模的增大，Webpack 的构建速度会变得越来越慢，因为它需要将所有模块打包到一个文件中，每次修改都需要重新构建整个项目。而 Vite 采用的是基于浏览器原生 ES 模块的特性，即只会对修改的模块进行重新构建，因此在大型项目中，Vite 的构建速度要比 Webpack 快得多。

2.开发模式
在开发过程中，Webpack 需要将代码打包到一个文件中，然后再在浏览器中进行热更新。这意味着每次修改都需要重新构建整个项目，这会造成较长的等待时间。而 Vite 的开发模式是在浏览器中实时编译和构建代码，这意味着开发者可以在不断开页面的情况下进行实时更新，这样可以大大提高开发效率。

3.打包方式不同
Vite采用Native ES Module的方式服务源码。它不会将代码打包，而是利用浏览器原生支持ES module的方式，实现按需加载。

Webpack需要先打包代码，转换为浏览器可识别的模块格式，无法实现按需加载。

4.启动服务器的区别
Vite直接运行时即可启动开发服务器，利用ESM的特性实现热更新。

Webpack需要先进行打包才能启动开发服务器，热更新也需要配合websocket实现。

5.启动服务器的区别 配置文件的差异
Vite使用更简单的json配置文件，只包含必要的启动信息。

Webpack复杂的JavaScript配置文件，需要配置loader、plugin等组件。

6.构建速度的差异
Vite直接服务源代码，所以具有极快的冷启动时间(启动首次打包时)。

Webpack需要先进行打包，冷启动时间相对较长。

7.HMR（热模块替换）的区别
Vite下，HMR可以直接替换JS模块，无需重新加载页面。

Webpack下，替换模块后需要刷新页面使HMR生效。

8.TypeScript支持的不同
Vite内置支持TypeScript，可以直接导入TS文件。

Webpack需要安装loader才能导入TS。

9、生态环境：Webpack 的生态环境更加成熟，在社区中拥有广泛的支持和丰富的插件库。而 Vite 尚处于发展阶段，尽管其已经获得了很多关注，但其生态系统仍然不太完善。

10、配置复杂度：Vite 的配置相对更简单，因为它无需进行大量的配置，只需指定一些基本的选项就可以开始开发。Webpack 的配置更加复杂，需要针对具体项目进行不同的配置，且需要理解各种插件、Loader 等概念。

11、功能特性：Webpack 是一个功能更加全面的打包工具，支持各种 Loader 和插件，可以处理多种类型的文件和资源。而 Vite 的设计初衷是专注于开发环境下的快速构建，因此其对一些高级特性的支持相对较少。

12.总结

综上所述，Vite 更适合用于开发环境下的快速构建，而 Webpack 则更适合用于生产环境下的复杂应用程序的打包处理，选择使用哪种工具需要根据具体项目需求进行评估。

总体来说，Vite具有更快的启动速度、轻量的配置、更好的HMR和SSR支持等特点，适合现代化的框架。但它也存在部分生态缺失的问题。Webpack具有更全面的生态和插件支持，但配置复杂，构建速度较慢。不同场景下可根据需求选择不同的工具。

Vite和Webpack的区别

小程序

1. 小程序生命周期有哪些？

答：
启动 → 运行 → 销毁

2. 小程序包有大小限制，如果资源过多，该如何处理？

答：

分包处理

图片优化，除了图标，其余媒体资源都放在云上就好了

使用CDN方式加载js文件。这样就不会影响打包体积（下载安装we-script）

3. 小程序请求的数据过多，该如何处理

答：

可以将数据缓存在本地，下次需要时就不需要发送网络请求了

合理使用排序和分页

浏览器

1. HTTP 和 HTTPS 的区别是什么？

答：

主要区别在于安全性、数据传输方式、端口号、证书需求、连接状态、资源消耗、兼容性以及搜索引擎优化（SEO）方面。

‌安全性‌：
HTTP是一种不安全的协议，所有传输的数据都是明文的，容易被窃听和篡改。
HTTPS通过SSL/TLS协议对传输的数据进行加密，可以保证数据的安全性，防止窃听和篡改。
‌数据传输方式‌：
HTTP数据传输是明文的，不进行加密处理。
HTTPS数据传输是经过加密的，保证了数据的机密性。
‌端口号‌：
HTTP默认使用80端口。
HTTPS默认使用443端口。
‌证书‌：
HTTP不需要证书。
HTTPS需要使用SSL证书，由可信任的证书颁发机构（CA）颁发，用于验证服务器身份。
‌连接状态‌：
HTTP的连接是明文的，一旦被截断，数据就可能被窃取或篡改。
HTTPS连接在数据传输过程中始终保持加密状态，即使连接被截断，也不会影响数据的加密状态。
‌资源消耗‌：
由于HTTPS使用了加密和解密操作，因此在数据传输过程中需要消耗更多的计算资源，通常比HTTP的资源消耗大。
HTTP的资源消耗较小，因为不需要加密解密过程。
‌兼容性‌：
HTTP的兼容性较好，可以在各种设备和操作系统上使用。
HTTPS在某些情况下可能会出现兼容性问题，因为需要使用CA证书。
‌搜索引擎优化（SEO）‌：
搜索引擎更喜欢HTTPS网站，因为HTTPS可以提供更安全的访问环境。
HTTPS对搜索引擎更友好，有利于网站的SEO优化。
总的来说，HTTPS相比HTTP更加安全，适用于对数据安全性要求较高的场景

2. 浏览器中，解决跨域的方式都有哪些？

答：

跨域就是当在页面上发送ajax请求时，由于浏览器同源策略的限制，要求当前页面和服务端必须同源，也就是协议、域名和端口号必须一致。

如果协议、域名和端口号中有其中一个不一致，则浏览器视为跨域，进行拦截。

• JSONP方式解决跨域
  利用了script标签不受浏览器同源策略的限制

• CORS方式解决跨域
  只需要后端配置响应头Access-Control-Allow-Origin

• 搭建Node代理服务器解决跨域
  客户端和自己搭建的代理服务器之间也存在跨域问题，所以需要在代理服务器中设置CORS

• Nginx反向代理解决跨域
  利用了服务器请求服务器不受浏览器同源策略的限制实现的

• postMessage方式解决跨域
  window.postMessage() 方法可以安全地实现跨源通信

• Websocket方式解决跨域
  WebSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信

3. 跨域的异步请求，小程序和浏览器的处理上有什么不同吗？

答：

1. 小程序：
   跨域限制更严格：小程序的跨域限制较为严格，只允许请求小程序后台配置的域名，不允许直接访问第三方域名。
   无同源策略：小程序不存在浏览器的同源策略限制，但其自身的跨域规则更为严格。
   使用 wx.request 发起请求：小程序使用 wx.request API 来发起网络请求，需要在小程序后台配置域名白名单。
   安全性要求高：小程序对网络请求的安全性要求较高，需要注意防止 XSS、CSRF 等安全问题。
2. 浏览器：
   同源策略：浏览器实行同源策略，限制页面从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
   跨域请求处理：浏览器支持跨域请求，通过 CORS（跨域资源共享）来允许跨域请求。
   XMLHttpRequest 和 Fetch API：浏览器可以使用 XMLHttpRequest 对象或 Fetch API 发起跨域请求。
   Cookie 处理：浏览器中跨域请求时，对于未设置 Access-Control-Allow-Credentials 头的请求，浏览器会忽略对请求的 Cookie 头。
   总结：
   小程序和浏览器在处理跨域异步请求上存在一些不同，主要是在跨域限制、请求方式、安全性要求等方面的差异。
   小程序对跨域请求的限制更为严格，需要在小程序后台配置域名白名单，而浏览器通过 CORS 支持跨域请求。
   开发者在处理跨域请求时，需要根据具体的环境和要求选择合适的方法，并注意遵循对应的安全规范。

4. local storage的限制是什么？什么时候拿不到 local storage？

答：

限制：主要是容量限制，通常在5MB左右。

拿不到：存储空间不足‌、浏览器或设备设置、隐私模式或无痕浏览、浏览器或插件干扰

5. local storage 存满了会怎么样？

答：

浏览器会抛出异常。无法再写入任何新数据。

6. cookie、session、token 的区别是什么？

答：
Cookie:
存储在客户端的小型数据文件。
每次HTTP请求时，浏览器会自动发送cookie给服务器。
通常用于存储用户偏好或登录状态。
安全性较低，容易受到CSRF等攻击。
存储大小限制约为4KB。

Session:
存储在服务器端的数据结构。
通过在客户端cookie中存储唯一的session ID来识别用户。
可以存储更多的数据，但会增加服务器的存储压力。
比cookie更安全，因为数据不直接暴露在客户端。

Token:
服务端生成的一串加密的字符串，客户端在每次请求时发送给服务器。
不依赖于cookie，因此可以用于移动应用或跨域请求。
可以包含用户的身份信息和权限数据。
通常用于实现无状态的身份验证。

简而言之，cookie和session通常结合使用，通过在客户端存储session ID来维持用户状态，而token则是一种更灵活的方式，可以支持不同的客户端和跨域请求。
10分钟助你弄懂cookie、session、token 区别、用途

7. 前端的请求较多，该如何处理和分类

答：

将多个后端接口聚合成一个接口，以满足前端应用的需求

使用异步请求方法：在处理接口请求时，推荐使用现代的异步请求方法，例如 fetch 或 axios，来发送请求并处理响应。

‌统一接口管理‌：将所有的接口请求集中到一个文件中进行管理，可以提高代码的可维护性和可读性，同时也方便了代码的复用和管理。通过创建一个api目录，并在其中存放所有的接口请求函数，可以方便地在不同的组件或页面中进行复用，减少代码的重复编写，提高开发效率‌。

根据不同的功能模块将接口请求进行二次封装，使得代码更具可读性和可维护性。同时，通过集中管理接口请求，也能更方便地统一处理请求逻辑、错误处理等方面的逻辑

创建一个统一的 API 请求文件：在项目中创建一个单独的文件，例如 api.js 或 apiService.js，用于管理所有的接口请求。
按模块或功能分类：将接口请求按照功能或模块进行分类，可以根据业务逻辑、页面功能或数据类型等进行分类。
使用模块化的方式：在 API 请求文件中，通过模块化的方式组织接口请求，可以使用对象、函数、类等方式来管理不同类型的接口。
统一管理接口地址：在 API 请求文件中集中管理所有的接口地址，可以将基础 URL 存储为常量，方便在不同地方使用。
利用工具函数：编写通用的工具函数来处理接口请求，例如处理请求参数、请求头、错误处理等，以减少重复代码。

9. cdn为什么能加速访问

答：

能显著提升网站的加载速度,从而优化用户的在线体验

CDN，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。

其他

1. 有没有使用过uni app、react、echarts、数据可视化（three.js、webgl）等技术

答：
自行回答

序号

①②③④⑤⑥⑦⑧⑨⑩ ⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳