本次面经共 2 轮。每轮单独成文;轮次标题重复时,以“第 N 轮”和稳定的轮次 ID 区分。
轮次导航
- 第 1 轮 · 一面(23 道题)
- 第 1 轮 · 二面(9 道题)
← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮共 23 道题。答案默认折叠,便于先自行作答。 1. Vue 3.0 相比 Vue 2.0 有哪些改进? 题目要点 响应式系统升级、Composition API、性能优化、TypeScript支持、Fragment支持 参考答案 Vue 3.0 在架构层面进行了重大重构,采用了基于 Proxy 的响应式系统替代了 Object.defineProperty,这使得可以直接监听数组变化和动态属性添加。组合式 API 的引入提供了更好的逻辑复用和类型推导能力。在性能方面,通过 Tree-shaking 支持、更小的包体积、以及编译时优化显著提升了运行效率。 2. Composition API 解决了 Options API 的哪些问题? 题目要点 逻辑聚合、代码复用、类型推导、避免mixin问题 参考答案 Options API 在处理复杂组件时会出现逻辑分散的问题,相关的数据、方法、计算属性被强制分离到不同的选项中。Composition API 通过 setup 函数将相关逻辑聚合在一起,提高了代码的可维护性。同时解决了 mixin 命名冲突和来源不清晰的问题,提供了更好的 TypeScript 类型推导支持。 3. Proxy 相比 Object.defineProperty 在响应式上有何优势? 题目要点 对象级别监听、动态属性支持、数组监听、更多拦截操作 参考答案 Proxy 可以直接监听整个对象而不需要遍历每个属性,支持动态属性的添加和删除监听。对于数组操作,Proxy 可以直接监听数组的变化,而 Object.defineProperty 需要重写数组方法。Proxy 还支持更多的拦截操作,如 has、deleteProperty 等,提供了更完整的响应式能力。 4. nextTick 如何保证 DOM 更新后执行回调? 题目要点 事件循环、微任务队列、异步更新、降级策略 ...
← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 9 道题。答案默认折叠,便于先自行作答。 1. 讲一下你觉得比较有亮点的项目 题目要点 技术选型合理性、渐进式迁移策略、自动化工具、性能保障 参考答案 在负责的一个大型电商平台重构项目中,面临着从传统 jQuery 架构向现代化 Vue 3 + TypeScript 架构迁移的挑战。项目的亮点在于采用了渐进式迁移策略,通过微前端架构实现新老系统的平滑过渡。设计了一套自动化的代码转换工具,将重复性的迁移工作自动化,提升了整体迁移效率 60%。同时建立了完善的性能监控体系,确保迁移过程中用户体验不受影响。 2. 项目的难点,你是怎么推动的 题目要点 风险控制、分阶段实施、灰度发布、跨团队协作 参考答案 最大的难点是在不影响线上业务的前提下完成大规模重构。通过制定详细的迁移计划,将整个项目拆分为多个独立的里程碑,每个阶段都有明确的交付物和验收标准。建立了灰度发布机制,新功能先在小范围用户中验证,逐步扩大覆盖范围。同时与产品、测试、运维团队建立了紧密的协作机制,确保各个环节的顺畅衔接。 3. 页面性能优化你做了哪些工作 题目要点 多维度优化、量化效果、监控体系、持续改进 参考答案 从多个维度进行了系统性优化:资源层面实施了代码分割和懒加载,将首屏加载时间减少 40%;网络层面启用了 HTTP/2 和资源预加载,优化了关键渲染路径;渲染层面使用了虚拟滚动和组件缓存,提升了长列表的交互性能;同时建立了性能监控体系,通过 Performance API 和用户行为分析持续跟踪优化效果。 4. 相关的指标有哪些,怎么去衡量的,标准是什么 题目要点 Core Web Vitals、RUM监控、分类基准、持续监测 参考答案 建立了完整的性能指标体系:Core Web Vitals 作为核心指标,包括 LCP(2.5s 以内)、FID(100ms 以内)、CLS(0.1 以内);业务指标包括首屏加载时间、页面完全加载时间、接口响应时间等。通过 RUM(真实用户监控)收集线上数据,结合 Lighthouse 进行定期检测。制定了不同页面类型的性能基准,如首页 LCP 控制在 2s 内,列表页控制在 2.5s 内。 5. WebSocket 协议原理 题库原题:说下 websocket 的连接原理 ...