Vue 3 的强大之处，远不止于高效渲染浏览器 DOM。它的一套核心机制，可以让你实现小程序、Native 等多端渲染。而这一切的基石，就是 createRenderer 函数。这个函数允许你自定义渲染逻辑，摆脱 Vue 内置 DOM 渲染的限制，打造出适配任意平台的渲染器。
一、自定义 DOM 渲染器
这个示例的重点，是实现一个支持事件绑定的 patchProp 方法，并且加入虚拟节点更新的案例，让你直观地看到渲染器的更新流程。
完整可运行代码
Vue 自定义渲染器入门示例
运行效果
- 打开浏览器运行该 HTML 文件，页面先显示
Hello initial vnode，鼠标悬浮弹出「初始节点」提示； - 1秒后，文本自动更新为
hello world，悬浮提示变为「更新后节点（带点击事件）」； - 点击文本所在的
div，控制台打印更新了！点击事件触发成功～； - 全程控制台会清晰打印渲染、更新、事件绑定的日志，直观看到自定义渲染器的完整执行流程。
二、核心拆解：这段代码到底在做什么？
我们来逐部分拆解代码，看看 createRenderer 的核心组成和工作逻辑，重点解析一下新增的虚拟节点更新案例。
1. 核心引入：createRenderer和h函数
const { createRenderer, h } = Vue;
这两个函数是实现自定义渲染的关键，它们各自承担着核心职责。
createRenderer：Vue 3 提供的渲染器工厂函数。你可以把它想象成一个工厂，给它一套“平台操作手册”，它就能生产出一个完整的渲染器实例。这个实例拥有createApp和render方法，功能上和 Vue 默认的 DOM 渲染器完全一致，唯一的区别是，渲染逻辑完全由你说了算。h函数：它的全称是createVNode，作用是构建虚拟 DOM 节点（VNode）。它接收标签名、属性对象、子节点等参数，返回一个标准的 VNode 对象，作为渲染器的“原材料”。
2. 核心步骤：创建自定义渲染器（createRenderer）
const renderer = createRenderer({ /* 渲染配置对象 */ });
createRenderer 接收一个配置对象作为唯一参数，这个对象必须实现 6 个核心方法。这些方法就是渲染器与“目标平台”之间的沟通桥梁，负责把 VNode 转换成目标平台上的真实节点。在这个例子中，目标平台就是浏览器 DOM。
6 个核心渲染方法详解（DOM 平台）
| 方法名 | 核心作用 | 入参说明 |
|---|---|---|
| createElement | 创建元素节点 | tag：标签名（如 'div'、'p'），返回创建好的 DOM 元素 |
| patchProp | 更新元素属性 | el：真实 DOM 元素、key：属性名、prevValue：旧属性值、nextValue：新属性值 |
| insert | 插入元素 | el：要插入的 DOM 元素、parent：父 DOM 元素、anchor：插入参考节点（null 则插入末尾） |
| remove | 移除元素 | el：要移除的 DOM 元素 |
| createText | 创建文本节点 | text：文本内容，返回创建好的 DOM 文本节点 |
| setText | 更新文本节点 | node：真实 DOM 文本节点、text：新的文本内容 |
关键亮点：patchProp支持事件绑定
这次改造的核心，就是 patchProp 方法。它不仅能处理 title 这类普通属性，还能识别 onClick 这类事件属性，实现 DOM 事件的绑定与移除。它的逻辑很清晰：先判断属性是不是 onXXX 格式的事件，然后提取出原生事件名，最后遵循“先清后绑”的原则，避免重复绑定导致事件被多次触发。
3. 新增亮点：虚拟节点更新案例（核心解析）
自定义渲染器如何处理 VNode 更新？这其实也是 Vue 响应式更新机制的底层缩影。我们来看看这段代码：
// 2. 获取挂载容器const app = document.getElementById('app');// 3. 初始虚拟节点（无事件）const vnode1 = h('div', { title: '初始节点' }, 'Hello initial vnode');// 4. 1秒后更新的虚拟节点（带 onClick 事件）const vnode2 = h( 'div', { onClick() { console.log('更新了！点击事件触发成功～'); }, title: '更新后节点（带点击事件）' // 同时更新普通属性 }, 'hello world');// 5. 先渲染初始虚拟节点renderer.render(vnode1, app);// 6. 1秒后更新虚拟节点，触发 patchProp 处理事件和属性更新setTimeout(() => { console.log('==== 开始更新虚拟节点 ===='); renderer.render(vnode2, app);}, 1000);
这段代码的核心逻辑：
- 初始渲染：调用
renderer.render(vnode1, app)，渲染器将vnode1转换为真实 DOM，并插入到挂载容器中，完成首次渲染。 - 延迟更新：1 秒后，调用
renderer.render(vnode2, app)。这时，渲染器会自动对比vnode1和vnode2的差异，包括属性和文本内容。 - 差异更新：
- 对于
title属性，触发patchProp方法，将旧值「初始节点」更新为新值「更新后节点（带点击事件）」。 - 对于
onClick事件，同样触发patchProp方法，绑定新的点击事件回调。 - 对于文本内容，触发
setText方法，将「Hello initial vnode」更新为「hello world」。
- 对于
- 无全量重建：整个更新过程，没有删除旧的 DOM 再创建新的，而是只更新了有差异的部分。这就是 Vue 渲染高效的核心原因。
4. 挂载应用的两种方式
这个案例使用了 renderer.render(vnode, container) 直接渲染 VNode。除此之外，你也可以通过 renderer.createApp(component).mount(container) 来挂载组件，两种方式都有效。
- 直接渲染 VNode：更灵活，适合手动控制渲染流程，比如我们这个延迟更新的案例。
- 通过
createApp挂载：更贴近日常 Vue 开发，适合组件化开发场景。
三、深入理解：自定义渲染器的工作流程
整个渲染与更新过程，可以总结为 4 个核心步骤，它们形成一个完整的闭环：
- 生成 VNode：通过
h函数创建标准 VNode，提供渲染的数据来源。 - 首次渲染：渲染器调用 6 个核心方法，将 VNode 转换为真实节点，并插入到挂载容器中。
- VNode 对比：更新时，渲染器对比新旧 VNode，找出属性、文本等所有差异。
- 差异更新：针对差异部分，调用对应的
patchProp、setText等方法，精准更新真实节点，避免了全量重建带来的性能开销。
