面向未来的 Vue3.0 桌面组件设计-郑傲

Vue 3 组件设计总结

1. 组件库开发背景与目标

• 目标：面向长久的未来，从设计开始。
• 组件库名称：CarsDesign
• 开发团队：资深前端研发工程师
• 主要成员：郑傲、小米汽车·自动驾驶前端研发工程师

2. 组件库核心数据

• 组件数量：71 个
• 代码行数：142,488 行
• TypeScript 占比：超过 90%
• 提交次数：近 2000 次

3. 组件设计视角与规范

• 研发视角：减少认知能量消耗，提高开发效率。
• 设计视角：减少用户理解成本，传递设计价值观。
• 产品视角：提升沟通效率，明确产品能力。

4. 组件设计过程

• 设计阶段：栅格系统、间距、布局基数、行高等。
• 功能扩展：同行等高布局。
• API 丰富：Gutter Inline。
• 迭代步骤：
  • 理解 B 端业务场景。
  • 增加组件 API。
  • 抽象设计理念，形成设计价值观。
  • 推广周边服务。
  • 提供更多提效场景，如 SASS 服务、Low Code、Pro Code、D2C 等。

5. 组件库梯队建设

• 基础布局：样式类组件。
• 浮层弹窗：弹窗类组件。
• 表单交互：表单交互类组件。
• 数据展示：数据展示类组件。
• 便捷指令：组件库便捷指令。

6. 组件库开发流程

• 信息交换：公开规范规则，制定插件脚本。
• 目录结构：BEM 等。
• 开发流程：FEUED，API 调研、讨论、实现、文档和示例、测试、视觉走查、交互确认。

7. 组件实现与取舍

• 多样实现：鼓励不同实现方式，满足多种需求。
• 案例：
  • Rate 投票组件：多种实现方案，最终成功落地。
  • Panel 布局组件：数据结构纠结，最终选择嵌套结构。
  • Table 组件：实现细节先进，性能优异。

8. 组件库性能对比

• 性能测试：
  • FPT 时间：CarsDesign 表现优于 Element-Plus。
  • DOM Ready 时间：CarsDesign 更快，减少代码加载量。
  • 大数据量渲染：
    • Element-Plus：滚动帧数 12-16，CPU < 90%，JS Heap 29.5MB，DOM Nodes 36,897。
    • CarsDesign：滚动帧数 12-16，CPU < 70%，JS Heap 45MB，DOM Nodes 19,792。

9. 组件库周边

• 配置服务：样式分层可视化配置。
• 迭代计划：逐步公布，增强信任感。
• CLI 工具：统一代码库，通用构建流程。
• 项目模板：助力从 0 到 1 的工程化创建。

10. 未来展望

• 面向未来：采用主流开发框架、语言、规则。
• API 设计：遵循开发者习惯。
• 实现细节：使用先进技术优化实现。
• 应用场景：逐步向 Sass 服务、LowCode 平台转移。
• 组件设计：提供更多小众组件，提升用户体验。