标准答案

  1. 先交代页面业务目标和核心流程,例如表格审批、配置向导、复杂表单、实时看板或内容编辑器。
  2. 说明状态如何划分:URL 状态、表单状态、接口数据、全局用户权限、临时 UI 状态分别放在哪里。
  3. 说明组件如何拆分:哪些是页面容器,哪些是业务组件,哪些是纯展示组件或可复用 composable。
  4. 说明关键取舍:为什么用 Pinia 或不用,为什么 URL 同步,为什么做虚拟滚动,为什么局部缓存或懒加载。
  5. 最后补充异常、性能和测试:请求失败、权限变化、大数据量、重复提交、E2E 覆盖如何处理。

题目解析

复杂页面回答最怕变成 API 清单。面试里更有说服力的是把一个具体页面讲成一套可运行的工程决策。

取舍要能解释代价。例如虚拟滚动提升大列表性能,但会带来滚动定位和可访问性复杂度。

可以按“背景、问题、方案、取舍、结果”组织表达,让对方听到你真正处理过复杂业务。

代码示例

可以用这样的结构整理自己的项目表达。

Markdown
1. 页面目标:解决什么业务流程
2. 状态模型:哪些状态放 URL、store、组件内
3. 组件边界:容器、业务组件、展示组件如何拆
4. 异常和性能:请求、权限、大数据量如何处理
5. 验证方式:单测、组件测试、E2E 覆盖哪些风险

常见误区

  • 只说用了 Vue Router、Pinia、Element Plus,没有解释它们解决了什么问题。
  • 把所有状态都说成放 store,无法说明状态所有权和生命周期。
  • 只讲成功路径,不讲错误态、空态、权限态、性能和测试。

作者信息