两年前端杭州面试实录：Vue、微前端与项目深挖复盘

2年前端坐标杭州二月底开始投简历三月初集中面试两周多时间约了十二家面了十家拿了四个offer薪资在预期范围上浮了大概15%。这篇面经把整个过程中值得说的东西都整理了杭州前端市场的真实情况、面试中反复出现的题目、我踩过的坑、复盘后的补强思路。内容都是亲历题目也许和你的面试不完全一样但背后的考察逻辑基本是相通的。先交代背景方便你校准参考价值。我是普通本科非科班2年经验一直在做B端业务系统技术栈以Vue为主2.x到3.x都写过项目里用过微前端、做过大文件上传、对接过SSE推送、也写过一些Canvas相关的可视化页面。React只在业余项目碰过水平停留在能看懂、能改的层面。面下来最大的感受是杭州2年这个档位面试官已经不太care你会不会背八股文更关心的是你在项目里到底干了什么、遇到问题怎么排查、有没有自己的思考。1. 杭州前端求职市场速写机会不少但坑也很明显先说整体感受。杭州的前端岗位池子大但分层特别明显。最高层自然是几家大厂阿里系、网易、字节杭州都有。这类公司对学历和背景有硬性筛选2年经验如果之前没有大厂经历简历这关就可能被卡住。我朋友在其中的某家做前端帮我内推过一次hr看完简历后的反馈是经验偏短但可以给个电话面机会。电话面聊的还可以约了线下面后面会讲具体经过。大厂之外杭州还有大量的中厂和C轮左右的创业公司比如做电商SaaS的、做低代码平台的、做企业服务软件的这些是2年前端的主战场面试流程一般是一到两轮技术面加一轮HR面效率高的当天就能走完。再往下就是外包和传统企业自建团队面试难度明显降低但薪资和平台空间也有限。这里有个值得注意的现象杭州的外包岗位比我想象中多得多。Boss直聘上打招呼的大概率是外包HR。不是说绝对不碰但一定要确认清楚是人力外包还是项目外包两者差别巨大。我面了一家人力外包到某银行的项目技术面问得很浅基本是Vue生命周期、组件通信这种程度的题目过了之后HR报的薪资却压得很低理由是银行项目稳定加班少。这种岗位的优势是稳定劣势是技术成长慢、简历含金量低2年经验的人去性价比不高除非你特别需要过渡期。面试节奏方面杭州的公司普遍喜欢连续面。很多公司上午一面、下午二面甚至一次性面完三轮然后等HR通知。这对体力和状态管理要求比较高我有一场是上午面完一家下午紧接着去另一家结果下午明显脑子转得慢一个平时闭眼能写出来的排序题差点卡壳。所以我的建议是每天最多安排两场上午下午各一场中间留足休息和复盘的时间不要为了赶场子贪多。宁可多花几天面完也不要面三场全都砸了。另外杭州很多公司的面试流程会绑定一个简历系统要求提前在系统里填一些基本信息。**这部分不要只填中规中矩的内容有很大概率被面试官拿出来当面试起点。**我会在后面的项目深挖章节详细讲这块怎么准备。2. 八股文考得没你想象的多高频题目与答题策略复盘我那轮的面试大约十场纯八股文概念背诵型问题占比大概只有三成左右。剩下七成是项目深挖、场景设计、手写题。但八股文依然是入场券答得不好会直接导致面试官怀疑你的基础扎实度。先复盘一下我在杭州面试中被问得最多的八股题。因为本身有两年Vue经验所以面试官几乎都会围绕Vue展开React系的题目基本没遇到。以下是我整理出的高频题以及我自己的答题思路。2.1 事件循环这套组合拳几乎每家都问说说事件循环机制是我遇到频率最高的一道题大概有七家公司问到了这个点。建议答的时候从三个层次展开首先Javascript是单线程的这是为了操作DOM的一致性其次任务分宏任务和微任务一次事件循环会先执行一个宏任务再清空当前的微任务队列微任务里的微任务也会在当前循环里执行最后结合代码说执行顺序。面试官常考的内容是输出顺序题比如下面这个经典代码console.log(1); setTimeout(() { console.log(2); Promise.resolve().then(() { console.log(3); }); }, 0); Promise.resolve().then(() { console.log(4); setTimeout(() { console.log(5); }, 0); }); console.log(6); // 输出1, 6, 4, 2, 3, 5答这种题的关键是记住Promise的回调会进入微任务队列setTimeout的回调会进入宏任务队列同一轮事件循环里微任务优先于宏任务。上面这题的细节在于微任务里产生的setTimeout会排进下一轮宏任务而宏任务里产生的微任务会在该宏任务之后、下一轮宏任务之前执行。不过光会这题没用。面试官真正想通过事件循环考察的是你能否理解异步编程的底层逻辑以及能否延伸到浏览器渲染时机。我后来在回答里加上了微任务执行阶段浏览器不会渲染但宏任务之间可能触发渲染这个点明显能看到面试官的态度有变化。2年这个档位能被问到这个程度已经是加分项了。2.2 Vue2和Vue3的响应式原理从源码层面答Vue响应式原理是高频中的高频但问到2年这种经验档位时一般不会只停留在Object.defineProperty vs Proxy的对比上。我的回答思路是这样的先讲Vue2的局限Object.defineProperty只能劫持到对象已有属性的读取和赋值新增或删除属性都不在劫持范围内所以Vue2才需要Vue.set和Vue.delete来弥补。数组方面需要重写七个变更方法是因为直接修改数组下标无法触发getter/setter。再讲Vue3为什么用ProxyProxy可以代理整个对象包含了属性的新增、删除、读取、赋值还包括has、ownKeys这些操作。所以Vue3不需要Vue.set直接给响应式对象新增属性就能自动触发更新。同时Proxy是惰性的配合WeakMap做依赖收集性能比Object.defineProperty递归遍历要好。但这里容易踩一个坑面试官会追问Proxy相较Object.defineProperty有什么短板。这个问题很多人都没准备过。完整的回答有两层第一Proxy的浏览器兼容性没有defineProperty好不过现在基本可以不考虑IE了第二Proxy的get/set拦截是异步的在同一个事件循环里多次修改同一个属性时视图更新会被合并实际上Vue3的调度器干了这件事。我当时在这块的发挥不算好后来复盘补了功课。如果面试官继续往深了问Vue3的依赖收集为什么要用WeakMap而不用Map我建议你也准备一下。因为WeakMap的key是弱引用当组件实例被销毁时相关的依赖关系可以被垃圾回收掉避免内存泄漏。这个点能答出来面试官一般会印象非常深刻。2.3 浏览器缓存机制要结合请求来看浏览器缓存这题也被问了多次。结论要清晰强缓存和协商缓存两套强缓存优先命中后不发送请求可直接用本地副本使用Expires、Cache-Control、Pragma这三个响应头来标识协商缓存需要发送请求当服务器判断资源未变化时返回304让浏览器用本地缓存相关字段是Last-Modified/If-Modified-Since和ETag/If-None-Match。面试官更喜欢的追问点是如果前端改了代码用户还是拿到了旧资源怎么办这也是杭州这边业务背景浓厚、面试官都比较务实导致的。标准操作是上线时给静态资源的文件名或URL加hash配置nginx的Cache-Control为no-cache注意不是no-storeno-cache的意思是每次使用前都要和服务器验证这样可以配合协商缓存实现更新。你还要能说清楚加了hash的资源可以用长强缓存没加hash的入口HTML不要用强缓存。2.4 跨域问题重点在实战场景跨域在B端项目里太常见了基本是面试必问。务必要能说出浏览器同源策略限制的到底是什么以及几种主流方案各自的适用场景。JSONP只支持GET请求需要服务端配合已经很少用了但面试题里偶尔会考原理。CORS最正统的方案通过服务端设置Access-Control-Allow-Origin来允许跨域访问前端几乎不需要动只需要区分简单请求和预检请求。反向代理开发和部署时用nginx或者项目构建配置里的proxy实现跨域转发前端无感知。postMessage主要用于iframe跨域通信。我说的重点是面试官不爱听你背方案列表他喜欢听你说我的项目里用的是哪一种为什么用这一种。我当时说生产环境用nginx的反向代理是因为我司后端接口域名是独立的前端静态资源部署在CDN上必须靠nginx来转发请求到后端域名以规避跨域。然后顺带提了一嘴预检请求被高频触发时的优化方法用Access-Control-Max-Age缓存预检结果。就这么一嘴面试官明显就觉得你是真实做过项目的而不是背了一通概念。2.5 防抖节流、深拷贝、原型链这三大件基本是必考这三样是手写题和概念题的重灾区。防抖节流一定不是让你背概念而是当场上手写。我遇到的一个写法是让写一个带cancel方法的防抖函数这个要注意。常规的防抖函数只处理timeout和clearTimeout面到2年经验的岗位时面试官更在意你是否处理了用户取消操作的场景function debounce(fn, delay 300) { let timer null; function debounced(...args) { if (timer) { clearTimeout(timer); } timer setTimeout(() { fn.apply(this, args); clearTimeout(timer); timer null; }, delay); } debounced.cancel function() { if (timer) { clearTimeout(timer); timer null; } }; return debounced; }深拷贝的问题在于很多候选人都知道JSON.parse(JSON.stringify(obj))但对它的局限性说不出个所以然。面试官想听到的点是JSON方案丢失函数、undefined、Symbol、循环引用会报错、Date对象会变成字符串、正则表达式会变成空对象。如果面试官让你写一个完整版深拷贝你就需要处理可迭代对象、循环引用用WeakMap做缓存、嵌套对象和数组。原型链的坑在于很多人会背每个对象都有__proto__属性每个函数都有prototype属性这句话但真要画一条原型链的继承关系时容易出错。建议准备的时候手动画一遍function Foo() {}然后const f new Foo()的原型链画出f.__proto__ Foo.prototype、Foo.prototype.__proto__ Object.prototype、Object.prototype.__proto__ null这三组关系。把这个关系熟练掌握你就能应对绝大多数原型链问题。3. 项目深挖比想象中更重要2年前端必须扛得住灵魂追问这是我这次面试最大的感受。2年这个经验档很特殊面试官默认你做过一定的业务需求不会再像面应届生那样主要考基础而是想通过你展示的项目来判断你处理真实场景的能力。项目深挖的套路几乎一样你介绍一下最拿得出手的项目 → 问实现细节 → 问技术选型的原因 → 问遇到什么难点 → 问你怎么解决 → 问你如何验证效果。下面详细复盘几个我项目里被追问到的关键问题。3.1 微前端面试官几乎必问为什么和隔离怎么做我最近的项目里用了微前端架构qiankun方案每个面试官都会在这个项目上停留很久。整理成三个层次第一层问为什么用微前端。答这个问题的关键是要结合业务场景不要背解决巨石应用这种空话。我们的情况是老系统是一个庞大的Vue2单页应用团队扩到三十多人代码改造成本高每次发布都要全量回归。后面接了一个新业务模块和主应用使用的脚手架版本都不一样共享代码困难于是决定引入乾坤把新业务模块做成独立子应用按需加载。第二层问子应用之间的通信怎么做。这里有个常见的认知误区是微前端通信一定要用状态管理库比如Vuex。实际项目里我们用的是乾坤自带的数据通信机制经过globalState和emit来广播子应用通过onGlobalStateChange去接收。如果状态太复杂会自己隔离出来一个共享模块子应用依赖这个模块来读写。这里面试官往往追问为什么不用vuex我的理由是微前端的子应用本身就是独立的运行环境通过全局状态管理库反而会将子应用耦合在一起违背了微前端的初衷。第三层问样式隔离和JS沙箱。这个算是进阶问题了。qiankun的样式隔离方案主要是scoped属性加上运行时动态插入/移除样式表但对某些全局样式冲突不一定有效需要自己配置css-module或者给子应用加统一的样式前缀。JS沙箱则通过Proxy拦截全局对象的读写来隔离这个点能答出来面试官基本就会认可你在微前端上不是停留在会用的层面。3.2 大文件上传从分片到断点续传再到并发控制这个项目是我给内部管理系统做的需求是让运营人员上传几百MB甚至上GB的视频素材。被问到很多次核心就两个点分片上传和断点续传。分片上传的思路要能说清楚文件通过File对象的slice方法切分成固定大小的分片比如每个2MB然后每个分片独立上传到服务端服务端等所有分片都上传成功后再通知后端合并成完整文件。这个方案的好处是避免单次大请求占满带宽、上传中途失败了不需要整体重传。断点续传则是在分片的基础上前端在上传前先向后端询问哪些分片已经成功上传然后只上传缺失的分片。这里的关键是每个分片要有唯一的标识常规做法是用文件的md5值作为文件唯一标识再用md5 分片序号作为分片标识。md5的计算在浏览器端可以用hash-wasm这类库配合worker计算避免主线程卡死。有家公司面试官还追问了如果同一个文件的不同用户上传你打算如何标识这实际上考察你对分片设计是否考虑过并发场景方案是加上用户ID作为前缀避免不同用户的分片互相覆盖。还有一个被问到的热点是大文件上传时前端页面如何实时展示进度。我当时的方案是用XMLHttpRequest的upload.onprogress回调因为fetch不支持进度事件而且XHR兼容性更好。上传时把已完成分片的大小累加除以总大小得到进度百分比再加一个并发控制同时最多上传3个分片用Promise队列去管理每完成一个就从队列里取下一个。这块建议大家自己写一遍代码实现面试时直接贴思路就会非常加分。3.3 SSE和WebSocket的选择实时推送场景的技术选型项目里有个消息通知模块服务器需要给前端推送数据我用的SSE。这个点击概率极高因为很多2年经验的人用WebSocket用得比较多但说不出为什么在某个场景下选SSE。我的回答是SSEServer-Sent Events是服务端单向推送基于HTTP协议浏览器原生事件源接口断线自动重连。在只需要服务器推消息、前端不需要往服务器发请求的场景下非常合适比如消息通知、行情推送。SSE的实现相对简单复杂度低不容易踩坑。如果只是做服务端单向推送WebSocket属于杀鸡用牛刀。面试官追问的是如果一端掉线了SSE和WebSocket各自怎么处理SSE有原生的重连机制浏览器会按照事件源的配置自动重连重连时还能通过Last-Event-ID告诉服务端上次收到了哪条消息。WebSocket则需要自己实现心跳和重连逻辑前端要定时发ping服务端回pong如果长时间没有收到pong就主动断开重建。能把这个对比说清楚这道题基本就满分了。3.4 低代码平台和可视化大屏如何讲出一个有深度的故事在杭州2年前前端经常碰到低代码、可视化大屏、报表平台之类的项目。我有过二次开发avue-data大屏和配合BPMN做审批流程设计的经验这两块也被问过。大屏项目的追问重点在于性能。20多个图表数据同时渲染是怎么优化首屏加载速度的我的回答是分两步第一步尽量让图表组件按需加载不要全量引入ECharts而是按图表类型注册第二步用virtualized渲染替代真实DOM逐条绘制因为大屏的榜单类数据量特别大用canvas来实现自绘列表能降几个数量级的DOM节点。面试官对这个方案比较认同因为很多候选人面对大屏性能问题时只会答懒加载。BPMN这块主要是自定义流程设计的应用场景。面试官关心的是你如何把BPMN的工具链嵌入到公司已有的项目里以及流程下发之后前端如何监听流转状态。这块没有太深的技术关键是展示你具备对接第三方开源工具并做二次封装的能力。因为简历里写了这个经历我在面试中很自然地带出看源码解决问题的经历效果不错。4. 手写题和算法题2年经验该掌握的边界在哪手写题在杭州2年经验的面经里出现得不算少但难度普遍适中不会像应届生那样考一大堆贪心动态规划。下面是出现频率和准备思路。4.1 手写题高频清单我整理出必须熟练掌握的几类数组扁平化至少会两种方法一种是递归一种是reduce加concat的链式写法。手写Promise.all和Promise.race要处理好空数组、失败时的reject。手写call、apply、bind核心是给context加临时函数、调用后删除。手写new操作符创建对象、绑定原型、绑定this、处理返回值。实现一个EventEmitter发布订阅on、emit、off、once。手写一个非常精简的Vue响应式defineProperty版或Proxy版。其中EventEmitter是很多公司喜欢问的因为它同时考察了你对发布订阅模式的理解和完整代码的能力。class EventEmitter { constructor() { this.events new Map(); } on(name, fn) { if (!this.events.has(name)) { this.events.set(name, []); } this.events.get(name).push(fn); } emit(name, ...args) { if (this.events.has(name)) { this.events.get(name).forEach(fn fn(...args)); } } off(name, fn) { if (this.events.has(name)) { const idx this.events.get(name).indexOf(fn); if (idx ! -1) { this.events.get(name).splice(idx, 1); } } } once(name, fn) { const wrapper (...args) { fn(...args); this.off(name, wrapper); }; this.on(name, wrapper); } }有家公司的面试官在看完这段后追问如果执行off时它被放在emit的遍历队列中间你是如何处理的这个问题的本质是考察你有没有考虑过边遍历边删除的边界情况。我在代码里用的策略是遍历时拷贝一份列表forEach在Map value上是浅拷贝这样删除原数组不影响当前遍历的数组。这个细节我认为是区分背代码和懂代码的关键。4.2 算法题难度集中在数据结构和双指针算法题遇到的频率不高但一旦遇到基本决定了这场面试的上限。2年经验碰到过的题包括翻转二叉树、判断括号字符串是否有效、斐波那契数列的非递归实现、数组去重、两数之和、字符串反转、二分查找、链表反转。难度大概是LeetCode简单到中等偏下这个水平。有一家公司的二面上了一道平衡括号问题不是最基础的配对而是判断一个字符串里是否有多种括号嵌套合法。思路是用栈遇到左括号入栈遇到右括号时看栈顶是否匹配不匹配就是无效。代码不难但要注意提前剪枝如果当前是右括号且栈为空直接返回false否则会白跑很多。杭州这边最让我意外的是有两家公司都问了数组如何原地去重且不改变相对顺序这种题。注意是原地意味着不能用Set其实可以用set就算用了一个辅助结构不叫原地。原地去重的方法是双指针一个指针指向当前需要覆盖的位置另一个指针遍历整个数组遇到未出现过的元素就把它放到当前覆盖位置。我当时是用一个Map记录已出现的元素然后遍历数组原地覆盖这题答得比较流畅。算法题的准备建议不要刷太多偏题怪题把LeetCode的Hot 100里的简单题和部分中等题过一遍就够用了。重点是高频题型数组、字符串、链表、二叉树、哈希表要刷到能条件反射写出来的程度因为面试现场没有太多时间让你思考。5. 各种意外与红牌那些可能让你挂掉却在面经里没写到的事这轮面试过程中我经历了好几次计划外的情况有些问题差点翻车有些情况提前预判自己也涨了不少经验。这里写出来供你参考。5.1 面试官反向操作我不背了直接给业务场景我遇到一个面试官全程没有问常规技术点直接抛一个业务问题如果让你设计一个活动倒计时页面从打开页面到倒数结束的所有状态如何管理这里考察的点很综合定时器的创建与销毁、页面切换时的状态恢复visibilitychange、北京时间校准如果时间依赖服务端、组件卸载后的清理。这其实是把事件循环、生命周期、内存泄漏、网络请求放在一个综合场景里对于2年经验的人来说难度不低。我的解法是倒计时的目标时间从服务端获取一次避免用户本地时间不准前端通过setInterval每秒派发一次当前剩余时间注意在组件onUnmount时清理定时器页面从后台切回时通过visibilitychange监听可以在事件触发时立即同步一次当前时间而不是等下一秒的定时器触发如果有多个模块同时显示倒计时就把定时器提升到store层统一管理避免每个模块都开一个定时器。这个问题的关键是不能把倒计时单纯理解为一个数字递减。很多候选人会忽略用户切换标签页后定时器会被浏览器节流这件事导致回来时时间显示错误。当时主动提到这个点后面试官明显态度积极了很多。5.2 没有准备你自己遇到过的最难bug这种问题有一个频率不高但一旦遇到就很容易卡壳的问题你最近工作中遇到的一个最让你头疼的Bug是什么怎么排查的我第一场面试在这上面翻车了。当时脑子里全是项目功能一时想不起来什么Bug细节只能含糊说一个样式错乱问题显然没有说服力。面试官对排查过程也不满意。后来我学聪明了提前准备了一个高价值Bug故事。这个故事要有层次现象 → 初步猜测 → 逐步排查 → 最终定位 → 解决 → 复盘反思。我说的例子是一个生产环境偶发的白屏问题最开始以为是网络慢后来发现是微前端子应用的JS加载时序问题由于子应用挂载在事件触发后创建和主应用router初始化产生竞态条件最终用动态import和等待ready信号解决。这个故事有完整的排查链路也体现了对微前端运行时机制的理解之后每次讲到这个面试官都不会追得太深因为故事本身就自洽了。5.3 没有准备你对我们有什么想问的你还有什么要问我的几乎每个面试官都会问。这一题绝对不能答没有但也绝对不要问薪资福利、加班强度这类问题因为技术和HR面评估的维度不同。我通常按顺序问三个方向的问题第一关于团队的技术栈和近期在推进的事比如团队现在的微前端改造进展如何体现出你加入前就对业务有思考第二关于团队对前端工程师的期望是什么比如2年经验的人入职后最需要补强的是哪方面第三关于团队的使用技术或相关技术栈的挑战比如后台系统的技术栈主要是Vue还是React。这类问题能让面试官觉得你是有备而来、有团队意识的人。5.4 简历包装要适度否则大厂二面一定会露馅朋友内推的大厂电话面过了约了线下面试。一面考的基础题都顺利二面开始深挖项目细节面试官显然预先仔细看了简历连续追问了几个我写在精通里的技术点。我在一个精通Vue底层的依赖收集上回答得不够透彻又在一个主导前端工程化体系搭建的项目里说不出到底做了哪些优化、优化后指标变化是多少场面一度很尴尬。面试官最后可能看我是2年经验才没有揪着不放但结果是我止步二面。这段经历给我的教训是简历上写的东西一定要是你真正做过且能讲透的。用词上建议把精通改成熟练使用把主导改成参与设计如果你的实际角色只是执行者不要硬拔高。面试官问项目的口径基本是一致的你的具体角色是什么做了哪些模块为什么这么设计性能提升了多少这些没有真实经历支撑很难编圆。这也是后面几场面试我全程顺利的根基——我在后续的面试里只讲最有把握的项目而且每个细节都准备好三层的回答。6. HR面与Offer选择2年经验在杭州谈薪的正确打开方式HR面虽然不算技术环节但直接决定最终薪资和是否接offer。这部分我积累的心得值得单独说一下。杭州2年经验前端的中位数薪资大概在13k到18k之间具体看平台和行业。大厂开出的总包会略高但也可能把base压低用股票或绩效做补充中厂一般是base里见真章外包通常最低且涨幅有限。谈薪时HR一定会问你目前的薪资是多少、期望是多少这个环节我的经验是不要只说一个数字要把薪资结构基本工资、绩效、补贴、年终奖都算进去报一个略高于最低期望的期望值同时永远不要透露自己手上的其他offer但可以说我还处在和其他家对比阶段适当暗示竞争但不点破具体公司。薪资谈判之外有几件事比薪资更重要比如技术栈匹配度。如果新公司的主技术栈和你目前的完全是两套比如你一直写Vue新公司全是React入职后会有相当一段适应期2年经验这个阶段是打基础和建立技术标签的关键期建议优先选择与你已有技术路径一致或至少互补的方向。我最后选定的offer是某家中型电商SaaS公司技术栈是Vue3加TypeScript加微前端和我过往经历高度一致团队规模在20人左右前端有单独的前端lead老板对技术重视程度高。这个选择的性价比在当时来看是综合最高的。HR面还有一个常被忽略的环节背调和入职时间。杭州有些公司流程严格入职前会做背景调查职位、职级、离职原因这些别造假只要口径一致就没问题。入职时间建议定在离职交接完成后的两周内太长容易让新公司等多变太短可能导致上家交接不清。我当时离职交接只用了五天新公司正好有项目节点所以很顺利。7. 复盘与补强面完这些公司后我调整了哪些准备策略所有面试结束后我花了一整天把所有被问到的问题都整理了一遍发现一个高频考点地图在这个地图里重新安排了以后的学习重心和准备方式。这部分对正在准备面试的你可能有参考价值。第一项目深挖是面试准备的绝对重点。对每个写在简历上的项目至少准备三个层次的问题整体介绍业务背景、技术方案、你的角色、核心细节关键数据结构和交互逻辑、难点与优化遇到什么问题、怎么排查、结果怎么样。每周找时间把现有项目按这个框架过一遍比如这个项目你当时是怎么说的对这块的思考是否足够深。第二个原理学习和面试表达要结合起来。不是说背熟八股文就对了而是要能自然地用自己的话讲出来。例如响应式原理很多候选人答得像背书明显没有经过大脑。建议在准备阶段多模拟面试找朋友或者自己录音听一下自己在讲和背上的差别。第三个代码手写是底线。每天花20分钟手写两个高频函数防抖节流、深拷贝、Promise系列、EventEmitter坚持一周之后面试时大部分手写题都能形成肌肉记忆就不会慌。补强方面我给自己定了一个学习清单Vue3源码的精读特别是响应式模块和编译模块、TypeScript的高级类型发布到npm之前要搞定、React的基本使用了解兄弟框架的思维方便未来切换。杭州这边除了大厂还有大量React技术栈的公司只写Vue会比较被动。另外我也把微前端、性能优化、工程化实践这几个方向继续往深挖了。这些都是2年后端的通用能力跟具体公司关系不太大。最终入职的公司技术栈和氛围都让我挺满意。如果你也在准备杭州的前端面试我希望这篇面经能帮你少走一些弯路。面试本质上是一个互相匹配的过程——公司在考察你是否能解决问题你在考察这个团队是否值得投入。把每一次面试当作一次排查问题的练习心态上放松结果反而不会差。