主题
高级资深前端面试题 · Vue 组件化开发与设计
如何从零设计一套 Vue3 企业级组件库的架构？
这道题不只考 API 记忆，还考察你能否把 Vue3 的设计思想、运行机制、工程边界和团队落地连接起来。
面试官想考什么
- 你能否先定义问题边界？
考察是否知道这项能力解决什么问题，以及它不负责什么。 - 你能否解释 Vue3 的机制或设计取舍？
考察能否从组件、编译器、运行时、浏览器和工程系统多个层面建立因果链。 - 你能否把方案落到大型项目？
考察可维护性、可扩展性、性能、类型、测试、兼容和发布治理意识。 - 遇到复杂边界或线上故障怎么办？
考察是否能设计降级、观测、回滚和验证闭环，而不是只给理想路径。
一句话回答
text
企业级组件库要同时设计组件分层、依赖边界、主题 token、类型、构建产物、文档、测试、版本发布和迁移策略。面试回答详解
这道题的高级回答重点是把概念放回工程上下文：先说它解决的问题，再解释关键机制，最后说明适用边界、失败模式和验证方法。
1. 组件分层\n\n基础 token 和样式层之上是无状态 primitive，再上面是业务无关的复合组件，最后才是面向业务的场景组件，避免基础组件反向依赖业务。\n\n### 2. 包与依赖\n\n可以按单包或多包组织，但要保证 tree-shaking、sideEffects 声明、CSS 入口、类型声明和 peerDependencies 正确；组件之间通过公共层共享能力。\n\n### 3. 质量体系\n\n每个组件需要 API 文档、交互示例、单元测试、组件测试、无障碍检查和视觉回归；复杂组件还要覆盖 SSR、Teleport 和异步状态。\n\n### 4. 发布治理\n\n采用语义化版本、变更日志、迁移说明和 deprecation 周期；破坏性变更不能只依赖口头通知。
可直接背诵的 30 秒回答
text
我会先划分设计 token、基础 primitive、复合组件和业务组件四层，再建立统一的类型、主题、构建、文档、测试和发布体系；组件库的难点是长期契约治理，而不是把组件堆在一个仓库里。扩展知识
从概念到工程
text
稳定契约 -> 明确状态边界 -> 可组合实现 -> 可观测验证 -> 兼容演进常见误区
- 把 Vue 的语法糖当成完整的架构方案。
- 只讨论正常路径，不讨论异步、卸载、失败、SSR 或大数据量。
- 只看局部性能，不看调用方复杂度、测试成本和升级成本。
- 用内部实现细节作为公共契约，导致后续重构困难。
面试官追问链
追问一：组件库为什么不应该直接依赖业务接口？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：业务接口变化频繁且语义不稳定，会让基础包难以复用和升级；应由业务层适配数据。\n\n### 追问二：如何支持按需引入？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：提供 ESM 入口、正确的 exports 和 sideEffects 配置，样式按组件或主题入口组织，并用产物分析验证。\n\n### 追问三：组件库如何处理 Vue 大版本升级？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：先做兼容层和双版本测试，再通过适配包、迁移指南和分阶段 deprecation 完成切换。
推荐阅读
- Props\n- Component Events\n- Slots\n- Fallthrough Attributes\n- Provide / Inject\n- Composables\n- Accessibility\n- Testing