Vue渲染器是将虚拟DOM转换为真实平台视图的可配置引擎，通过宿主接口实现跨平台适配，核心职责为创建、更新、卸载节点，依赖patch函数协调新旧vnode同步。
Vue 的渲染器（Renderer）本质是一套将虚拟 DOM 转换为真实平台视图的可配置执行引擎，它不直接绑定浏览器 DOM，而是通过抽象的“宿主接口”（host interface）适配不同平台——比如 Web、iOS 原生、小程序、甚至终端或 WebGL。它的核心不是“怎么画”，而是“怎么描述画什么、何时画、怎么更新”。
渲染器的三层职责：创建、更新、卸载
Renderer 不是单个函数，而是一组协作的模块，围绕 patch 函数展开，该函数接收新旧 vnode 并决定如何同步到目标平台：
-
create：根据 vnode 类型（元素、组件、文本、注释等）调用对应宿主方法（如
hostCreateElement），生成平台原生节点（document.createElement、UIView.new()、createSelectorQuery等） -
patch：对比新旧 vnode 的关键字段（props、children、key、ref 等），仅对发生变化的部分调用宿主更新方法（如
hostPatchProp设置属性、hostInsert插入子节点） - unmount：递归清理资源——移除 DOM 节点、销毁组件实例、清除事件监听器、释放内存引用，避免泄漏
跨平台靠“宿主配置”，而非重写渲染逻辑
Vue 3 渲染器通过一个纯对象（rendererOptions）注入平台能力，同一套 patch 算法复用所有环境：
- Web 平台提供
createElement→document.createElement，setElementText→node.textContent = - Weex 或 React Native 平台提供
createElement→ 创建原生视图实例，insert→ 调用原生布局 API 插入子视图 - 服务端渲染（SSR）则提供
createElement→ 返回字符串片段，createText→ 返回`${text}`，全程不操作真实 DOM
这种设计让 Vue 核心渲染算法与平台解耦，新增平台只需实现约 10 个宿主函数，无需修改响应式系统或 diff 逻辑。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
虚拟 DOM 是中间表示，不是性能瓶颈
有人误以为 vdom 是为了“避免 DOM 操作”，其实不然。vdom 的真正价值在于：
- 声明性契约：vnode 是不可变数据结构，明确描述“应该是什么”，便于做静态分析（如编译时优化）、服务端预取、快照比对
-
增量更新可控：diff 过程可中断、可调度（结合
requestIdleCallback或 Scheduler），支持时间切片（Vue 3.4+ 的startTransition就基于此） -
跨平台语义统一：组件开发者写
<button></button>，无论运行在浏览器还是小程序，都由 renderer 映射为对应平台的事件注册方式，无需条件判断
组件级渲染：vnode 是桥梁，render 函数是源头
每个组件的 render() 函数返回 vnode，这是 renderer 的输入起点。但真正的驱动来自响应式系统：
- 组件 setup 中的 ref / reactive 被 track 收集依赖
- 当响应式数据变化，触发组件对应的 effect 重新执行
render() - 新 vnode 传入 renderer 的
patch(container, prevVNode, nextVNode)，进入更新流程 - 组件自身也作为 vnode 的 type 存在，renderer 会递归调用其子组件的 render，形成树状调度
所以 renderer 不关心“谁变了”，只负责“怎么把新描述应用到平台”；变化侦测和更新触发，由 reactivity 模块完成——二者通过 effect 和 vnode 生命周期钩子协同。
