一、渲染器与响应系统的结合
渲染器的核心任务是将虚拟 DOM 渲染为特定平台的真实元素，例如浏览器中的真实 DOM。在 Vue.js 中，渲染器与响应系统的结合让页面能够随着数据的变化自动更新。我们先来看一个简单的例子：
const { effect, ref } = VueReactivity
function renderer(domString, container) {
container.innerHTML = domString
}
const count = ref(1)
effect(() => {
renderer(`<h1>${count.value}</h1>`, document.getElementById('app'))
})
count.value++
在这段代码中，我们使用了 @vue/reactivity 提供的 ref 和 effect API。ref 创建了一个响应式数据 count，而 effect 定义了一个副作用函数。当 count.value 发生变化时，effect 会自动重新运行，调用 renderer 函数重新渲染页面，最终将 <h1>2</h1> 渲染到容器中。
为什么需要响应系统？
响应系统让渲染过程自动化。渲染器本身只负责将内容渲染到页面，而响应系统则负责在数据变化时触发渲染器的重新执行。这种解耦设计让渲染器的实现与数据更新机制无关，极大地提高了代码的可维护性和灵活性。
这个简单的例子虽然使用了 innerHTML 来实现渲染，但它揭示了渲染器与响应系统协作的核心思想：数据驱动视图。接下来，我们将深入探讨渲染器的基本概念和实现细节。
二、渲染器的基本概念
要理解渲染器的实现，我们需要先搞清楚几个关键术语：
- 渲染器（Renderer）：负责将虚拟 DOM（vnode）渲染为特定平台的真实元素。在浏览器中，它将虚拟 DOM 渲染为真实 DOM；在其他平台（如小程序或 Canvas），可以通过自定义渲染逻辑实现跨平台支持。
- 虚拟 DOM（Virtual DOM 或 VNode）：虚拟 DOM 是一个树形结构，描述了真实 DOM 的结构。每个节点（vnode）可以表示一个元素、文本或其他内容。
- 挂载（Mount）：将虚拟 DOM 渲染为真实 DOM 并添加到容器（container）中的过程。
- 打补丁（Patch）：当新旧虚拟 DOM 存在时，比较它们的差异，仅更新变化的部分以提升性能。
- 容器（Container）：渲染器将虚拟 DOM 渲染到的目标位置，通常是一个 DOM 元素。
渲染器的基本结构
一个基本的渲染器可以通过 createRenderer 函数创建：
function createRenderer() {
function render(vnode, container) {
if (vnode) {
patch(container._vnode, vnode, container)
} else {
if (container._vnode) {
container.innerHTML = ''
}
}
container._vnode = vnode
}
function patch(n1, n2, container) {
// 渲染逻辑，后续实现
}
return { render }
}
在这段代码中：
createRenderer 创建一个渲染器，返回包含 render 函数的对象。render 函数接收虚拟 DOM（vnode）和容器（container），并调用 patch 函数执行渲染。patch 函数是渲染的核心，它处理挂载和更新逻辑。- 容器通过
container._vnode 存储上一次渲染的虚拟 DOM，以便在下一次渲染时进行比较。
挂载与打补丁
渲染器需要处理两种情况：
- 首次渲染（挂载）：当
container._vnode 不存在时，直接将新的虚拟 DOM 渲染到容器中。
- 更新（打补丁）：当
container._vnode 存在时，比较新旧虚拟 DOM，更新差异部分。
例如：
const renderer = createRenderer()
const vnode1 = { type: 'h1', children: 'Hello' }
const vnode2 = { type: 'h1', children: 'Hello World' }
renderer.render(vnode1, document.querySelector('#app')) // 首次渲染
renderer.render(vnode2, document.querySelector('#app')) // 更新
renderer.render(null, document.querySelector('#app')) // 清空
在首次渲染时，patch 函数会执行挂载操作；在第二次渲染时，会比较 vnode1 和 vnode2，仅更新文本内容；在第三次渲染时，清空容器。
三、实现一个简单的渲染器
让我们实现一个简单的渲染器，专注于挂载普通标签元素。我们从一个虚拟 DOM 对象开始：
const vnode = {
type: 'h1',
children: 'hello'
}
挂载逻辑
我们需要在 createRenderer 中实现 patch 和 mountElement 函数：
function createRenderer() {
function patch(n1, n2, container) {
if (!n1) {
mountElement(n2, container)
} else {
// 打补丁逻辑，后续实现
}
}
function mountElement(vnode, container) {
const el = document.createElement(vnode.type)
if (typeof vnode.children === 'string') {
el.textContent = vnode.children
}
container.appendChild(el)
}
function render(vnode, container) {
if (vnode) {
patch(container._vnode, vnode, container)
} else {
if (container._vnode) {
container.innerHTML = ''
}
}
container._vnode = vnode
}
return { render }
}
这段代码的核心逻辑：
mountElement 创建 DOM 元素，设置文本内容，并将其添加到容器中。patch 根据是否存在旧虚拟 DOM（n1）决定是挂载还是更新。render 负责调用 patch 并管理 container._vnode。
使用方式如下：
const renderer = createRenderer()
const vnode = { type: 'h1', children: 'hello' }
renderer.render(vnode, document.querySelector('#app'))
运行后，页面将显示 <h1>hello</h1>。
存在的问题
上述代码直接使用了浏览器特有的 API（如 document.createElement 和 appendChild），这限制了渲染器的跨平台能力。为了解决这个问题，我们需要设计一个通用的渲染器。
四、设计自定义渲染器
为了让渲染器支持跨平台，我们需要将浏览器特有的 API 抽象为可配置的接口。通过将操作 DOM 的逻辑提取为配置项，渲染器核心代码可以不依赖特定平台。
重构渲染器
我们为 createRenderer 添加配置参数：
function createRenderer(options) {
const { createElement, setElementText, insert } = options
function mountElement(vnode, container) {
const el = createElement(vnode.type)
if (typeof vnode.children === 'string') {
setElementText(el, vnode.children)
}
insert(el, container)
}
function patch(n1, n2, container) {
if (!n1) {
mountElement(n2, container)
} else {
// 打补丁逻辑
}
}
function render(vnode, container) {
if (vnode) {
patch(container._vnode, vnode, container)
} else {
if (container._vnode) {
container.innerHTML = '' // 临时清空方式
}
}
container._vnode = vnode
}
return { render }
}
在创建渲染器时，传入操作 DOM 的配置：
const renderer = createRenderer({
createElement(tag) {
return document.createElement(tag)
},
setElementText(el, text) {
el.textContent = text
},
insert(el, parent, anchor = null) {
parent.appendChild(el)
}
})
现在，mountElement 使用配置项中的 createElement、setElementText 和 insert 函数，不直接依赖浏览器 API。
跨平台示例
为了验证跨平台能力，我们实现一个非浏览器的自定义渲染器，仅打印操作日志：
const renderer = createRenderer({
createElement(tag) {
console.log(`创建元素 ${tag}`)
return { tag }
},
setElementText(el, text) {
console.log(`设置 ${JSON.stringify(el)} 的文本内容：${text}`)
el.textContent = text
},
insert(el, parent, anchor = null) {
console.log(`将 ${JSON.stringify(el)} 添加到 ${JSON.stringify(parent)} 下`)
parent.children = el
}
})
const vnode = { type: 'h1', children: 'hello' }
const container = { type: 'root' }
renderer.render(vnode, container)
运行结果将打印：
创建元素 h1
设置 {"tag":"h1"} 的文本内容：hello
将 {"tag":"h1","textContent":"hello"} 添加到 {"type":"root"} 下
这个渲染器不依赖浏览器 API，可以在 Node.js 或其他环境中运行，展示了跨平台的能力。
五、性能优化与 Vue.js 3 的创新
Vue.js 3 的渲染器在性能上进行了重大优化，核心在于其快速路径更新机制。传统的 Diff 算法会逐一比较新旧虚拟 DOM 节点的差异，而 Vue.js 3 利用编译器的信息，识别出哪些节点是静态的，哪些是动态的，从而跳过不必要的比较，直接更新动态部分。
例如，在一个包含大量静态内容的模板中，编译器会标记静态节点，渲染器在更新时只处理动态节点，大幅提升了性能。这种设计让 Vue.js 3 在更新效率上优于许多其他框架。