主题
高级资深前端面试题 · Nuxt 架构深挖
Nuxt 如何设计渐进式迁移:从 Vue SPA 或 Nuxt 2 迁移到 Nuxt 3/4?
这道题不只考 API 记忆,还考察你能否从构建期、Nitro、SSR、浏览器和部署平台解释完整链路。
面试官想考什么
- 你能否说明这个问题的边界?
考察是否理解 Nuxt 抽象解决什么,以及哪些责任仍属于浏览器、后端或平台。 - 你能否讲清运行链路和失败模式?
考察 SSR、Nitro、缓存、客户端接管和部署能力之间的因果关系。 - 你能否做高级工程取舍?
考察安全、性能、可观测性、兼容性、成本和回滚意识。 - 你能否把方案落到团队和生产环境?
考察测试、版本治理、灰度和故障恢复能力。
一句话回答
text
迁移应按路由和能力分阶段,先建立兼容边界与观测基线,再逐步迁移数据获取、状态、插件、服务端 API 和渲染策略。面试回答详解
高级回答要从“概念是什么”继续往下讲到“为什么这样设计、如何验证、出错如何恢复”。这类 Nuxt 题尤其要区分构建期能力、服务端请求期能力和浏览器运行期能力。
1. 先建立基线\n\n盘点路由、SEO、鉴权、插件、状态、接口、构建、部署和性能,记录 SPA/旧 Nuxt 的行为作为回归标准。\n\n### 2. 迁移顺序\n\n先迁公共布局和基础组件,再迁数据层和路由,最后迁复杂页面与 SSR;必要时通过反向代理或同域路径渐进切流。\n\n### 3. 双栈风险\n\n共享 Cookie、缓存、静态资源、错误页、埋点和跳转规则要统一,避免新旧应用互相覆盖或循环跳转。
4. 生产落地判断
- 安全边界:服务端凭据、用户身份、租户、缓存和出站请求都不能依赖客户端自报。
- 性能边界:要同时看 TTFB、LCP、INP、CLS、payload、hydration、上游依赖和资源瀑布。
- 稳定性边界:为超时、断连、重复执行、版本不一致、冷启动和平台能力差异设计降级。
- 治理边界:把配置、日志、指标、测试、发布、灰度和回滚纳入方案,而不是上线后补救。
可直接背诵的 30 秒回答
text
我会先做行为和性能基线,再按公共能力、数据层、路由和业务页面分阶段迁移,用同域代理、兼容适配和灰度切流控制风险,最后删除旧路径。扩展知识
常见排查路径
text
现象 -> 版本/配置 -> 请求与缓存 -> SSR/Nitro -> hydration -> 浏览器性能 -> 部署平台需要避免的绝对化结论
- SSR 不一定比 CSR 快,取决于数据、缓存、服务端资源和 hydration。
- Nitro 不会消除平台差异,Edge、Serverless 和 Node 仍有不同运行时能力。
- 缓存不是越多越好,个性化数据和失效一致性决定了缓存边界。
- Nuxt Module、Plugin、Composable 和 Middleware 是不同层次的扩展点,不能混用。
面试官追问链
追问一:迁移期间如何保持 SEO?
- 考察点:是否能把 Nuxt 抽象落到运行时机制。
- 回答方向:先说明默认行为,再补充身份、缓存、错误和部署边界。
追问二:新旧应用如何共享登录态?
- 考察点:是否知道正常路径之外的风险。
- 回答方向:给出失败模式、降级策略和观测指标,不只给理想代码。
追问三:怎样判断可以关闭旧应用?
- 考察点:是否具备架构治理能力。
- 回答方向:说明如何测试、灰度、回滚和验证长期维护成本。