第 5 章 组件化：管线的复用单元

第 5 章 · 组件化：管线的复用单元

章节摘要：组件是把"一段渲染管线"打包复用的机制——每个组件有自己的模板、数据与更新边界。本章从组件的注册与生命周期讲到父子通信与高级模式（插槽、动态组件、异步组件），并给出组件设计的拆分判断标准。

学习目标

阅读完本章，你应当能够：

1. 用全局与局部两种方式注册组件并说明选择依据；
2. 按真实流程描述生命周期各钩子的触发顺序；
3. 在 Props 单向数据流的前提下设计父子通信方案；
4. 用插槽实现内容分发，用动态与异步组件做按需加载；
5. 判断一个界面该不该拆组件、在哪里划边界。

核心概念速览

组件 = 带边界的渲染管线。边界既隔离了复杂度，也提供了第 4 章所说的"可跳过的更新单元"。

子章节导航

5.1 组件基础

注册方式、单文件组件结构、生命周期钩子的真实顺序与常见误用。

5.2 组件通信

Props 单向流、自定义事件、双向绑定的实现约定，跨层通信的方案阶梯。

5.3 组件进阶

插槽分发、动态组件与 keep-alive、异步组件懒加载，以及第三方组件库的选型思路。

子章节之间的逻辑关系

5.1 立起"组件是一个独立管线单元"的模型，5.2 解决单元之间的数据进出口，5.3 处理内容与加载两个高阶维度。三者递进，跳章会在通信设计上踩坑。

组件单元模型（5.1）
   ├─ 数据进口 Props / 出口 Emits（5.2）
   ├─ 内容进口 插槽 / 时机控制 动态与异步（5.3）
   └─ 超出父子 → 第 6 章 状态管理接管
​

前置知识与后续延伸

• 前置：第 4 章的组件更新边界概念；
• 为后续铺路：组件通信的无力感正是第 6 章状态管理的登场理由；异步组件是第 9 章性能优化的主力手段之一。

本章阅读时建议备一个小练习：拿自己手头任何一个页面，先画出它的组件树（外框画组件、内框标 props 与事件），再对照 5.2 的选型阶梯检查每条数据线走的通道是否合理。多数人第一次画完都会发现至少一处"层级中转纯属浪费"或"兄弟组件借父级倒手"的设计，这些发现正是第 6 章引入仓库时你会主动想起的痛点——带着痛感学状态管理，比直接背概念快得多。