标准答案
- 先交代页面业务目标和核心流程,例如表格审批、配置向导、复杂表单、实时看板或内容编辑器。
- 说明状态如何划分:URL 状态、表单状态、接口数据、全局用户权限、临时 UI 状态分别放在哪里。
- 说明组件如何拆分:哪些是页面容器,哪些是业务组件,哪些是纯展示组件或可复用 composable。
- 说明关键取舍:为什么用 Pinia 或不用,为什么 URL 同步,为什么做虚拟滚动,为什么局部缓存或懒加载。
- 最后补充异常、性能和测试:请求失败、权限变化、大数据量、重复提交、E2E 覆盖如何处理。
题目解析
复杂页面回答最怕变成 API 清单。面试里更有说服力的是把一个具体页面讲成一套可运行的工程决策。
取舍要能解释代价。例如虚拟滚动提升大列表性能,但会带来滚动定位和可访问性复杂度。
可以按“背景、问题、方案、取舍、结果”组织表达,让对方听到你真正处理过复杂业务。
代码示例
可以用这样的结构整理自己的项目表达。
Markdown
1. 页面目标:解决什么业务流程
2. 状态模型:哪些状态放 URL、store、组件内
3. 组件边界:容器、业务组件、展示组件如何拆
4. 异常和性能:请求、权限、大数据量如何处理
5. 验证方式:单测、组件测试、E2E 覆盖哪些风险常见误区
- 只说用了 Vue Router、Pinia、Element Plus,没有解释它们解决了什么问题。
- 把所有状态都说成放 store,无法说明状态所有权和生命周期。
- 只讲成功路径,不讲错误态、空态、权限态、性能和测试。