整理整理最近面试过程中遇到的部分问题-vue/项目系列

前言

春招已经开始了多日，本人也是紧赶春招的黄金时间，从三月初就开始了投递简历，投递简历都是海投的那种，因此我也是收获了许多的面试机会，下面本人为大家讲分析一下在面试过程中所遇到的诸多问题。

自我介绍

当然，一开始就是我们少不了的自我介绍了，自我介绍我们可以准备一个稿子，多背背，而自我介绍的内容一般都是：我是谁 + 我从哪来 + 为什么要面试 + 学过什么 + 做过什么 + 对什么感兴趣。如我是这样进行自我介绍的：

面试官你好，我是xxx，来自xxx，现就读于xxx大学，是一名25届软件学院网络工程专业的学生，看见贵公司在xxx平台招收前端实习生，本人对此十分感兴趣，因此就投递了简历参加贵公司的前端实习生的面试，感谢贵公司给我机会能让我有这个面试机会。在大学期间，因为学校里面教授过前端相关的课程，然后我对于学习这方面的知识有着很大的兴趣，除了学校教过的 HTML、CSS、JavaScript 之外，我还自学过 VUE 和 nodejs 等与前端相关的内容。因此本人也是经常使用 vue全家桶进行开发项目。而进最近几年 Chatgpt 的爆火，我也对此产生十分充足的兴趣。

项目方面

我发现现在的很多公司都是喜欢问与项目方面有关的内容，反而对于八股文的内容问的较少，我面试了十几家几乎都是开始就是在问项目，让我介绍项目的。

项目难点 / 项目亮点

这个要看每个人项目的具体情况，而本人在介绍项目的时候，对于项目的难点和亮点一开始的时候是真的不知道该如何回答，后面的几场面试中，就开始用 登录的实现，和一些vue全家桶的内容来讲解自己的难点和亮点了。

既然你的难点是登录的实现，那么讲讲你是如何解决它的

对于这个问题，还好本人去准备了一下，不然还很不好回答。我回答说，我在登录实现方面主要是利用 JWT + token 来实现了登录验证。

JWT

然后我给他讲了JWT是什么：JWT是一种用于身份验证和授权的开放标准。它由三部分组成：头部、负载和签名。在账号密码登录中，服务器会生成一个JWT并将其发送给客户端作为身份验证凭证。

token

token是什么：token是一种用于身份验证的令牌。在账号密码登录中，服务器靠JWT生成一个token。token的生成过程通常包括将用户的身份信息（例如用户名、角色等）加密到JWT的负载中，并使用服务器的密钥对其进行签名以防篡改。然后等客户端收到token后将其保存在本地中。

如何实现登录验证的

首先当客户端输入用户账号和密码后，将其发给服务器端进行验证。然后服务器校验账号密码成功后，靠JWT来生成一个令牌Token，并返回给客户端。客户端收到Token后，将其存储在本地。之后在以后的客户端登录验证中，我们需要发生一个携带token的请求发给服务器端，等服务器端收到请求并验证后，返回相关的数据。

你说你将token存储在了本地，那么你是存储在了哪里呢

这个问题问的十分的妙啊，我又能多bb两句了。首先我将token存储到了，浏览器的 localstorage 中，因为localstorage 存储在浏览器中时，除非自己手动删除，否则将会一直存在，而这样我们就只需要登录一次就行了，也就是发送一次请求就行了，方便开发和用户体验。

LocalStorage、Cookie、SessionStorage的区别

既然都聊到这里了，那就不得不多聊几句了。然后我就说存储方式除了localstorage外还有其他两种------Cookie和SessionStorage。
区别

1. Cookie:

   • 存储位置：存储在客户端（浏览器）和服务器之间来回传递的小型文本数据。
   • 生命周期：可以设置过期时间，在过期时间之前一直存在，或者在关闭浏览器时销毁（取决于是否设置了过期时间）。
   • 大小限制：每个 Cookie 通常限制为 4KB。
   • 用途：主要用于跟踪用户会话，如记录用户登录状态、购物车信息等。

2. SessionStorage:

   • 存储位置：存储在客户端，与当前窗口或标签页关联。
   • 生命周期：在当前窗口或标签页关闭时被销毁。
   • 大小限制：一般比 Cookie 更大，但每个浏览器会有不同的限制，通常在 5MB 左右。
   • 用途：主要用于临时保存页面会话数据，只要用户在当前窗口或标签页中浏览网页，数据就会一直存在，但关闭窗口或标签页后数据就会被清除。

3. LocalStorage:

   • 存储位置：也是存储在客户端，与当前域名相关联。
   • 生命周期：除非被清除，否则会一直存在。
   • 大小限制：通常比 SessionStorage 更大，一般在 5MB 到 10MB 之间。
   • 用途：常用于持久化存储用户设置、本地缓存数据等，即使关闭浏览器，数据也会保留下来。

讲一讲vue中的生命周期，并且你在项目中用了哪些生命周期

一般面试过程中这个问题都是必问的，本人每次面试都被问到了这个问题。

在vue中有着很多生命周期钩子函数，它们的执行顺序可以分为创建阶段、挂载阶段、更新阶段和销毁阶段。

创建阶段

• beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。在这个阶段，实例的数据、方法还不可用。
• created：在实例已经创建完成之后被调用。在这个阶段，可以访问实例的数据和方法，但 DOM 元素还未生成。

挂载阶段

• beforeMount：在挂载开始之前被调用，即在 render 函数首次调用之前。
• mounted：在挂载完成后被调用，即 DOM 元素已经生成并挂载到页面上之后。

更新阶段

• beforeUpdate：在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。此时，你可以对现有的 DOM 进行更改。
• updated：在数据更新之后被调用，发生在虚拟 DOM 重新渲染和打补丁之后。此时，你可以执行一些需要在组件 DOM 更新后执行的操作。

销毁阶段

• beforeDestroy：在实例销毁之前调用。此时，实例仍然完全可用。
• destroyed：在实例销毁后调用。此时，所有的事件监听器和子实例被销毁，所有的 DOM 元素被移除，实例所有的指令和过滤器被解绑。

项目中用了哪些生命周期钩子函数

我在项目中主要使用了 onMounted 生命周期函数，它是 Composition API 提供的一个生命周期钩子函数。我在项目中使用 onMounted 生命钩子函数的主要目的是在组件被挂载到 DOM 后执行一些初始化操作，例如获取数据、订阅事件、初始化插件等。

你在项目中是如何请求数据的

我在项目中主要是使用了 axios 来请求数据的，axios是一个轻量的HTTP客户端，它是基于 XMLHttpRequest 服务来执行HTTP请求的。我通过封装了axios来获取后端发送的数据，或者发送数据给后端。

你是如何封装axios的

首先我在项目中封装axios是通过以下方式来进行的：首先我创建了一个 Axios 实例，在这个实例我设置了一些默认的请求配置，比如URL、超时时间和默认请求头等。接着，我们可以通过拦截器来拦截请求和响应，进行一些自定义的处理，比如添加请求头、处理响应数据或统一处理错误等。同时我对于不同的页面请求的数据的不同封装了不同的axios请求文件，就是类似组件化思想的方式。

你在项目中是如何实现组件化思想的

听到这个题目我当场就想笑了，这不纯纯白给吗。在项目中实现组件化思想是指将页面划分为多个独立、可复用的组件，每个组件都有自己的功能和样式，并且可以被多次使用。我是通过以下的方式来实现组件化思想的

1. 组件设计：

   • 首先，需要根据页面的结构和功能设计出各个组件的结构和功能。
   • 组件应该尽可能地单一职责，即一个组件只负责一种功能或显示一种内容。

2. 组件拆分：

   • 将页面拆分为多个小的组件，每个组件包含自己的 HTML 结构、CSS 样式和 JavaScript 逻辑。
   • 拆分组件的过程中，要考虑组件之间的关联性和通信方式，以确保各个组件可以独立运行并且可以组合在一起形成完整的页面。

3. 组件复用：

   • 设计和编写的组件应该是可复用的，即可以在不同的页面或项目中多次使用。
   • 可以将通用的组件提取出来形成组件库，以便在多个项目中共享和重用。

4. 状态管理：

   • 对于需要共享状态的组件，可以使用状态管理工具（如 Vuex）来管理组件之间的数据流动，确保数据的一致性和可预测性。
   • 通过状态管理，可以实现跨组件的状态共享和响应式更新。

5. 模块化开发：

   • 在项目中采用模块化开发的方式，使用模块化的工具来管理组件的导入和导出（如ES6的Module）。
   • 模块化开发可以帮助我们更好地组织和管理代码，提高代码的可维护性和可扩展性。

你在项目中使用了vuex嘛，你使用它用来干什么操作

这个其实也是一个白给题，就是聊你对vuex的理解，我们可以将这个问题引向vue组件之间传值的方式。

在我的项目中，我使用了vuex状态管理工具。然后就讲了讲在vuex的相关概念之类的，具体可以看看本人之前写过的一篇文章，让我们来一起探索vue.js中的状态管理模式-vuex - 掘金 (juejin.cn)

在回答这个问题的时候我还讲了，vuex可以用来实现组件之间的通信。

讲讲vue中组件之间的通信的方式

果然，在我讲完vuex可以用来实现组件之间的通信，面试官果然就问了组件之间的通信方式，而对于这个方面，大家可以去看看之前本人写过的一篇文章：深入了解vue中的部分组件通信 - 掘金 (juejin.cn)

讲讲你对keep-alive的理解

这个我在面试过程中是真没想到，面试前也完全没有去看这方面相关的知识。直接就是寄了。关于这个方面，大家可以去看看这个大佬的文章：该学会用KeepAlive了宝！ - 掘金 (juejin.cn) ；这个大佬强的很。

说说你对vue双向绑定的理解

首先我们都知道，vue是MVVM的设计框架的，也就是：

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

在 Vue 中，视图是由数据驱动的，即当数据发生变化时，视图会自动更新以反映这些变化。这种数据驱动的特性使得我们不需要手动操作 DOM，而是将数据和视图进行关联，让 Vue 来处理数据和视图之间的同步。

数据响应式：

Vue 中的数据是响应式的，即当数据发生变化时，相关的视图会自动更新。Vue 使用了响应式的数据劫持技术，通过 Object.defineProperty 或 Proxy 来监听数据的变化，并在数据变化时通知相关的视图进行更新。

在 Vue 中，双向绑定是通过指令 v-model 实现的。

v-model：

它的主要职责就是：

• 数据变化后更新视图
• 视图变化后更新数据

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

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

实现原理：

• Vue 的双向绑定实现原理是基于数据劫持和发布-订阅模式。当数据发生变化时，会触发 setter 方法，通过发布-订阅模式通知相关的视图进行更新；反之，当视图中的表单元素的值发生变化时，会触发 input 事件，通过 setter 方法更新相关的数据。

能说说Vue3跟Vue2的区别吗？

Vue 3 相对于 Vue 2 带来了性能的提升、体积的减小、Composition API 的引入以及一些新特性的加入，使得 Vue 更加现代化、灵活和高效。

1. 性能提升：

   • Vue 3 在性能方面有显著的提升，主要体现在虚拟 DOM 的优化、编译器优化和运行时性能的改进上。
   • Vue 3 基于 Proxy 的响应式系统，使得渲染和更新性能更加高效。

2. 体积减小：

   • Vue 3 的体积相比于 Vue 2 更小，这得益于模块化的设计的应用。
   • Vue 3 的模块化设计使得开发者可以按需引入需要的功能，减少了不必要的代码和依赖。

3. Composition API：

   • Vue 3 引入了 Composition API，这是一种新的 API 设计风格，使得组件的逻辑可以更加灵活、可组合和可复用。

我就只能回答出来这么多，而且还是很模糊的，因为本人日常主要就使用vue3，对于vue2并不是很了解。

结语

以上就是本人在这几个星期面试过程所遇到的与vue相关的主要问题，其实还有一些问题，后面本人会另外写一篇文章进行讲解。如果您也和我一样准备春招，只为TOP20大厂，欢迎加我微信shunwuyu,一起交流面经，一起屡败屡战。欢迎大家一起来探讨面试相关的经验或者进行一些技术的交流。