组件系统

相关源文件

• .github/CONTRIBUTING.md
• .github/ISSUE_TEMPLATE/config.yml
• .github/PULL_REQUEST_TEMPLATE.md
• BACKERS.md
• LICENSE
• README.md
• src/core/instance/proxy.ts
• types/index.d.ts
• types/options.d.ts
• types/plugin.d.ts
• types/test/options-test.ts
• types/test/plugin-test.ts
• types/test/vue-test.ts
• types/vnode.d.ts
• types/vue.d.ts

Vue.js 组件系统是构建 Vue 应用程序的基础。它使开发人员能够创建可重用、自包含的单元，这些单元封装了 HTML、CSS 和 JavaScript 功能。本文档涵盖了 Vue 组件系统的架构、生命周期和实现细节。

有关驱动组件的响应式系统的信息，请参阅响应式系统。有关 Vue 如何将组件渲染到 DOM 的详细信息，请参阅虚拟 DOM 实现。

组件系统概述

Vue 组件系统的核心是提供一种构建封装的、可重用 UI 元素的方式。Vue 中的组件是具有预定义选项的 Vue 实例。它们可以嵌套、组合，并可以通过明确定义的接口相互通信。

来源：types/vue.d.ts45-104 types/options.d.ts168-245

组件定义

Vue.js 中的组件可以通过多种方式定义。最常见的方法是使用 ComponentOptions 接口，它提供了创建组件的配置对象。

来源：types/options.d.ts168-245 types/vue.d.ts45-104 types/vue.d.ts164-444

组件注册

Vue 提供两种注册组件的方式：

1. 全局注册 - 使组件在整个应用程序中可用

2. 局部注册 - 将组件范围限制在注册它的地方

来源：types/vue.d.ts348-420 types/test/options-test.ts21-26

组件 Props

Props 是用于从父组件向子组件传递数据的自定义属性。它们在父子组件之间形成单向向下绑定。

Vue 支持多种 Prop 验证选项：

选项	描述
类型	数据类型验证 (String, Number, Boolean, Array, Object, Function, Symbol)
必需	Prop 是否必需
默认	未提供时的默认值
validator	自定义验证函数

来源：types/options.d.ts277-291 types/test/options-test.ts28-43 types/test/options-test.ts73-91

组件生命周期

Vue 组件有一系列生命周期钩子，允许你在组件生命周期的特定阶段执行代码。

来源：types/options.d.ts202-213 types/test/options-test.ts253-270

生命周期钩子执行顺序

1. 创建:

   • beforeCreate: 在数据观测和事件/侦听器设置之前
   • created: 在数据观测和事件/侦听器设置之后

2. 挂载:

   • beforeMount: 在 DOM 挂载之前
   • mounted: 在 DOM 挂载之后，并且 el 被新创建的 vm.$el 替换之后

3. 更新:

   • beforeUpdate: 当数据更改时，在 DOM 打补丁之前
   • updated: 在数据更改导致 DOM 打补丁之后

4. 销毁:

   • beforeDestroy: 在销毁之前（移除侦听器、子组件、事件监听器）
   • destroyed: 在销毁完成之后

5. 附加钩子:

   • activated: 当 <keep-alive> 内的组件被激活时
   • deactivated: 当 <keep-alive> 内的组件被停用时
   • errorCaptured: 当捕获到来自后代组件的错误时
   • serverPrefetch: 用于服务器端渲染（Vue 2.6 中添加）

来源：types/options.d.ts202-213 types/test/options-test.ts253-270

组件通信模式

Vue 组件通过多种方式进行通信：

Props（父到子）

父组件使用 Props 向子组件传递数据。Props 在子组件的选项中定义，并通过 HTML 属性传递。

来源：types/options.d.ts277-299 types/test/options-test.ts28-43

事件（子到父）

子组件发出事件，父组件可以侦听这些事件。

来源：types/vue.d.ts99-101 types/test/vue-test.ts54

Provide/Inject（适用于深度嵌套组件）

对于深度嵌套的组件层次结构，Vue 提供了 provide 和 inject 选项。

来源：types/options.d.ts227-228 types/options.d.ts343-349 types/test/options-test.ts322-339

函数式组件

函数式组件是无状态、无实例的组件，渲染效率更高。它们接收 props 和 context 作为参数，并返回虚拟节点。

函数式组件通过 functional: true 选项定义。

来源：types/options.d.ts247-264 types/options.d.ts266-275 types/test/options-test.ts421-462

异步组件

Vue 通过异步组件支持组件的按需加载。这对于大型应用程序中的代码分割特别有用。

异步组件可以通过以下几种方式定义：

1. 使用返回 Promise 的工厂函数

2. 带有加载状态的高级选项

来源：types/options.d.ts37-76 types/test/options-test.ts465-477 types/test/options-test.ts498

组件渲染

Vue 组件可以通过两种方式渲染内容：

基于模板的渲染

模板使用带有 Vue 特定指令和语法的 HTML。

渲染函数

渲染函数提供了对 Vue 虚拟 DOM 的程序化访问。

来源：types/options.d.ts193-200 types/vue.d.ts103 types/test/options-test.ts186-247

组件内部实现

Vue 组件系统建立在一组核心模块之上，这些模块处理组件功能的不同方面。

来源：.github/CONTRIBUTING.md98-117 src/core/instance/proxy.ts1-98

当组件被创建时，Vue 遵循以下初始化过程：

1. 合并选项（用户选项 + 构造函数选项 + mixins + extends）
2. 初始化生命周期状态
3. 初始化事件
4. 初始化渲染
5. 调用 beforeCreate 钩子
6. 初始化注入、状态（props、methods、data、computed、watch）
7. 初始化 provide
8. 调用 created 钩子
9. 如果提供了 el 选项，则挂载组件

来源：types/options.d.ts168-245 .github/CONTRIBUTING.md112-116

组件扩展机制

Vue 提供了几种扩展和重用组件功能的方式：

Mixins

Mixins 是一种灵活的方式，用于在 Vue 组件中分发可重用功能。

来源：types/options.d.ts236 types/vue.d.ts430 types/test/options-test.ts305

Extends

extends 选项允许一个组件继承另一个组件。

来源：types/options.d.ts241 types/test/options-test.ts307 types/test/vue-test.ts167-187

插件系统

插件在全局层面扩展 Vue 的功能，通常添加全局方法、属性、指令或组件。

来源：types/plugin.d.ts1-8 types/vue.d.ts422-429 types/test/plugin-test.ts1-21

TypeScript 中的组件类型

Vue 2.7 包含了对组件的全面 TypeScript 支持，为各种组件 API 提供了类型定义。

来源： types/vue.d.ts164-444 types/options.d.ts15-25 types/options.d.ts168-245 types/options.d.ts247-264 types/options.d.ts37-76

最佳实践

组件设计原则

1. 单一职责：每个组件都应具有单一、明确的职责
2. 松散耦合：组件之间应尽可能减少相互了解
3. 可复用性：设计组件时要考虑在不同上下文中复用
4. 可测试性：组件应易于独立测试

组件命名约定

1. 使用多词名称，以避免与现有和未来的HTML元素冲突
2. 在模板中使用 kebab-case，在 JS/TS 中使用 PascalCase
3. 基础组件应以特定前缀开头（例如，Base、App 或 V）
4. 单实例组件应以 The 前缀开头
5. 与其父组件紧密耦合的子组件应包含父组件名称作为前缀

来源： README.md42-48 .github/CONTRIBUTING.md98-117

结论

Vue 的组件系统是 Vue 组合模型的基础，它使开发者能够用小巧、独立且可复用的代码块构建复杂的 UI。理解组件系统对于有效使用 Vue 至关重要。

有关相关主题的更多信息，请参阅

• 有关 Vue 如何追踪更改的详细信息，请参阅响应式系统
• 有关组件如何渲染的详细信息，请参阅虚拟 DOM 实现
• 有关单文件组件的详细信息，请参阅SFC 解析和编译流程

来源： README.md42-48 types/vue.d.ts45-104 types/options.d.ts168-245