主题
高级资深前端面试题 · Vue 组件化开发与设计
Vue 中 slots、renderless component 和 composable 应该如何选择？
这道题不只考 API 记忆，还考察你能否把 Vue3 的设计思想、运行机制、工程边界和团队落地连接起来。
面试官想考什么
- 你能否先定义问题边界？
考察是否知道这项能力解决什么问题，以及它不负责什么。 - 你能否解释 Vue3 的机制或设计取舍？
考察能否从组件、编译器、运行时、浏览器和工程系统多个层面建立因果链。 - 你能否把方案落到大型项目？
考察可维护性、可扩展性、性能、类型、测试、兼容和发布治理意识。 - 遇到复杂边界或线上故障怎么办？
考察是否能设计降级、观测、回滚和验证闭环，而不是只给理想路径。
一句话回答
text
slot 适合扩展组件结构，renderless component 适合用组件上下文承载逻辑，composable 适合复用状态和副作用，选择取决于是否需要组件生命周期与模板边界。面试回答详解
这道题的高级回答重点是把概念放回工程上下文：先说它解决的问题，再解释关键机制，最后说明适用边界、失败模式和验证方法。
1. Slots\n\n调用方需要替换局部结构、插入内容或使用子组件提供的状态时使用 slot，优点是模板表达力强。\n\n### 2. Renderless\n\n逻辑需要挂在组件生命周期或需要通过 slot props 输出一组渲染上下文时使用，但额外组件层可能增加理解成本。\n\n### 3. Composables\n\n纯状态、事件和副作用复用优先使用 composable，组合灵活，容易单测，也更适合跨组件和非模板场景。\n\n### 4. 取舍\n\n不要为了“复用”把简单展示做成复杂 renderless；也不要把需要结构扩展的能力硬塞进 composable。
可直接背诵的 30 秒回答
text
结构扩展优先 slot，状态和副作用复用优先 composable，需要组件生命周期与 slot 上下文时再用 renderless component；三者解决的问题不同，不是层级更高低的替代关系。扩展知识
从概念到工程
text
稳定契约 -> 明确状态边界 -> 可组合实现 -> 可观测验证 -> 兼容演进常见误区
- 把 Vue 的语法糖当成完整的架构方案。
- 只讨论正常路径，不讨论异步、卸载、失败、SSR 或大数据量。
- 只看局部性能，不看调用方复杂度、测试成本和升级成本。
- 用内部实现细节作为公共契约，导致后续重构困难。
面试官追问链
追问一：slot props 会不会导致组件 API 膨胀？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：会，所以只输出稳定、最小的渲染上下文，复杂业务逻辑放到方法或 composable。\n\n### 追问二：composable 是否能替代所有 renderless component？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：不能；如果需要组件树作用域、slot 生命周期或模板语义，renderless 仍有价值。\n\n### 追问三：如何测试 composable？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：独立验证状态转移和副作用，必要时在测试组件中挂载以覆盖生命周期行为。
推荐阅读
- Props\n- Component Events\n- Slots\n- Fallthrough Attributes\n- Provide / Inject\n- Composables\n- Accessibility\n- Testing