TMEqq音乐前端暑期一面整理笔记（四十二）
1. Vue2 和 Vue3 有什么区别
答案
强缓存和协商缓存的区别在于：是否需要再向服务器确认。
- 强缓存靠
Cache-Control或Expires，命中时浏览器直接用本地缓存，不发请求。 - 协商缓存会发请求，由服务端根据
ETag/Last-Modified判断是否返回304。 - 实战里常见做法是静态资源走强缓存 + 文件指纹，HTML 走协商缓存。
2. Proxy 相比 defineProperty 有哪些优势
答案
Proxy 相比 defineProperty 的优势主要有：
- 可以直接代理整个对象，不用递归遍历每个属性。
- 对新增属性、删除属性、数组索引和长度变化支持更自然。
- 能拦截的操作更多，比如
get、set、deleteProperty、has等。
3. Vue 的计算属性和普通属性有什么区别
答案
计算属性本质上是“带缓存的派生状态”。
- 它依赖的数据不变时，不会重复计算。
- 更适合由多个状态推导出的结果。
- 普通方法每次调用都会重新执行，没有缓存。
4. 计算属性在项目里有哪些使用场景
答案
计算属性适合做“由已有状态推导出来的显示结果”。
- 比如列表过滤结果、表单是否可提交、价格汇总、选中状态统计。
- 它比在模板里写复杂表达式更清晰，也比每次调用方法更节省重复计算。
5. Vue 组件里的 data 为什么要写成函数返回对象
答案
组件里的 data 写成函数，是为了避免多个组件实例共享同一份数据对象。
- 如果直接写对象，所有实例会共用这份对象。
- 写成函数后，每次创建实例都会返回一份新的独立数据。
6. v-model 本质上是什么语法糖
答案
v-model 本质上是“值绑定 + 事件更新”的语法糖。
- 在原生表单元素上，通常是
value+input。 - 在组件上，Vue3 默认是
modelValue+update:modelValue。
7. v-for 里为什么要绑定 key
答案
key 的作用是帮助框架稳定识别每个节点的身份。
- 列表更新时，Diff 才能更准确复用和移动节点。
- 没有
key或key不稳定，容易出现错误复用和性能问题。
8. 为什么一般不推荐用 index 作为 key
答案
index 在列表插入、删除、排序时不稳定。
- 一旦顺序变化，原本的节点身份就会错位。
- 这会导致状态错乱、输入框值错位、组件复用异常等问题。
9. 你的项目里做了哪些性能优化
答案
项目里的性能优化可以从“资源、渲染、交互、缓存”四方面回答。
- 资源层：拆包、懒加载、图片压缩、CDN。
- 渲染层：虚拟列表、减少重排重绘、局部更新。
- 交互层：防抖节流、流式分帧刷新、避免长任务。
- 缓存层：接口缓存、静态资源缓存、本地持久化。
10. AI 对话项目里有用到 Agent 相关的东西吗
答案
AI 相关题最好回答成“工具边界 + 落地方式”。
- AI 适合做样板代码、重构建议、测试用例、文档整理和方案对比。
- 真正落地时要给它足够上下文，比如代码规范、目录结构、接口文档、历史实现和约束规则。
- Skills / MCP / Agent 可以理解为不同层级的能力扩展：Skills 偏可复用能力包，MCP 偏工具和上下文接入协议，Agent 偏任务编排和执行过程。
- AI 不能代替工程判断，核心链路仍然要靠人 review 和兜底。
11. 你觉得 AI 对前端开发有什么影响
答案
AI 对前端开发最大的影响是提升重复性工作的效率，同时提高了工程师对抽象和判断力的要求。
- 样板代码、文档、测试、重构建议会更快。
- 但架构设计、业务建模、线上风险控制仍然需要人来负责。
- 所以前端工程师不会被简单替代，但工作方式会被明显改变。
12. 你怎么理解 Prompt、Skills、MCP 和 RAG
答案
AI 相关题最好回答成“工具边界 + 落地方式”。
- AI 适合做样板代码、重构建议、测试用例、文档整理和方案对比。
- 真正落地时要给它足够上下文，比如代码规范、目录结构、接口文档、历史实现和约束规则。
- Skills / MCP / Agent 可以理解为不同层级的能力扩展：Skills 偏可复用能力包，MCP 偏工具和上下文接入协议，Agent 偏任务编排和执行过程。
- AI 不能代替工程判断，核心链路仍然要靠人 review 和兜底。
13. 你做项目过程中遇到最难的点是什么，怎么解决的
答案
回答这类题最重要的是讲清楚“问题 -> 分析 -> 方案 -> 结果”。
- 先说难点是什么，为什么难。
- 再说你怎么定位问题、拆分问题。
- 最后讲采取了什么方案、为什么这么选，以及结果如何。
14. 讲一下自己实现虚拟列表的思路
答案
虚拟列表的核心是“只渲染可视区附近的数据”。
- 根据
scrollTop算出当前可见的起止索引。 - 只渲染这部分数据，其他区域用占位高度撑开滚动条。
- 如果是不定高列表，还要维护高度缓存和偏移量。
15. 讲一下 JWT 双 Token 登录机制
答案
双 Token 方案一般是 access token + refresh token。
access token生命周期短，用于日常接口访问。refresh token生命周期长，用于换取新的access token。- 单点登录通常依赖统一身份中心，多个系统共享登录态，前端只是消费统一登录结果。
- 生产里要考虑并发刷新、失效重登和登出联动。
16. 为什么会存在跨域
答案
浏览器安全策略最核心的是同源策略，它限制不同源脚本随意读取彼此资源。
- 跨域常见解决方案是 CORS、反向代理、JSONP（仅限 GET）。
- 另外还有 CSP、XSS 防护、CSRF 防护、沙箱 iframe 等安全机制。
- 面试里最好补一句：前端只是一层防线，真正的数据权限还是要靠后端控制。
17. JSONP 这种跨域方式你了解吗
答案
浏览器安全策略最核心的是同源策略，它限制不同源脚本随意读取彼此资源。
- 跨域常见解决方案是 CORS、反向代理、JSONP（仅限 GET）。
- 另外还有 CSP、XSS 防护、CSRF 防护、沙箱 iframe 等安全机制。
- 面试里最好补一句：前端只是一层防线，真正的数据权限还是要靠后端控制。
18. 强缓存和协商缓存有什么区别
答案
强缓存和协商缓存的区别在于：是否需要再向服务器确认。
- 强缓存靠
Cache-Control或Expires，命中时浏览器直接用本地缓存，不发请求。 - 协商缓存会发请求，由服务端根据
ETag/Last-Modified判断是否返回304。 - 实战里常见做法是静态资源走强缓存 + 文件指纹，HTML 走协商缓存。
19. 讲一下事件冒泡和事件捕获
答案
事件传播分三个阶段：捕获、目标、冒泡。
- 捕获是从外到内。
- 到达目标元素后执行目标阶段。
- 冒泡是从内到外。
- 默认大多数事件监听触发在冒泡阶段。
20. 事件委托为什么适合列表场景
答案
事件委托适合列表场景，是因为很多子节点事件可以统一交给父节点处理。
- 不需要给每一项单独绑事件，节省内存和注册成本。
- 动态新增节点也能天然生效。
- 本质利用的是事件冒泡。
21. flex 实现左侧自适应、右侧固定宽度布局怎么做
答案
Flex 题通常从三个层次回答：
- 主轴和交叉轴决定布局方向。
flex-grow决定剩余空间怎么分，flex-shrink决定空间不够时怎么压缩，flex-basis决定初始主轴尺寸。- “按比例分配剩余空间”里的剩余空间，就是容器可用空间减去各项基础尺寸之后的空间。
22. BFC 是什么，有什么作用
答案
BFC 是块级格式化上下文，可以理解成一个独立的布局作用域。
- 它能阻止外部和内部元素相互影响。
- 常见作用有：清除浮动、避免外边距重叠、形成独立布局区域。
23. 手撕：柯里化
答案
柯里化就是把“接收多个参数的函数”改造成“分批接收参数的函数”。
- 每次调用先收集一部分参数。
- 参数数量满足时再真正执行原函数。
- 常见用途是参数复用和函数组合。
24. 你怎么看 AI 会代替程序员这个说法
答案
更准确的说法不是“AI 代替程序员”，而是“会使用 AI 的程序员会提升效率”。
- AI 很擅长重复性、格式化、规则明确的工作。
- 但需求理解、架构取舍、业务判断和线上兜底仍然需要工程师。
- 所以被替代的不是职业本身，而是低效的工作方式。