虚拟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

• h(‘<标签名>’, {…属性…}, […子元素…])
• h(‘<标签名>’, {…属性…}, ‘….’)
• patch(container, vnode)
• patch(vnode, newVnode)

# 四、介绍一下 diff 算法

# 4.1 vdom 为何使用 diff 算法

• DOM 操作是“昂贵”的，因此尽量减少 DOM 操作
• 找出本次 DOM 必须更新的节点来更新，其他的不更新
• 这个“找出”的过程，就需要 diff 算法

patch(container, vnode)

演示过程

# 4.2 diff 实现过程

• patch(container, vnode) 和 patch(vnode, newVnode)
• createElment
• updateChildren