主题
高级资深前端面试题 · Vue 组件化开发与设计
如何设计可维护的 Vue3 Form、FormItem 和 Field 组件体系？
这道题不只考 API 记忆，还考察你能否把 Vue3 的设计思想、运行机制、工程边界和团队落地连接起来。
面试官想考什么
- 你能否先定义问题边界？
考察是否知道这项能力解决什么问题，以及它不负责什么。 - 你能否解释 Vue3 的机制或设计取舍？
考察能否从组件、编译器、运行时、浏览器和工程系统多个层面建立因果链。 - 你能否把方案落到大型项目？
考察可维护性、可扩展性、性能、类型、测试、兼容和发布治理意识。 - 遇到复杂边界或线上故障怎么办？
考察是否能设计降级、观测、回滚和验证闭环，而不是只给理想路径。
一句话回答
text
表单组件体系应把字段注册、值同步、校验、展示状态、提交和异步竞态拆开，通过上下文协议让 Field 与 Form 协作。面试回答详解
这道题的高级回答重点是把概念放回工程上下文：先说它解决的问题，再解释关键机制，最后说明适用边界、失败模式和验证方法。
1. 数据模型\n\nForm 维护 model、字段注册表和提交状态，Field 只负责字段绑定、触发时机和自身展示，不直接管理整个表单。\n\n### 2. 校验协议\n\n定义规则、触发时机、同步/异步校验、错误结构、取消过期请求和首次校验策略，不能只靠一个 validate 函数返回布尔值。\n\n### 3. 组件通信\n\n通过 provide/inject 建立 FormContext，Field 注册 name、validate、reset、clearValidate 等能力；对外提供 Promise 化方法。\n\n### 4. 体验与可访问性\n\nlabel、描述、错误信息、aria-describedby、键盘焦点、loading 和 disabled 状态应形成一致约定。
可直接背诵的 30 秒回答
text
我会让 Form 负责模型、字段注册和提交编排，FormItem 负责布局和错误展示，Field 负责输入与局部状态，通过上下文和明确的异步校验协议连接起来。扩展知识
从概念到工程
text
稳定契约 -> 明确状态边界 -> 可组合实现 -> 可观测验证 -> 兼容演进常见误区
- 把 Vue 的语法糖当成完整的架构方案。
- 只讨论正常路径，不讨论异步、卸载、失败、SSR 或大数据量。
- 只看局部性能，不看调用方复杂度、测试成本和升级成本。
- 用内部实现细节作为公共契约，导致后续重构困难。
面试官追问链
追问一：异步校验竞态怎么处理？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：给每次校验分配序列号或取消旧请求，只接受当前值对应的最新结果。\n\n### 追问二：Form 是否应该直接请求接口？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：通用 Form 只负责编排和校验，具体提交请求由页面或业务 composable 负责。\n\n### 追问三：动态字段如何处理？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：以稳定 name 注册和注销，字段卸载时清理错误、值策略和校验任务。
推荐阅读
- Props\n- Component Events\n- Slots\n- Fallthrough Attributes\n- Provide / Inject\n- Composables\n- Accessibility\n- Testing