主题
高级资深前端面试题 · Vue 组件化开发与设计
如何用 provide/inject 设计 Vue 复合组件？有哪些边界？
这道题不只考 API 记忆，还考察你能否把 Vue3 的设计思想、运行机制、工程边界和团队落地连接起来。
面试官想考什么
- 你能否先定义问题边界？
考察是否知道这项能力解决什么问题，以及它不负责什么。 - 你能否解释 Vue3 的机制或设计取舍？
考察能否从组件、编译器、运行时、浏览器和工程系统多个层面建立因果链。 - 你能否把方案落到大型项目？
考察可维护性、可扩展性、性能、类型、测试、兼容和发布治理意识。 - 遇到复杂边界或线上故障怎么办？
考察是否能设计降级、观测、回滚和验证闭环，而不是只给理想路径。
一句话回答
text
复合组件通过父级提供上下文、子组件注入上下文来共享注册、选择、键盘导航等隐式协作状态，适合 Tabs、Menu、Form、Tree 等组件。面试回答详解
这道题的高级回答重点是把概念放回工程上下文：先说它解决的问题，再解释关键机制，最后说明适用边界、失败模式和验证方法。
1. 上下文设计\n\n用 Symbol 作为 injection key，把 state、注册方法、注销方法和事件协调方法放入上下文，避免注入一个可随意修改的大对象。\n\n### 2. 父子协作\n\n父组件维护权威状态，子项在 mounted 时注册、卸载时注销，并通过唯一 id 或 order 参与键盘和选中逻辑。\n\n### 3. 响应式边界\n\n如果需要共享可变状态，应明确 readonly 暴露和 mutation 方法；不要让深层子组件直接修改父级内部 ref。\n\n### 4. 使用边界\n\nprovide/inject 适合组件内部协议，不适合替代全局状态管理，也不能跨任意组件树做隐式业务通信。
可直接背诵的 30 秒回答
text
我会用 Symbol key 建立局部上下文，父组件持有权威状态和注册表，子组件只通过语义化方法参与协作，并通过 readonly 或类型约束限制修改边界。扩展知识
从概念到工程
text
稳定契约 -> 明确状态边界 -> 可组合实现 -> 可观测验证 -> 兼容演进常见误区
- 把 Vue 的语法糖当成完整的架构方案。
- 只讨论正常路径，不讨论异步、卸载、失败、SSR 或大数据量。
- 只看局部性能，不看调用方复杂度、测试成本和升级成本。
- 用内部实现细节作为公共契约，导致后续重构困难。
面试官追问链
追问一：为什么 injection key 推荐使用 Symbol？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：避免字符串冲突，并能通过 TypeScript 显式定义上下文类型。\n\n### 追问二：如何避免子组件修改父组件状态？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：注入 readonly 状态和操作函数，不直接暴露可写 ref。\n\n### 追问三：嵌套同类型复合组件怎么办？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：利用 provide/inject 的最近祖先规则，并设计明确的 key 或作用域隔离。
推荐阅读
- Props\n- Component Events\n- Slots\n- Fallthrough Attributes\n- Provide / Inject\n- Composables\n- Accessibility\n- Testing