Vue createRenderer 自定义渲染器从入门到实战
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">一、自定义 DOM 渲染器</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">完整可运行代码</a></li><li><a href="#_lab2_0_1">运行效果</a></li></ul><li><a href="#_label1">二、核心拆解：这段代码到底在做什么？</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_2">1. 核心引入：createRenderer和h函数</a></li><li><a href="#_lab2_1_3">2. 核心步骤：创建自定义渲染器（createRenderer）</a></li><ul class="third_class_ul"><li><a href="#_label3_1_3_0">6 个核心渲染方法详解（DOM 平台）</a></li><li><a href="#_label3_1_3_1">关键亮点：patchProp支持事件绑定</a></li></ul><li><a href="#_lab2_1_4">3. 新增亮点：虚拟节点更新案例（核心解析）</a></li><ul class="third_class_ul"><li><a href="#_label3_1_4_2">这段代码的核心逻辑：</a></li></ul><li><a href="#_lab2_1_5">4. 挂载应用的两种方式</a></li><ul class="third_class_ul"></ul></ul><li><a href="#_label2">三、深入理解：自定义渲染器的工作流程</a></li><ul class="second_class_ul"></ul></ul></div><p>🔥 Vue 3它不仅能高效渲染浏览器 DOM，还能实现小程序、Native 等多端运行。而支撑这一切的核心，就是 <code>createRenderer</code> 函数。它允许我们自定义渲染逻辑，摆脱 Vue 内置 DOM 渲染的限制，打造适配任意平台的渲染器</p><p class="maodian"><a name="_label0"></a></p><h2>一、自定义 DOM 渲染器</h2>
<p>示例重点实现支持事件绑定的 <code>patchProp</code> 方法，还会加入虚拟节点更新案例，直观看到渲染器的更新流程。</p>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>完整可运行代码</h3>
<div class="jb51code"><pre class="brush:js;"><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue 自定义渲染器入门示例</title>
<!-- 引入 Vue 3 完整版，方便浏览器直接运行 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 渲染挂载容器 -->
<div id="app"></div>
<script>
// 从 Vue 中解构出 createRenderer 和 h 函数
const { createRenderer, h } = Vue;
// 1. 创建自定义渲染器：传入平台渲染配置对象
const renderer = createRenderer({
// 创建元素节点：根据标签名创建 DOM 元素
createElement(tag) {
console.log(`[渲染步骤] 创建元素节点：<${tag}>`);
return document.createElement(tag);
},
// 更新元素属性：核心改造！支持普通属性 + 事件绑定（onXXX 格式）
patchProp(el, key, prevValue, nextValue) {
// 判断是否是事件属性（以 on 开头，且第二个字母大写，如 onClick、onInput）
const isEvent = key.startsWith('on') && /^on/.test(key);
if (isEvent) {
// 提取事件名（去掉 on 前缀，转为小写，如 onClick -> click）
const eventName = key.slice(2).toLowerCase();
// 移除旧的事件监听（如果有旧值）
if (prevValue) {
el.removeEventListener(eventName, prevValue);
}
// 绑定新的事件监听（如果有新值）
if (nextValue) {
el.addEventListener(eventName, nextValue);
console.log(`[渲染步骤] 绑定事件：${eventName}，回调函数已挂载`);
}
} else {
// 普通属性：直接用 setAttribute 处理
if (nextValue === undefined || nextValue === null) {
el.removeAttribute(key);
console.log(`[渲染步骤] 移除普通属性：${key}`);
} else {
el.setAttribute(key, nextValue);
console.log(`[渲染步骤] 更新普通属性：${key} = ${nextValue}`);
}
}
},
// 插入元素：将子元素插入到父元素的指定位置
insert(el, parent, anchor) {
console.log(`[渲染步骤] 插入元素：将 <${el.tagName.toLowerCase()}> 插入到 <${parent.tagName.toLowerCase()}>`);
parent.insertBefore(el, anchor || null);
},
// 移除元素：从父节点中移除当前元素
remove(el) {
console.log(`[渲染步骤] 移除元素：<${el.tagName.toLowerCase()}>`);
el.parentNode.removeChild(el);
},
// 创建文本节点：创建 DOM 文本节点
createText(text) {
console.log(`[渲染步骤] 创建文本节点：${text}`);
return document.createTextNode(text);
},
// 更新文本节点：修改文本节点的内容
setText(node, text) {
console.log(`[渲染步骤] 更新文本节点：${node.nodeValue} → ${text}`);
node.nodeValue = text;
}
});
// 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);
</script>
</body>
</html>
</pre></div>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>运行效果</h3>
<ol><li>打开浏览器运行该 HTML 文件，页面先显示 <code>Hello initial vnode</code>，鼠标悬浮弹出「初始节点」提示；</li><li>1秒后，文本自动更新为 <code>hello world</code>，悬浮提示变为「更新后节点（带点击事件）」；</li><li>点击文本所在的 <code>div</code>，控制台打印 <code>更新了！点击事件触发成功～</code>；</li><li>全程控制台会清晰打印渲染、更新、事件绑定的日志，直观看到自定义渲染器的完整执行流程。</li></ol>
<p class="maodian"><a name="_label1"></a></p><h2>二、核心拆解：这段代码到底在做什么？</h2>
<p>我们逐部分拆解代码，理解 <code>createRenderer</code> 的核心组成和工作逻辑，重点解析新增的虚拟节点更新案例。</p>
<p class="maodian"><a name="_lab2_1_2"></a></p><h3>1. 核心引入：createRenderer和h函数</h3>
<div class="jb51code"><pre class="brush:js;">const { createRenderer, h } = Vue;
</pre></div>
<p>这两个函数是实现自定义渲染的关键，各自承担核心职责：</p>
<ul><li><strong><code>createRenderer</code></strong>：Vue 3 提供的<strong>渲染器工厂函数</strong>，接收一套「平台渲染接口」，返回一个具备完整渲染能力的自定义渲染器实例。这个实例拥有 <code>createApp</code> 和 <code>render</code> 方法，和 Vue 默认的 DOM 渲染器功能一致，只是渲染逻辑由我们自定义。</li><li><strong><code>h</code> 函数</strong>：全称 <code>createVNode</code>，核心作用是<strong>构建虚拟 DOM 节点（VNode）</strong>。它接收标签名/组件、属性对象、子节点/文本内容，返回一个标准的 VNode 对象，作为渲染器的输入数据。</li></ul>
<p class="maodian"><a name="_lab2_1_3"></a></p><h3>2. 核心步骤：创建自定义渲染器（createRenderer）</h3>
<div class="jb51code"><pre class="brush:js;">const renderer = createRenderer({ /* 渲染配置对象 */ });
</pre></div>
<p><code>createRenderer</code> 接收一个<strong>配置对象</strong>作为唯一参数，这个对象必须实现 6 个核心方法，它们是渲染器与「目标平台」的交互桥梁，负责将 VNode 转换为目标平台的真实节点（这里是浏览器 DOM）。</p>
<p class="maodian"><a name="_label3_1_3_0"></a></p><h4>6 个核心渲染方法详解（DOM 平台）</h4>
<table><thead><tr><th>方法名</th><th>核心作用</th><th>入参说明</th></tr></thead><tbody><tr><td>createElement</td><td>创建元素节点</td><td>tag：标签名（如 'div'、'p'），返回创建好的 DOM 元素</td></tr><tr><td>patchProp</td><td>更新元素属性</td><td>el：真实 DOM 元素、key：属性名、prevValue：旧属性值、nextValue：新属性值</td></tr><tr><td>insert</td><td>插入元素</td><td>el：要插入的 DOM 元素、parent：父 DOM 元素、anchor：插入参考节点（null 则插入末尾）</td></tr><tr><td>remove</td><td>移除元素</td><td>el：要移除的 DOM 元素</td></tr><tr><td>createText</td><td>创建文本节点</td><td>text：文本内容，返回创建好的 DOM 文本节点</td></tr><tr><td>setText</td><td>更新文本节点</td><td>node：真实 DOM 文本节点、text：新的文本内容</td></tr></tbody></table>
<p class="maodian"><a name="_label3_1_3_1"></a></p><h4>关键亮点：patchProp支持事件绑定</h4>
<p>本次改造的核心是 <code>patchProp</code> 方法，它不仅能处理 <code>title</code> 这类普通属性，还能识别 <code>onClick</code> 这类事件属性，实现 DOM 事件的绑定与移除：</p>
<ul><li>先判断属性是否为 <code>onXXX</code> 格式的事件；</li><li>提取原生事件名（<code>onClick</code> → <code>click</code>）；</li><li>遵循「先清后绑」原则，避免重复绑定导致多次触发。</li></ul>
<p class="maodian"><a name="_lab2_1_4"></a></p><h3>3. 新增亮点：虚拟节点更新案例（核心解析）</h3>
<p>自定义渲染器如何处理 VNode 更新，这也是 Vue 响应式更新的底层缩影：</p>
<div class="jb51code"><pre class="brush:js;">// 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);
</pre></div>
<p class="maodian"><a name="_label3_1_4_2"></a></p><h4>这段代码的核心逻辑：</h4>
<ol><li><strong>初始渲染</strong>：调用 <code>renderer.render(vnode1, app)</code>，渲染器将 <code>vnode1</code> 转换为真实 DOM，插入到挂载容器中，完成首次渲染；</li><li><strong>延迟更新</strong>：1 秒后调用 <code>renderer.render(vnode2, app)</code>，渲染器会自动对比 <code>vnode1</code> 和 <code>vnode2</code> 的差异（属性、文本内容）；</li><li><strong>差异更新</strong>：<ul><li>对于 <code>title</code> 属性：触发 <code>patchProp</code> 方法，将旧值「初始节点」更新为新值「更新后节点（带点击事件）」；</li><li>对于 <code>onClick</code> 事件：触发 <code>patchProp</code> 方法，绑定新的点击事件回调；</li><li>对于文本内容：触发 <code>setText</code> 方法，将「Hello initial vnode」更新为「hello world」；</li></ul></li><li><strong>无全量重建</strong>：整个更新过程没有删除旧 DOM 再创建新 DOM，而是只更新有差异的部分，这也是 Vue 渲染高效的核心原因。</li></ol>
<p class="maodian"><a name="_lab2_1_5"></a></p><h3>4. 挂载应用的两种方式</h3>
<p>案例使用 <code>renderer.render(vnode, container)</code> 直接渲染 VNode，除此之外，也可以通过 <code>renderer.createApp(component).mount(container)</code> 挂载组件，两种方式均有效：</p>
<ul><li>直接渲染 VNode：更灵活，适合手动控制渲染流程（如本次的延迟更新案例）；</li><li>通过 <code>createApp</code> 挂载：更贴近日常 Vue 开发，适合组件化开发场景。</li></ul>
<p class="maodian"><a name="_label2"></a></p><h2>三、深入理解：自定义渲染器的工作流程</h2>
<p>整个渲染与更新过程可以总结为 4 个核心步骤，形成一个完整的闭环：</p>
<ol><li><strong>生成 VNode</strong>：通过 <code>h</code> 函数创建标准 VNode，提供渲染的数据源；</li><li><strong>首次渲染</strong>：渲染器调用 6 个核心方法，将 VNode 转换为真实节点，插入到挂载容器中；</li><li><strong>VNode 对比</strong>：更新时，渲染器对比新旧 VNode，找出属性、文本等差异；</li><li><strong>差异更新</strong>：针对差异部分，调用对应的 <code>patchProp</code>、<code>setText</code> 等方法，更新真实节点，无需全量重建。</li></ol>
頁:
[1]