我要招人

前端/移动开发面试题更新 2026-08-05

在一个 Vue3 项目中，你需要从头构建一个弹窗组件，请描述你的设计方案，包括组件的结构、API 设计、状态管理以及样式与交互方面的考虑。

前端/移动开发问题拆解系统设计技术原理

考察说明

考察候选人对于 Vue3 组件化设计、组合式 API 使用、组件通信以及弹窗场景中常见问题的解决能力。

回答思路

  1. 【回答框架 1】弹窗组件通常包含遮罩层、内容区、关闭按钮等，可拆分为基础弹窗组件和命令式调用封装。基础组件负责渲染、过渡动画、插槽和事件；封装层提供 useDialog 或 $dialog 方法，便于在 JS 中控制。
  2. 【回答框架 2】基于 Vue3 组合式 API，使用 defineProps 定义 visible、title、width 等 Props，用 emits 定义 update:visible 和 confirm/cancel 事件，实现 v-model 双向绑定。内部用 Teleport 将弹窗传送到 body 下，避免遮挡问题。
  3. 【回答框架 3】状态管理：visible 主要由父组件控制，内部维护打开状态用于动画过渡；或者使用全局状态管理（如 Pinia）管理多个弹窗实例。需处理 escape 关闭、点击遮罩关闭、滚动锁定等交互。
  4. 【回答框架 4】样式与动画：使用 transition 组件实现淡入淡出效果；CSS 变量提供主题定制；考虑移动端适配和 z-index 管理，避免层级冲突。
  5. 【关键点 1】使用 defineProps、defineEmits 实现 v-model 双向绑定，通过 update:visible 同步状态。
  6. 【关键点 2】使用 Teleport 将弹窗挂载到 body，防止父元素 overflow 或 transform 影响。
  7. 【关键点 3】处理关闭逻辑：点击遮罩、按下 ESC、滚动锁定，并保证事件清理。
  8. 【关键点 4】提供命令式调用方式（如 useDialog）以方便 JS 控制。
  9. 【易错点 1】忽略事件监听和定时器清理，可能导致内存泄漏。
  10. 【易错点 2】未使用 Teleport 时，可能因父级样式导致弹窗显示异常。
  11. 【易错点 3】没有处理重复打开或快速关闭时的状态同步问题。