⚡ 30 秒速记

• 核心判断：虚拟节点是对界面结构的描述，渲染器通过挂载与更新把声明式描述映射为宿主环境操作
• 原理主线：围绕 「自定义渲染器的原理」、「自定义渲染器的应用」、「References」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析Vue自定义渲染器的实现原理，讲解如何通过抽象接口实现跨平台渲染，并介绍异步渲染的机制和应用场景，帮助开发者理解和扩展Vue的渲染能力。
• 边界与代价：key、节点类型和稳定序列决定复用边界；虚拟 DOM 解决可预测更新，不保证永远比手写 DOM 快
• 工程落地：性能分析要看实际提交次数、节点移动和组件边界，不能只用“减少 DOM 操作”解释

自定义渲染器的本质，是把平台相关操作从 mount 和 patch 中抽出来，让核心渲染算法不再直接依赖浏览器 DOM。 createRenderer 通过 nodeOps 接收节点创建、插入、删除和查询能力，再通过 patchData 处理元素自身属性，因此换一套实现就能面向不同宿主环境。Web 端可以把这些接口映射到 createElement、insertBefore 等 API，无 DOM 测试环境也可以用普通对象表示元素。异步渲染还需要调度器决定执行时机，而渲染器负责把组件挂载、卸载、DOM 操作及 ref 等后置工作安排到合适队列。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

在本章之前，我们花费了很大的篇幅全面的讲解了一个普通渲染器的实现原理，它可以将 Virtual DOM 渲染为 Web 平台的真实 DOM。本章我们将在上一章的基础上讲解更加高级的渲染器：自定义渲染器(Custom renderer)以及异步渲染。

自定义渲染器的原理

渲染器是围绕 Virtual DOM 而存在的，在 Web 平台下它能够把 Virtual DOM 渲染为浏览器中的真实 DOM 对象，通过前面几章的讲解，相信你已经能够认识到渲染器的实现原理，为了能够将 Virtual DOM 渲染为真实 DOM，渲染器内部需要调用浏览器提供的 DOM 编程接口，下面罗列了在出上一章中我们曾经使用到的那些浏览器为我们提供的 DOM 编程接口：