Vue渲染器是平台无关的可配置同步引擎，通过宿主接口适配多端，核心职责为调度mount/patch/unmount流程，将组件声明的vnode转化为真实视图。
渲染器是平台无关的执行引擎
Vue 的 createRenderer() API 抽象出一整套底层操作接口，比如 createElement、patchProp、insert、remove 等。这些方法不关心 DOM，只约定“如何创建节点”“如何更新属性”“如何插入子树”。
这意味着同一套 Vue 运行时，可以对接浏览器 DOM、Web Worker、Canvas、甚至终端字符界面——只要实现对应平台的 RendererOptions，就能复用响应式系统、虚拟 DOM diff、生命周期等全部能力。
组件通过三种主要方式描述渲染意图
组件并不直接操作 DOM，而是通过以下任一方式向渲染器表达“我长什么样”：
-
template 字符串：最常用，由编译器在构建时或运行时转为
render函数；语法贴近 HTML，但本质仍是生成 vnode 的逻辑 -
render 函数：显式调用
h()创建 vnode 树，完全编程式，适合动态结构、逻辑复杂或需要类型推导的场景 -
setup 返回 vnode（组合式 API）：在
setup()中直接返回一个函数，该函数接收props和slots并返回 vnode，天然支持响应式依赖追踪
三者最终都归一为一个可执行的 render 函数，供渲染器在挂载和更新时反复调用。
组件接口的关键字段决定渲染行为
一个组件对象（或 defineComponent 配置）中，以下字段直接参与渲染流程：
立即学习“前端免费学习笔记（深入）”；
-
render：最高优先级，若存在，template被忽略 -
template：字符串模板，仅在含编译器的构建版本中生效；以#开头时会作为 CSS 选择器查找<template>元素内容 -
compilerOptions：微调模板编译行为，例如自定义指令、模块解析规则，仅影响当前组件 -
slots（Vue 3.3+）：纯类型辅助字段，帮助 TypeScript 在render函数中正确推导插槽作用域参数类型，不参与实际运行
vnode 是组件与渲染器之间的通用语言
无论用哪种方式定义组件，最终产出都是一个 vnode（虚拟节点）对象，形如：
{ type: 'div', props: { id: 'app', onClick: handler }, children: [...] }
这个对象不含任何平台细节，只描述“要什么”，比如标签名、属性、事件、子节点。渲染器拿到它后，才依据自己的 RendererOptions 去创建真实节点、绑定事件、插入文档流。vnode 的设计让组件逻辑彻底脱离 DOM，也使 SSR、测试、跨端成为可能。
