⚡ 30 秒速记

• 核心判断：虚拟节点是对界面结构的描述，渲染器通过挂载与更新把声明式描述映射为宿主环境操作
• 原理主线：围绕 「一、什么是 vdom」、「二、设计一个需求场景」、「三、vdom 的如何应用，核心 API 」 建立输入、状态变化与输出之间的因果关系
• 文章范围：介绍了虚拟DOM（vdom）的概念、作用及其在前端开发中的应用场景，分析了传统DOM操作的性能瓶颈，并通过对比jQuery实现与vdom方案，讲解了vdom的核心API及其如何提升页面渲染效率，适合前端开发者深入理解虚拟DOM原理。
• 边界与代价：key、节点类型和稳定序列决定复用边界；虚拟 DOM 解决可预测更新，不保证永远比手写 DOM 快
• 工程落地：性能分析要看实际提交次数、节点移动和组件边界，不能只用“减少 DOM 操作”解释

虚拟 DOM 本质上是用 JavaScript 对象描述界面结构，再由渲染器把结构变化映射到真实 DOM。 首次渲染时，h 生成虚拟节点，patch(container, vnode) 完成挂载；数据变化后，再用新旧虚拟节点执行 patch(vnode, newVnode)。这样可以通过 diff 找出必须更新的节点，避免每次变化都把整棵真实 DOM 推倒重建。它仍然需要计算和最终的宿主操作，所以价值在于减少无效更新，并不等于完全没有性能成本。

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

版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。

一、什么是 vdom

• 用 JS 模拟 DOM 结构
• DOM 变化的对比，放在 JS 层来做
• 提高重绘性能

二、设计一个需求场景

用jQuery实现

遇到的问题

• DOM 操作是“昂贵”的，js 运行效率高
• 尽量减少 DOM 操作，而不是“推倒重来”
• 项目越复杂，影响就越严重
• vdom 即可解决这个问题

三、vdom 的如何应用，核心 API 是什么

什么是 vdom

介绍 snabbdom

介绍 snabbdom - h 函数

介绍 snabbdom - patch 函数

重做jQuery的demo

• 使用 data生成 vnode
• 第一次渲染，将 vnode 渲染到 #container中
• 并将 vnode 缓存下来
• 修改 data 之后，用新 data 生成 newVnode
• 将 vnode 和 newVnode 对比

核心 API