【Vue3源码学习】— CH3 探索核心运行时: runtime-core

1.概核心API概览

Vue 3 的 runtime-core 包含了 Vue 的核心运行时逻辑，它负责组件的创建、更新、渲染等核心功能。runtime-core 设计的目的是为了让 Vue 更加轻量，并且能够被不同的平台（如 Web、小程序等）复用。以下是一些 runtime-core 的关键概念和组成部分：

虚拟 DOM（Virtual DOM）

虚拟 DOM 是对真实 DOM 的抽象表示，它允许 Vue 在内存中以 JavaScript 对象的形式描述 UI 结构，然后高效地计算出最小的更新操作来实现视图的更新。这减少了直接操作 DOM 的次数，提高了性能。

渲染器（Renderer）

Vue 3 的渲染器是基于虚拟 DOM 实现的，它负责将虚拟 DOM 节点转换成真实的 DOM 节点，并挂载到页面上。渲染器同时也处理组件的更新逻辑，确保数据变化时 UI 能够响应式地更新。

组件实例（Component Instance）

组件实例是 Vue 组件在运行时的状态和行为的封装。每个 Vue 组件都会被实例化为一个组件实例，包含了数据（data）、计算属性（computed）、方法（methods）等，以及生命周期钩子。

组件树（Component Tree）

Vue 应用是由嵌套的组件树构成的。每个 Vue 应用的根组件下可能包含多个子组件，这些子组件又可能包含更多的子组件，形成一个树状结构。runtime-core 负责管理这个组件树的创建、更新和销毁过程。

响应式系统集成

虽然响应式系统的实现位于 @vue/reactivity 包中，但 runtime-core 与响应式系统紧密集成，确保组件的状态变化能够触发视图的更新。

插槽（Slots）和事件（Events）

runtime-core 还处理了组件之间的插槽和事件通信，允许开发者通过插槽复用组件模板，以及通过事件进行父子组件间的通信。

自定义渲染器（Custom Renderer）

Vue 3 允许开发者创建自定义渲染器，这意味着除了默认的 DOM 渲染器外，开发者可以根据特定平台的需要实现自己的渲染逻辑。这使得 Vue 能够跨平台使用，例如在 Native 移动开发或小程序开发中。

runtime-core 是理解 Vue 3 应用如何运行的关键。通过学习 runtime-core，你能更深入地理解 Vue 的内部机制，包括组件是如何渲染和更新的，以及 Vue 是如何提供跨平台能力的。接下来的学习中，我们会更详细地探索这些核心概念。

2. 文件结构

文件	功能	描述	学习顺序
apiCreateApp.ts	创建应用实例	包含创建 Vue 应用实例的 API，是启动 Vue 应用的入口。	1
vnode.ts	虚拟节点	定义了虚拟 DOM 节点（VNode）的结构和创建 VNode 的函数，是 Vue 渲染机制的基础。	2
renderer.ts	渲染器	核心文件，定义了虚拟 DOM 的渲染逻辑、组件的挂载和更新机制。	3
component.ts	组件系统	定义组件的创建、更新逻辑，以及组件生命周期钩子的处理。	4
componentPublicInstance.ts	组件实例	定义组件公开实例的代理行为，例如属性访问、事件处理等。	5
componentRenderContext.ts	渲染上下文	管理组件渲染时的上下文信息，例如插槽和提供/注入机制。	6
apiLifecycle.ts	生命周期 API	提供组件生命周期钩子的注册函数，如 onMounted、onUpdated 等。	7
apiInject.ts	提供/注入 API	实现依赖注入的 API，如 provide 和 inject。	8
apiWatch.ts	响应式侦听 API	包含 watch 和 watchEffect 函数的实现，用于响应式地观察数据变化。	9
scheduler.ts	调度器	管理异步任务和更新的调度，如批量更新和异步更新队列。	10