关于项目可能会问到的问题

一、 Vue.js 核心与生态相关问题

这类问题会考察你对Vue框架本身的理解。

1. 基础原理：

“你在两个项目中分别用了Vue2和Vue3，能说说你理解中它们最大的区别是什么吗？”

答：Vue2应用的是Option API，Vue3用的是Composition API，Vue2在声明、应用组件的时候需要比较多的步骤，后期更改模块或者是更新模块，都比较麻烦。Vue3用Composition API，很多时候都只需要引入就行，Vue3会自动声明，就减少很多的麻烦。

Compostition API就提供了更灵活的组织模式，处理复杂逻辑时也可以将相关的逻辑抽取到组合函数中，提高代码可读性和可复用性。

一开始在“易购商城”使用Vue2是因为我对该版本更熟悉，初学者跟着视频学习，更熟悉一点。后期在灵犀AI项目使用Vue3，第一是更加新的版本，了解更多新版本的特性，Vue3的性能优势，尝试一些使用Composition API，更好的更小的打包体积

“Vue3的Composition API相对于Vue2的Options API有什么优势？你在‘灵犀AI’项目中是怎么使用Composition API的？”

答：Composition API的核心优势还挺多的，比如说在逻辑上，Vue2一个功能的相关的代码（数据、方法、计算属性、生命周期）要全部强制拆分到data/methods/mounted等等不同选项，组件复杂后，理解一个功能要反复阅读，这是我在做Vue2项目里的体会。

Composition的优势在于允许我们将同一个业务的逻辑相关的所有代码都写在一起，（方法、生命周期钩子、操作函数），全部放在script setup里面，代码的可读性和可维护性都高很多。

Vue3也对TypeScript有更好的支持，不过我暂时还没有使用过TypeScript。

在’’灵犀AI’这个项目中，我封装了组合式函数chat.js，在Composition API里面就可以用这个封装好的函数直接调用，一行代码就可以引入功能，复用性提高，不需要重复的代码。在逻辑上也进行隔离，只需要负责处理信息，组件就只需要关注在交互上就可以了。而且也好测试，可以单独测试chat.js。

“Vue的响应式原理能简单说一下吗？Vue2和Vue3的实现有什么不同？”

答：Vue的响应式原理是它的核心机制，简单来说就是数据发生变化时可以自动更新视图。Vue的响应式完成三件事：1。依赖收集，数据被读取时，记录下谁用到了这个数据。2。派发更新：在数据被修改时，通知所有用到这个数据的地方进行更新。3.触发渲染：最终驱动视图重新渲染。

Vue2的实现是基于OBject.defineProperty，Vue2通过遍历数据对象的所有属性，使用ES5的Object.defineProperty将它们转换为getter和setter。

Vue3的实现是基于Proxy，使用ES6的Proxy，Proxy可以拦截整个对象的操作，而不是单个属性。

image-20251108170959024

“你用过Pinia，那能说说Pinia和Vuex的区别吗？为什么Vue3项目更推荐Pinia？”

答：Pinia的操作更加简单，移除了Mutations，在Vuex中Mutations同步操作，用于修改State，而Actions是异步操作，提交Mutations来修改State。在Pinia中，Actions可以处理异步也可以直接修改State。

而且Pinia的Store本身就是一个组合式的函数，与Composition API的理念是完全一致的。模块化管理更加简单，Vuex的模块需要嵌套和命名空间，而Pinia通过不同的store文件就自然划分好了。

2. 状态管理：

“在‘易购商城’里，你用Pinia管理了哪些状态？为什么要选择用状态管理库，直接用组件通信不行吗？”

1.用户的状态：登陆状态、用户详细信息、认证的token

2.购物车的状态：购物车的商品列表、是否选中结算、最后的更新时间

3.全局UI的状态：全局的加载状态、主题模式、全局的消息通知

对于简单的父子通信其实直接用props/$emit就足够了，但是在易购商城这种复杂的系统里，组件通信问题很多，比如说多层级的Props传递，组件通信的路径会变得很复杂，但是如果用Pinia，或者是事件总线，就可以减少很多麻烦，没有直接的父子关系。但是事件总线的事件来源不清晰，而且变得难以维护。

并且在这个项目里，多个组件都要访问和修改到同一个购物车的数据，要添加商品到购物车、显示购物车的预览、结算读取购物车等等。如果没有集中状态管理的话很容易出现数据不同步、逻辑分散难以调试。

Pinia的解决方案就直接很多，单一的数据源，消除数据的不一致。任何的组件都可以直接访问，不需要传递。

“‘灵犀AI’项目中，你是如何将Pinia的状态持久化到localStorage的？这个过程是同步还是异步的？需要考虑什么坑？”

用localStorage其实是保证用户在刷新页面或重新打开浏览器还能保持对话历史、用户偏好。

我这里使用了一个pinia持久化的插件，在我的store文件里面添加pinia-plugin-persiststate，然后配置一个persist属性，在需要持久化的地方，消息对话的js里面就加一个persist:true，这样持久化配置。

这个过程是一个同步的过程，所有的操作都会阻塞主线程直到完成

需要考虑的坑和解决方案：

1.性能问题:频繁的写入导致页面会卡顿，可以做一个防抖避免频繁写入

2.数据的大小也有限制，localStorage只有5MB，可以解决，就是数据压缩+自动清理的功能

3.数据类型丢失：JSON序列化的局限性。JSON.stringify会丢失Date Map Set等特殊对象

4.隐私的考虑，比如说API密钥，就要选择性地使用localStorage持久化

image-20251114111515512

3. 路由：

“你说在‘易购商城’里用路由守卫做了权限控制，能详细说说实现逻辑吗？如果用户没登录，尝试访问订单页会发生什么？”

在“易购商城”项目中，我设计了一套基于Vue Router的前端权限控制系统，主要目的是防止未授权用户访问敏感页面。

权限控制的核心思路是，在路由跳转前进行拦截，验证用户权限再决定是否放行。

如何实现：就是在路由定义中meta字段声明每个路由的权限要求，受保护的加上meta:{requiresAuth}。在路由配置文件中实现全局守卫，前置守卫，检查通过就可以放行。

“Vue-Router的路由模式，Hash和History模式有什么区别？你们项目用的是哪种，为什么？”

Hash模式用的是一个#号后面再加地址，但是History模式有详细的分页名。我们用的是History，因为History方便辨识，简洁好看。缺点就就是要在部署的时候，在nginx的配置文件里面配置一下。

二、 项目深度与实现细节问题

这类问题会针对你简历上写的“项目亮点”进行深挖，是面试的重点。

针对【灵犀AI对话平台】

1. LLM API 调用模块：

  • “你设计的‘统一的LLM API调用模块’具体是怎么封装的？是基于fetch还是axios？”
  • “流式响应” 是高频重点问题：
    • “请详细解释一下你是如何实现流式消息响应的？” （期望你提到 Fetch API 的 Response.body 返回一个 ReadableStream，然后使用 Reader 读取，并逐步更新界面）
    • “在处理流式数据时，如何控制对话的上下文？上下文是以什么格式传递给后端的？”
    • “如果流式传输过程中网络中断了，你的‘自动重试机制’是如何工作的？重试多少次？会重新发送整个对话吗？”

2. 状态持久化：

  • “你的对话状态持久化方案，Pinia和localStorage是如何协作的？是每次状态变化都立刻存吗？会不会有性能问题？”
  • “localStorage有大小限制（通常5MB），如果用户的对话历史非常长，你怎么处理？”

3. 性能与体验：

  • “Markdown渲染是同步进行的吗？如果接收到一个很长的Markdown响应，会阻塞页面吗？你是怎么优化的？”
  • “深色/浅色主题切换是如何实现的？是用CSS变量吗？”

针对【易购商城】

1. 状态管理：

  • “购物车状态的管理，你考虑了哪些信息（商品ID、数量、规格、单价等）？如何保证在页面刷新后购物车数据不丢失？”
  • “用户登录状态是如何管理的？Token存在哪里？”

2. 工程化与开发流程：

  • “你为什么选择Mock.js？它是如何拦截Ajax请求的？和直接写死数据比起来有什么好处？”
  • “前后端分离开发，除了Mock数据，你们还有哪些协作规范（比如接口文档）？”

三、 JavaScript / CSS / 浏览器基础问题

框架是建立在基础之上的，这些问题必问。

  • JavaScript:
    • “说说let、const、var的区别。”
    • “什么是闭包？你在项目中有实际用到闭包的场景吗？”
    • “什么是Promise？你在项目中如何处理多个异步请求？（比如并发请求或多个有依赖的请求）”
    • “async/await有什么优点？”
    • “什么是事件循环？”
  • CSS:
    • “如何实现一个元素的水平垂直居中？”
    • “说说Flex布局和Grid布局，以及你分别在什么场景下使用它们？”
    • “你如何理解CSS的盒子模型？”
  • 浏览器:
    • “从输入URL到页面显示，发生了什么？” （经典八股文）
    • “什么是跨域？你在开发中怎么解决跨域问题的？” （Mock.js其实就是一种前端解决跨域的方式）

四、 场景题 & 软性问题

这类问题考察你的解决问题能力和综合素养。

  • “在项目中遇到的最大的技术挑战是什么？你是怎么解决的？”
  • “如果‘灵犀AI’平台的用户反馈说，在网速慢的时候，聊天界面会卡顿，你会从哪些方面去排查和优化？”
  • “你的个人博客主要写什么内容？最近一篇让你印象深刻的技术文章是什么？”
  • “你为什么选择前端这个方向？你对你的技术生涯有什么规划？”
  • “你为什么要出国留学？这个计划对你未来的职业发展有什么影响？”