主题
高级资深前端面试题 · Vue 组件化开发与设计
如何判断 Vue 组件应该拆多大？状态应该由谁拥有？
这道题不只考 API 记忆，还考察你能否把 Vue3 的设计思想、运行机制、工程边界和团队落地连接起来。
面试官想考什么
- 你能否先定义问题边界？
考察是否知道这项能力解决什么问题，以及它不负责什么。 - 你能否解释 Vue3 的机制或设计取舍？
考察能否从组件、编译器、运行时、浏览器和工程系统多个层面建立因果链。 - 你能否把方案落到大型项目？
考察可维护性、可扩展性、性能、类型、测试、兼容和发布治理意识。 - 遇到复杂边界或线上故障怎么办？
考察是否能设计降级、观测、回滚和验证闭环，而不是只给理想路径。
一句话回答
text
组件边界应围绕变化原因、状态归属和复用价值划分，状态放在最接近且能完整协调它的层级，避免过度拆分和隐式共享。面试回答详解
这道题的高级回答重点是把概念放回工程上下文：先说它解决的问题，再解释关键机制，最后说明适用边界、失败模式和验证方法。
1. 按变化原因拆分\n\n一起变化的代码通常属于同一边界，不同原因变化的代码应分离；不要只按视觉区域机械拆组件。\n\n### 2. 状态归属\n\n局部输入状态留在组件内部，跨兄弟协调的状态提升到共同父级，跨页面或业务域状态进入 store 或服务层。\n\n### 3. 数据与视图\n\n请求、缓存和业务编排可以放 composable 或领域层，展示组件只接受稳定数据和事件。\n\n### 4. 识别坏味道\n\nprops drilling、emits 穿透、组件互相访问 ref、万能组件和过多布尔 props 都提示边界需要重构。
可直接背诵的 30 秒回答
text
我会按变化原因和状态协作范围划分组件：局部状态留在局部，兄弟共享状态提升到共同父级，跨页面业务状态进入领域层或 store，组件只暴露稳定的数据和事件契约。扩展知识
从概念到工程
text
稳定契约 -> 明确状态边界 -> 可组合实现 -> 可观测验证 -> 兼容演进常见误区
- 把 Vue 的语法糖当成完整的架构方案。
- 只讨论正常路径，不讨论异步、卸载、失败、SSR 或大数据量。
- 只看局部性能，不看调用方复杂度、测试成本和升级成本。
- 用内部实现细节作为公共契约，导致后续重构困难。
面试官追问链
追问一：什么时候应该接受 props drilling？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：层级浅且语义清晰时直接传递更透明；层级深且属于组件内部协议时可用 provide/inject。\n\n### 追问二：万能组件有什么问题？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：状态、条件分支和 API 组合爆炸，调用方无法预测，测试矩阵也会失控。\n\n### 追问三：组件拆分后性能一定更好吗？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：不一定；组件实例增加也有成本，应该用更新范围和性能数据验证。
推荐阅读
- Props\n- Component Events\n- Slots\n- Fallthrough Attributes\n- Provide / Inject\n- Composables\n- Accessibility\n- Testing