VuecreateRenderer自定义渲染器从入门到实战

Vue 3 的强大之处，远不止于高效渲染浏览器 DOM。它的一套核心机制，可以让你实现小程序、Native 等多端渲染。而这一切的基石，就是 createRenderer 函数。这个函数允许你自定义渲染逻辑，摆脱 Vue 内置 DOM 渲染的限制，打造出适配任意平台的渲染器。

一、自定义 DOM 渲染器

这个示例的重点，是实现一个支持事件绑定的 patchProp 方法，并且加入虚拟节点更新的案例，让你直观地看到渲染器的更新流程。

完整可运行代码

运行效果

1. 打开浏览器运行该 HTML 文件，页面先显示 Hello initial vnode，鼠标悬浮弹出「初始节点」提示；
2. 1秒后，文本自动更新为 hello world，悬浮提示变为「更新后节点（带点击事件）」；
3. 点击文本所在的 div，控制台打印 更新了！点击事件触发成功～；
4. 全程控制台会清晰打印渲染、更新、事件绑定的日志，直观看到自定义渲染器的完整执行流程。

二、核心拆解：这段代码到底在做什么？

我们来逐部分拆解代码，看看 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 平台）

关键亮点：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);

这段代码的核心逻辑：

1. 初始渲染：调用 renderer.render(vnode1, app)，渲染器将 vnode1 转换为真实 DOM，并插入到挂载容器中，完成首次渲染。
2. 延迟更新：1 秒后，调用 renderer.render(vnode2, app)。这时，渲染器会自动对比 vnode1 和 vnode2 的差异，包括属性和文本内容。
3. 差异更新：
   • 对于 title 属性，触发 patchProp 方法，将旧值「初始节点」更新为新值「更新后节点（带点击事件）」。
   • 对于 onClick 事件，同样触发 patchProp 方法，绑定新的点击事件回调。
   • 对于文本内容，触发 setText 方法，将「Hello initial vnode」更新为「hello world」。
4. 无全量重建：整个更新过程，没有删除旧的 DOM 再创建新的，而是只更新了有差异的部分。这就是 Vue 渲染高效的核心原因。

4. 挂载应用的两种方式

这个案例使用了 renderer.render(vnode, container) 直接渲染 VNode。除此之外，你也可以通过 renderer.createApp(component).mount(container) 来挂载组件，两种方式都有效。

• 直接渲染 VNode：更灵活，适合手动控制渲染流程，比如我们这个延迟更新的案例。
• 通过 createApp 挂载：更贴近日常 Vue 开发，适合组件化开发场景。

三、深入理解：自定义渲染器的工作流程

整个渲染与更新过程，可以总结为 4 个核心步骤，它们形成一个完整的闭环：

1. 生成 VNode：通过 h 函数创建标准 VNode，提供渲染的数据来源。
2. 首次渲染：渲染器调用 6 个核心方法，将 VNode 转换为真实节点，并插入到挂载容器中。
3. VNode 对比：更新时，渲染器对比新旧 VNode，找出属性、文本等所有差异。
4. 差异更新：针对差异部分，调用对应的 patchProp、setText 等方法，精准更新真实节点，避免了全量重建带来的性能开销。