面向未来的 Vue 3 组件设计
关于我和 CarsDesign
郑傲，小米汽车自动驾驶资深前端研发工程师，曾就职于百度外卖、车好多集团，是 CarsDesign 组件库的核心开发者。CarsDesign 是车好多针对 Vue3.x 桌面端实践的组件库，一期交付 71 个组件，涉及基础布局、样式、数据展示、表单类、弹窗等场景，Commit 近 2000 次，代码行数 142,488 行，TypeScript 占比大于 90%。
组件设计的视角与规范
- 不同角色对组件的认知：研发关注功能丰富、易用、灵活的 API；设计关注传递设计价值观、减少用户理解成本、兜底交付品质；产品关注专业表达产品能力、减少沟通 Gap。
- 组件设计规范：建立栅格系统、组件标准（栅格、间距、布局基数、行高、字体）、功能扩展（同行等高布局）、丰富 API（Gutter Inline）。
- 组件成熟过程：理解（抽象 B 端业务场景）、丰富（增加 API 服务业务）、抽象（形成设计价值观）、业务设计模式抽象（推广能力）、提效（SASS 服务、Low Code、Pro Code、D2C）。
- 未来组件库设计：专注打造产品信任感，通过标准化设计和细节实现传达信任感和专业性。
梯队建设、组件多种实现、实现方案的取舍与纠结
组件库梯队建设
- 梯队建设：布局样式类、浮层弹窗类、表单交互类、数据展示类、组件库便捷指令。
- 架构设计：确立梯队后需更易于扩展的架构、层次设计，规范规则（BEM、Lint）、目录结构、开发流程（信息交换、API 调研、讨论制定、创建实现、UI 实现、文档示例、测试 Review、视觉走查）。
组件的不同实现方式
- 鼓励不同实现：Rate 投票组件（滑动、点击变换星星数量、半星、星星替换成不规则图形）、滑块组件（Hover、Click、MouseIn、Input type=range、mask 遮罩）。
- 对比维度：核心思路、代码量、Template 简洁性、兼容性、功能丰富度、适合场景。
CarsDesign 的取舍与纠结
- Panel 布局组件：纠结于提供怎样的数据结构让开发者使用更自然。
- 解决方案：平铺结构（开发者清楚绝对位置，但配置难）、嵌套结构（开发者配置爽快，但后向扩展麻烦、DOM 结构复杂、拖拽功能难）。
- 最终方案：开发者组件 API 入参处理数据拍平，用于 Panel 渲染、边界渲染、伸缩动作。
先进特性与属性
- 技术实现方案：与 ElementPlus Table 组件对比，CarsDesign Table 在 FPT 和 DOM Ready 时间上均领先。
- Table 组件实现过程：灵感起源于 Grid 布局，使用 fr 和 grid-* 属性配置行和列，回归 CSS 实现，利用 CSSOM 线程计算和浏览器优化。
- Fixed 处理：使用 STICKY 粘性布局，将渲染交给 CSS，行数越多性能越强。
- 大数据量渲染：动态渲染 500 行数据时，CarsDesign 滚动帧数 12-16，CPU < 70%；Element-Plus 滚动帧数 12-16，CPU < 90%。动态渲染 2000 行数据时，CarsDesign 出现短暂白屏后可交互，Element-Plus 出现滚动严重卡顿。
CarsDesign 组件库周边
- 样式抽离与可视化配置：使用产品的配置服务，将研发对样式分层的理解产品化。
- 迭代计划公布：逐步公布迭代计划，让用户有更多信息建立信任。
- CLI 和项目模板：提供便捷的 CLI 和项目模板，助力从 0 到 1 的工程化创建。
- 服务化和产品化：样式抽离、可视化配置、CLI、项目模板、水印、登录校验、埋点系统接入。
Feature && Topic
- 抽象业务基础组件：Numberal 组件设计、反爬加密组件、基础业务系统组件（字体、水印、头像、业务包裹组件）。
- 面向未来：使用未来 N 年的主流开发框架、语言、语法、规则；API、交互设计遵循开发者自然选择；组件实现细节使用先进方式优化；逐步转移至 Sass 服务、LowCode 平台等未来场景；更多小众组件、更好表达方式、更爽使用体验。
