主题
高级资深前端面试题 · Vue 组件化开发与设计
什么是 Headless Component？在 Vue 组件库中什么时候应该采用？
这道题不只考 API 记忆，还考察你能否把 Vue3 的设计思想、运行机制、工程边界和团队落地连接起来。
面试官想考什么
- 你能否先定义问题边界？
考察是否知道这项能力解决什么问题，以及它不负责什么。 - 你能否解释 Vue3 的机制或设计取舍？
考察能否从组件、编译器、运行时、浏览器和工程系统多个层面建立因果链。 - 你能否把方案落到大型项目？
考察可维护性、可扩展性、性能、类型、测试、兼容和发布治理意识。 - 遇到复杂边界或线上故障怎么办？
考察是否能设计降级、观测、回滚和验证闭环，而不是只给理想路径。
一句话回答
text
Headless Component 只提供状态、行为和可访问性逻辑，不强绑定视觉结构，适合需要多套 UI 表现但共享交互语义的场景。面试回答详解
这道题的高级回答重点是把概念放回工程上下文：先说它解决的问题，再解释关键机制，最后说明适用边界、失败模式和验证方法。
1. 核心定义\n\nHeadless 组件把“怎么工作”和“长什么样”分开，通常通过 slots、slot props、renderless component 或 composable 暴露状态与事件。\n\n### 2. 适合场景\n\n下拉选择、Combobox、Tree、Tabs、Dialog、DatePicker 等交互复杂但品牌视觉差异很大的组件适合采用。\n\n### 3. 设计方式\n\n底层负责键盘导航、焦点、选中状态、过滤、异步加载和 aria 属性；上层负责 DOM 结构、样式、图标和主题。\n\n### 4. 取舍\n\nHeadless 提高复用和定制能力，但会提高调用方复杂度；如果场景单一、视觉规范稳定，直接提供有样式组件更高效。
可直接背诵的 30 秒回答
text
Headless Component 把交互逻辑和视觉表现解耦，底层提供状态、事件和可访问性，上层通过 slot 或 composable 自由渲染；它适合交互复杂、视觉定制需求强的组件。扩展知识
从概念到工程
text
稳定契约 -> 明确状态边界 -> 可组合实现 -> 可观测验证 -> 兼容演进常见误区
- 把 Vue 的语法糖当成完整的架构方案。
- 只讨论正常路径，不讨论异步、卸载、失败、SSR 或大数据量。
- 只看局部性能，不看调用方复杂度、测试成本和升级成本。
- 用内部实现细节作为公共契约，导致后续重构困难。
面试官追问链
追问一：Headless 和 renderless component 有什么关系？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：renderless 是一种实现手段，Headless 是更大的设计理念；Headless 也可以只通过 composable 暴露逻辑。\n\n### 追问二：如何避免 slot props 过于复杂？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：只暴露渲染真正需要的最小上下文，并将复杂操作收敛成语义化方法。\n\n### 追问三：Headless 组件如何测试？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：重点测试状态转移、键盘交互、aria 语义和边界数据，视觉层另做组件或快照测试。
推荐阅读
- Props\n- Component Events\n- Slots\n- Fallthrough Attributes\n- Provide / Inject\n- Composables\n- Accessibility\n- Testing