主题
高级资深前端面试题 · Vue3 原理与源码
Suspense 如何协调 async setup、异步组件和 fallback？生产中有哪些边界？
这道题不只考 API 记忆，还考察你能否把 Vue3 的设计思想、运行机制、工程边界和团队落地连接起来。
面试官想考什么
- 你能否先定义问题边界？
考察是否知道这项能力解决什么问题，以及它不负责什么。 - 你能否解释 Vue3 的机制或设计取舍？
考察能否从组件、编译器、运行时、浏览器和工程系统多个层面建立因果链。 - 你能否把方案落到大型项目？
考察可维护性、可扩展性、性能、类型、测试、兼容和发布治理意识。 - 遇到复杂边界或线上故障怎么办？
考察是否能设计降级、观测、回滚和验证闭环，而不是只给理想路径。
一句话回答
text
Suspense 追踪异步依赖，在依赖完成前渲染 fallback，完成后提交依赖树；它适合协调异步组件边界，但错误处理、SSR 和稳定体验仍需业务补充。面试回答详解
这道题的高级回答重点是把概念放回工程上下文：先说它解决的问题，再解释关键机制，最后说明适用边界、失败模式和验证方法。
1. 异步依赖\n\nasync setup 和异步组件会向最近的 Suspense 边界注册依赖，边界维护 pending、fallback 和 resolved 状态。\n\n### 2. 两棵子树\n\nSuspense 同时管理内容分支和 fallback 分支，依赖完成后再切换并处理过渡和锚点。\n\n### 3. 错误与超时\n\nSuspense 本身不是完整的错误重试系统，网络失败、超时、取消和重试应由异步组件或上层状态处理。\n\n### 4. SSR 边界\n\nSSR、hydration、嵌套 Suspense、KeepAlive 和 Transition 组合时要验证服务端和客户端的分支一致性。
可直接背诵的 30 秒回答
text
Suspense 把异步 setup 和异步组件作为依赖收集起来，在依赖完成前展示 fallback，完成后提交内容分支；它解决的是异步渲染协调，不替代错误和数据状态管理。扩展知识
从概念到工程
text
稳定契约 -> 明确状态边界 -> 可组合实现 -> 可观测验证 -> 兼容演进常见误区
- 把 Vue 的语法糖当成完整的架构方案。
- 只讨论正常路径，不讨论异步、卸载、失败、SSR 或大数据量。
- 只看局部性能，不看调用方复杂度、测试成本和升级成本。
- 用内部实现细节作为公共契约，导致后续重构困难。