必不可少的UI组件一——组件的基础知识

本文由郭凯南同学分享，主要是基于组件库开发的场景，介绍了 Vue 组件开发的基础知识与优秀实践。

前言

很多同学随着自己前端技能的增长，不满足于常规的业务开发，开始想着做一些自己的技术积累。例如学会了 Vue 框架的使用以及如何封装组件之后，想要自己试着开发一套组件库引入到项目中，甚至共享给更多的人使用。但是在这个过程中，往往会遇到许多的问题：

• 组件库工程需要的基础设施该如何搭建，如何实现组件库的构建、提交门禁、测试、文档、发布？
• 对于复杂一些的组件，我在实现的过程中感觉逻辑越来越混乱，代码越来越难以维护，最终难以持续迭代下去。
• 有些组件交互复杂，甚至由多个子组件构成(例如 Form 和 FormItem)，它们之间的通信和状态共享如何处理？感觉缺少思路，无从下手。

磨刀不误砍柴工，对于正处于经验积累阶段的前端同学，或许需要先重温一些基础知识，夯实内功，才能更好地实践。

实践 Vue 组件库的搭建，我们是需要掌握一些前置知识的：

• 一方面是前端工程化相关内容，它们是组件库的地基、脚手架般重要的存在，是整个组件库工程的基础；
• 另一方面是 Vue 组件开发的技巧与优秀实践，它们在实现组件库主体部分时发挥作用，决定了我们的能否实现、能否做好每一个组件。

本章分享的内容侧重于后者，我们将基于组件库开发的场景，介绍一些高频使用的 Vue 框架基础知识与实战技巧，主要内容如下：

• 组件的基本概念；
• 官方主推的组件开发范式：单文件组件与组合式 API；
• 深入组合式 API：响应式 API；
• 深入组合式 API：组件的生命周期；
• 深入组合式 API：组件之间的通信方式；
• 组件开发的优秀实践介绍。

我们在举例时，会尽量贴近当下环境中较新的实践——使用 Vue 的最新版本与 TypeScript。如果读者在阅读过程中对代码示例中的内容感到困惑，可以前往以下文档补充学习：

• Vue 官方文档
• TypeScript 官方文档
• TypeScript 学习指南

组件的基本概念

对于组件库而言，组件的概念是用户界面 UI 中独立的、可重用的部分，用户倾向于多次复用组件，像搭积木一样，将多个组件组合为完整的用户界面。

不过，站在 Vue 框架层面来看，我们先前提到的“组件”的概念其实是 Vue 框架中“组件”概念的子集。对于 Vue 框架而言，万物都是组件——无论是大的用户界面，还是小的功能模块。

任何一个 Vue 应用都可以看做是以 App.vue(入口组件可以叫其他名称) 为根节点的组件树。

既然我们的目标是编写组件库，那么下文将要讲解的基础知识将围绕着以下三个问题展开：

• 应该采用什么样的范式编写 Vue 组件？
• 如何编写组件的内部运行逻辑？
• 如何定义组件的外部交互接口？即处理组件之间的通信问题。

单文件组件与组合式 api

目前，Vue 官方主推的组件实现范式是 单文件组件 与 组合式 API 的结合。下面给出一个典型案例：

如你所见，Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。