经纬恒润前端一面：Vue3 生命周期、组件通信与数组 API 考点

《面试题目》

1. 为什么不读研？
2. 绩点与奖项情况如何？
3. 介绍一下你的项目。
4. 如何实现滑动窗口去重？
5. 如何实现响应式布局？
6. 你是如何做性能优化的？
7. 懒加载都有哪些？你用了哪些？
8. 如何手动实现图片懒加载？
9. Vue3 的生命周期钩子有哪些？
10. 组件间通信有哪些方式？
11. computed 与 watch 有什么区别？
12. 讲一下 JS 常用的数组 API。
13. 哪些数组 API 会改变原数组？
14. map 和 forEach 有什么区别？
15. base 地（期望工作城市）是哪里？

《参考解析》

滑动窗口去重：核心是维护一个窗口区间，保证窗口内元素不重复。右指针逐个吞入新元素，一旦该元素已在窗口内，就把左指针移到「上一次出现位置 + 1」，并更新该元素的最新下标，窗口的最大长度即最长无重复子串。判重用 Map 存「值 → 下标」，时间复杂度 O(n)、空间 O(字符集大小)。手写时注意左指针只能右移不能回退，要写成 left = Math.max(left, lastIndex + 1)，否则遇到 abba 这类用例会算错。

响应式布局：先用流式布局打底——百分比、fr、minmax() 配合 flex 和 grid，让容器随视口伸缩；再在断点处用媒体查询做结构性调整，比如侧栏收起、导航变汉堡，而不是给每个尺寸写一套定宽。移动端记得写 viewport meta，图片加 max-width: 100%，字号可用 clamp() 做流体排版；组件级适配可以上容器查询 @container，按父容器宽度而不是视口切换形态。

图片懒加载：现代做法直接用 <img loading="lazy">，浏览器原生支持、零 JS；需要更细的控制（提前多少距离开始加载、占位图、失败重试）时用 IntersectionObserver 监听图片是否进入视口，进入后再把 data-src 写到 src。手写时先用 1×1 占位图或固定宽高比盒子防止布局抖动，图片加载完成后 unobserve 掉避免重复触发；只有兼容老浏览器才需要监听 scroll 配合 getBoundingClientRect 并做节流。

computed 与 watch：computed 是派生状态，带缓存，依赖不变就不会重新计算，适合由已有响应式数据算出新值（拼接、过滤、求和），不要在里面对外发请求或修改别的状态。watch 是副作用，依赖变化时执行回调，适合请求数据、操作 DOM、写 localStorage，能拿到新旧值，也支持 immediate 和 deep；Vue3 还有 watchEffect，自动收集回调里用到的依赖，适合依赖不固定的场景。原则是能用 computed 表达的就不要用 watch 再同步一份状态。

会改变原数组的 API：push、pop、shift、unshift、splice、sort、reverse、fill、copyWithin 都是原地修改；map、filter、slice、concat、flat、reduce 等返回新数组、不动原数组。排查「列表莫名被改」的问题时，先看有没有漏掉 slice() 拷贝；需要不可变更新时优先用扩展运算符，较新环境还可以用 toSpliced、toSorted 这类返回副本的方法。