牛客美团骑行前端暑期面经整理（Vue / 工程化 / 性能优化 / AI 落地）（十三）
收录日期：2026-05-06
关键词：前端、Vue、工程化、E2E、性能优化、TypeScript、AI、Prompt、架构设计
1. 数据治理怎么做？如何保证数据质量？
参考答案
- 数据治理：围绕“口径一致、可追溯、可用、可信”做制度与技术体系建设，常见组成：
- 元数据管理（表/字段血缘、owner、描述、标签、分级）；
- 数据标准（命名规范、维度/指标口径、数据字典）；
- 权限与分级（敏感字段脱敏、访问审计）；
- 质量监控（完整性/准确性/一致性/及时性/唯一性）。
- 保证质量的手段：
- 入口校验：埋点/上报 schema 校验、必填/枚举/范围约束；
- 链路对账：前后端、日志与业务库、上游与下游做抽样对账；
- 质量规则：阈值报警、离群检测、重复率/空值率检测；
- 变更治理：字段变更评审、灰度、版本化（兼容旧字段）。
2. E2E 测试怎么做？关键点是什么？
参考答案
- 工具常见：Playwright / Cypress。
- 关键点：
- 稳定性：减少对易变 UI 的依赖，优先用
data-testid等稳定选择器； - 可重复：测试前置清理与数据准备（mock/测试账号/seed 数据）；
- 分层：关键路径用少量 E2E 覆盖，更多逻辑放在单测/组件测试；
- 环境隔离：独立测试环境与回放数据，避免污染生产数据；
- 失败定位：录屏、截图、trace、网络请求日志。
- 稳定性：减少对易变 UI 的依赖，优先用
3. 解释一下闭包？前端里闭包常用在哪？
参考答案
- 定义：函数与其“词法作用域”一起打包形成闭包，使得函数在外层函数返回后仍能访问外层变量。
- 常见用途：
- 封装私有状态（模块模式、工厂函数）；
- 回调/事件处理器保留上下文；
- 函数柯里化、偏函数；
- 防抖/节流实现中保存定时器与上次参数。
- 注意：闭包不是泄漏的根源，但被长期引用的闭包会让其捕获的对象无法回收，需要留意引用链。
4. 原子化 CSS（Atomic CSS）是什么？优缺点？
参考答案
- 思路：用大量“单一职责”的类（如
p-4、text-center）组合样式（Tailwind 属于此类）。 - 优点：复用高、样式可预测、减少命名成本、打包可做按需裁剪。
- 缺点：类名冗长、可读性争议；复杂样式仍需要抽象（组件/组合类）；需要规范化的设计系统支撑。
5. Vue 中组件通信有哪些方式？如何选型？
参考答案
- 方式：
- 父子：
props/emit（最推荐，数据单向流）； - 跨层：
provide/inject（依赖注入，适合插件/上下文）； - 同级或跨多层：状态管理（Pinia/Vuex）；
- 事件总线（不推荐，难追踪）。
- 父子：
- 选型：优先保持“数据流清晰”，能用
props/emit不上全局状态；跨页面/多人协作的大状态才上 store。
6. Vuex/Pinia 里 action 与 mutation（或 store action）怎么划分？
参考答案
- Vuex 经典划分：
mutation：同步、可追踪的状态变更；action：异步、组合多个 mutation、封装业务流程。
- Pinia 更倾向把逻辑放在 store 的 action 里（可同步可异步），但仍建议：
- 状态修改集中在 store 内部；
- 业务流程（请求/缓存/错误处理/重试）封装在 action；
- 组件只消费 state/getters 与调用 action，减少“组件里写业务”。
7. 前端如何做性能优化？（从定位到落地）
参考答案
- 定位：Performance 面板、Lighthouse、Web Vitals（LCP/INP/CLS）、线上 RUM。
- 加载性能：
- 代码分割（route-level split）、懒加载、按需引入；
- 缓存策略（强缓存/协商缓存）、CDN、HTTP/2/3；
- 资源优化（图片压缩与
srcset、字体子集、preload/prefetch）。
- 运行时性能：
- 减少长任务（拆分任务、Web Worker）；
- 降低重排重绘（合成层、避免 layout thrash）；
- 列表虚拟化、合理 memo/缓存计算结果。
- 工程治理：性能预算（bundle size）、CI 指标门禁、线上回归监控。
8. Vue 响应式原理与更新流程大致是怎样的？
参考答案
- Vue 3：基于
Proxy拦截get/set，get时收集依赖（track），set时触发更新（trigger）。 - 更新机制：
- 组件渲染函数读取响应式数据→依赖被记录到 effect；
- 数据变化→触发 effect 进入调度队列→批量刷新（microtask）；
- 生成新 VDOM → diff → patch 到真实 DOM。
9. Vue 的 diff 为什么更快？常见优化点有哪些？
参考答案
- 核心：在同层级对比节点，利用 key 做复用与最小移动。
- 常见优化点：
patchFlag/静态提升（编译期标记动态部分）减少运行时比对；- 列表使用稳定 key，避免用 index；
- 对大列表配合虚拟滚动，避免无意义 diff。
10. 如何做前端项目重构？如何保证不“重构出事故”？
参考答案
- 策略：小步快跑 + 可回滚。
- 把“重构目标”拆成可独立上线的切片（模块、页面、能力）；
- 先补齐监控与测试（关键路径 E2E + 单测）；
- 引入 feature flag 灰度、双写/对比（必要时）；
- 通过 lint/类型系统/约束工具把“新规范”固化到 CI。
- 验证：回归用例、线上指标对比（错误率、耗时、关键转化）。
11. Prompt 设计要点是什么？如何让输出更可控？
参考答案
- 明确：目标、输入边界、输出格式（JSON/表格/要点）、禁止项。
- 提供：高质量示例（few-shot）、评判标准（rubric）、反例（不要的风格）。
- 限制：让模型先列假设/澄清问题；必要时要求引用上下文片段（减少幻觉）。
- 流程：将复杂任务拆成“检索→草稿→自检→最终输出”的多步提示。
12. 如何把 AI 融入研发流程（以 Cursor/代码助手为例）？
参考答案
- 适合交给 AI：样板代码、重命名、提取函数、生成单测、文档初稿、快速查漏补缺。
- 人需要把关：
- 需求/边界定义、关键架构决策；
- 安全与隐私（避免泄漏敏感信息）；
- 复杂逻辑正确性（通过测试/审查验证）。
- 落地建议：建立 Prompt 模板、代码规范与审查清单，把“AI 输出可验证”变成流程的一部分。