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

render 函数是 Vue 的根渲染函数，用于将虚拟节点（VNode）渲染或更新到实际的 DOM 容器中。这个函数是渲染流程中的高级入口点，因为它直接处理根级的虚拟节点（VNode）和它们的挂载或更新逻辑。所以我们从 render 方法入手理解 Vue 渲染机制。

1. 源码解析

export type RootRenderFunction<HostElement = RendererElement> = (
  vnode: VNode | null,           // 要渲染或更新的虚拟节点
  container: HostElement,        // DOM 元素，它是 vnode 的挂载目标
  namespace?: ElementNamespace,  // 可选参数，用于支持如 SVG 或 MathML 等特定的命名空间
) => void

const render: RootRenderFunction = (vnode, container, namespace) => {
   
    //1. 判断 vnode 是否为空，判断是否需要卸载当前存在的vnode
    if (vnode