在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

vuejs/core

菜单

组件系统

相关源文件

Vue.js 组件系统是使 Vue 应用程序中组件的创建、管理和生命周期成为可能的核心架构基础。本文档详细介绍了 Vue.js 运行时核心内部组件的定义、实例化和管理方式。

有关 Props 和 Emit 系统实现的具体信息，请参阅 Props 和 Emit 系统。

概述

组件系统为组件定义（通过 Options API 或 Composition API）、创建组件实例、管理组件生命周期以及通过响应式系统处理组件更新提供了基础架构。

来源

组件定义和类型

Vue 组件可以通过多种方式定义，分为两大类：有状态组件和函数式组件。

有状态组件

有状态组件维护内部状态并拥有完整的组件生命周期。它们可以通过

  1. Options API 定义——一个具有 data、methods、computed 等选项的对象来定义。
  2. Composition API 定义——通过 setup() 函数，该函数返回一个响应式状态对象或一个渲染函数。

函数式组件

函数式组件是无状态的，没有生命周期，并且主要是带有 props 的渲染函数。

来源

组件实例创建

组件实例的创建过程涉及几个关键步骤

  1. 创建实例结构
  2. 设置 props 和 slots
  3. 执行 setup 函数（如果使用 Composition API）
  4. 通过编译模板或使用提供的渲染函数来完成 setup

来源

组件生命周期

Vue 组件的生命周期通过一系列钩子函数来管理，这些钩子函数在组件生命周期的特定时间点被调用。

生命周期钩子

Vue 组件有许多生命周期钩子，它们在不同阶段被调用

钩子时间点
beforeCreate实例初始化之前
created实例创建后，挂载之前
beforeMountDOM 挂载开始之前
mounted组件挂载到 DOM 之后
beforeUpdate由于状态更改导致组件更新之前
updated组件更新之后
beforeUnmount组件从 DOM 移除之前
unmounted组件从 DOM 移除之后
activatedkeep-alive 组件激活时
deactivatedkeep-alive 组件停用时
errorCaptured捕获到子组件的错误时
renderTracked渲染过程中跟踪到响应式依赖时
renderTriggered响应式依赖触发重新渲染时

来源

组件内部结构

组件在内部由 ComponentInternalInstance 接口表示，该接口包含创建、渲染和管理组件在其生命周期中的所有必要信息。

ComponentInternalInstance 的主要属性

  • uid：组件的唯一标识符
  • type：组件定义（选项对象或函数）
  • parent：父组件实例
  • root：根组件实例
  • vnode：代表此组件的虚拟节点
  • subTree：组件渲染树的根虚拟节点
  • setupState：setup() 函数返回的状态
  • props：组件 props
  • attrs：非 prop 属性
  • slots: 组件插槽
  • emit: 用于触发事件的方法
  • render：渲染函数
  • proxy：公共实例代理（在 methods 中作为 this 访问）
  • 生命周期钩子存储

来源

公共实例和代理系统

Vue 为每个组件实例创建一个代理，为用户代码提供友好的界面与组件交互。当你通过 this 访问组件方法时，就是访问这个代理。

公共属性

组件的公共实例公开属性，例如

  • $el：根 DOM 元素
  • $props：组件 props
  • $attrs：非 prop 属性
  • $slots：组件插槽
  • $parent：父组件
  • $root：根组件
  • $emit：发出事件的方法
  • $nextTick：访问 Vue 的 nextTick 工具
  • $forceUpdate：手动触发组件更新
  • 组件数据、计算属性和方法

所有这些都通过一个 Proxy 访问，该 Proxy 负责确定属性是来自 props、data、computed、methods 等。

来源

setup 函数和 Composition API

setup 函数是 Composition API 的入口点。它接收 props 和 context 作为参数，并可以返回一个渲染函数或一个响应式状态对象。

setup 函数执行流程

  1. setup 函数在组件初始化期间被调用
  2. props 作为第一个参数传递，context 对象作为第二个参数
  3. context 包含 attrs、slots、emit 和 expose 方法
  4. 返回的对象属性将可在组件实例上访问
  5. 如果返回的是一个函数，则将其用作渲染函数

来源

与响应式系统的集成

组件与 Vue 的响应式系统深度集成，这使得在响应式状态发生变化时能够自动更新。

响应式更新机制

  1. 组件状态（来自 data、computed 或 setup）被设为响应式的
  2. 在渲染过程中，会跟踪依赖项
  3. 当响应式状态发生变化时，会调度组件更新
  4. 组件重新渲染，DOM 高效更新

来源

组件注册与应用创建

组件可以全局注册或本地注册，然后可以在模板中使用。

应用与组件注册

来源

组件实例的挂载和渲染

组件的挂载过程包括创建实例、设置实例并将其渲染到 DOM。

来源

高级组件功能

Vue 的组件系统包含一些高级功能

特殊组件

  • Teleport：将内容渲染到 DOM 的不同位置
  • Suspense：处理异步组件和异步 setup 函数
  • KeepAlive：在组件实例不活跃时缓存它们
  • Transition：为进入/离开 DOM 的元素提供动画功能

函数式组件

函数式组件是标准组件的轻量级替代方案

来源

异步组件

Vue 支持异步组件，这些组件可以按需加载

这允许代码拆分和组件的延迟加载。

来源

总结

Vue 的组件系统提供了一种灵活而强大的方式来使用可重用组件构建应用程序。该系统支持不同的组件定义风格（Options API vs Composition API），管理组件生命周期，处理 props 和事件，并与 Vue 的响应式系统集成以实现高效更新。

该系统的架构支持异步组件、函数式组件和特殊内置组件等功能，同时通过虚拟 DOM diff 算法提供性能优化。