【Vue3源码学习】— CH3.3 renderer.ts详解

1.概念理解

1.1 主要功能

功能	描述
渲染和更新 DOM	渲染器的核心职责是将 VNode 树转换成 DOM 树。这涉及到创建 DOM 元素、插入到页面中，以及更新现有元素的属性以匹配 VNode 的变更。
Patch 过程	渲染器实现了一个称为 patch 的函数，这个函数是整个渲染过程的核心。它比较新旧 VNodes，并执行必要的 DOM 更新。 patch 函数处理各种类型的 VNodes，如组件、普通元素和文本节点等。
组件挂载和更新	对于组件 VNodes，patch 函数会处理组件的挂载和更新逻辑，包括初始化组件实例、调用生命周期钩子以及处理组件的子 VNodes。
指令和属性处理	渲染器还负责处理指令（如 v-model、v-show 等）和动态属性的更新。
优化策略	render.ts 中包含了多种优化策略，以提高渲染过程的效率，如静态内容提升、条件渲染优化等。

1.2 核心函数

功能	描述
render	这个函数接收一个 VNode 和一个容器 DOM 元素，它会调用 patch 来渲染 VNode 到指定的容器中。
patch	函数接收新旧 VNodes 和它们所属的容器，执行实际的 DOM 更新逻辑。
mountComponent	用于挂载组件类型的 VNodes，初始化组件实例，并触发相关的生命周期钩子。
updateComponent	当组件的响应式依赖发生变化时，更新组件的实例。

1.3 流程说明

流程	说明
渲染初始界面	当调用 createApp().mount() 时，render 函数会被触发，开始新的 VNode 渲染流程。
更新界面