主题
高级资深前端面试题 · Vue 组件化开发与设计
Vue3 组件如何设计受控、非受控和半受控状态？
这道题不只考 API 记忆，还考察你能否把 Vue3 的设计思想、运行机制、工程边界和团队落地连接起来。
面试官想考什么
- 你能否先定义问题边界？
考察是否知道这项能力解决什么问题，以及它不负责什么。 - 你能否解释 Vue3 的机制或设计取舍？
考察能否从组件、编译器、运行时、浏览器和工程系统多个层面建立因果链。 - 你能否把方案落到大型项目？
考察可维护性、可扩展性、性能、类型、测试、兼容和发布治理意识。 - 遇到复杂边界或线上故障怎么办？
考察是否能设计降级、观测、回滚和验证闭环，而不是只给理想路径。
一句话回答
text
受控状态由父组件通过 props 和 v-model 管理，非受控状态由组件内部维护，半受控组件需要明确优先级和同步规则，不能让两套状态互相覆盖。面试回答详解
这道题的高级回答重点是把概念放回工程上下文：先说它解决的问题，再解释关键机制，最后说明适用边界、失败模式和验证方法。
1. 受控模式\n\n父组件传入 modelValue 或 value，组件只发 update 事件，不直接改外部状态，适合表单、筛选条件和业务状态需要统一管理的场景。\n\n### 2. 非受控模式\n\n组件内部用 defaultValue 或初始值创建状态，外部只关心结果或事件，适合简单交互和低耦合场景。\n\n### 3. 半受控陷阱\n\n同时支持 value 和内部 state 时必须定义 controlled 优先级、外部变更同步、默认值只生效一次以及 reset 行为。\n\n### 4. 实现建议\n\n用 computed getter/setter 或 useControllableState 统一封装，避免在模板和事件处理器中散落判断。
可直接背诵的 30 秒回答
text
我会明确区分 value 与 defaultValue，并规定受控值优先、内部状态只作为非受控 fallback；所有外部变更和用户交互都通过统一的同步逻辑处理，避免状态来源不清。扩展知识
从概念到工程
text
稳定契约 -> 明确状态边界 -> 可组合实现 -> 可观测验证 -> 兼容演进常见误区
- 把 Vue 的语法糖当成完整的架构方案。
- 只讨论正常路径，不讨论异步、卸载、失败、SSR 或大数据量。
- 只看局部性能，不看调用方复杂度、测试成本和升级成本。
- 用内部实现细节作为公共契约，导致后续重构困难。
面试官追问链
追问一：为什么 defaultValue 不能在每次 props 更新时重置？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：defaultValue 表示初始化契约，持续同步会破坏用户本地交互；需要显式 reset 才应重置。\n\n### 追问二：如何设计多个 v-model？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：使用有语义的 model 名称和对应 update 事件，避免一个对象承载所有字段导致更新边界模糊。\n\n### 追问三：受控组件会不会性能更差？\n\n- 考察点：面试官想确认你是否掌握这个方案的边界。\n- 回答方向：不一定，关键是更新粒度和父组件重渲染范围；可以通过拆分状态、computed 和稳定引用控制成本。
推荐阅读
- Props\n- Component Events\n- Slots\n- Fallthrough Attributes\n- Provide / Inject\n- Composables\n- Accessibility\n- Testing