共计 7260 个字符，预计需要花费 19 分钟才能阅读完成。
通过对 Vue2.0 源码阅读，想写一写自己的理解，能力有限故从尤大佬 2016.4.11 第一次提交开始读，准备陆续写：
模版字符串转 AST 语法树
AST 语法树转 render 函数
Vue 双向绑定原理
Vue 虚拟 dom 比较原理
其中包含自己的理解和源码的分析，尽量通俗易懂！由于是 2.0 的最早提交，所以和最新版本有很多差异、bug，后续将陆续补充，敬请谅解！包含中文注释的 Vue 源码已上传 …
开始
先说一下为什么会有虚拟 dom 比较这一阶段，我们知道了 Vue 是数据驱动视图（数据的变化将引起视图的变化），但你发现某个数据改变时，视图是局部刷新而不是整个重新渲染，如何精准的找到数据对应的视图并进行更新呢？那就需要拿到数据改变前后的 dom 结构，找到差异点并进行更新！
虚拟 dom 实质上是针对真实 dom 提炼出的简单对象。就像一个简单的 div 包含 200 多个属性，但真正需要的可能只有 tagName，所以对真实 dom 直接操作将大大影响性能！
简化后的虚拟节点（vnode）大致包含以下属性：
{
tag: ‘div’, // 标签名
data: {}, // 属性数据，包括 class、style、event、props、attrs 等
children: [], // 子节点数组，也是 vnode 结构
text: undefined, // 文本
elm: undefined, // 真实 dom
key: undefined // 节点标识
}
虚拟 dom 的比较，就是找出新节点（vnode）和旧节点（oldVnode）之间的差异，然后对差异进行打补丁（patch）。大致流程如下
整个过程还是比较简单的，新旧节点如果不相似，直接根据新节点创建 dom；如果相似，先是对 data 比较，包括 class、style、event、props、attrs 等，有不同就调用对应的 update 函数，然后是对子节点的比较，子节点的比较用到了 diff 算法，这应该是这篇文章的重点和难点吧。
值得注意的是，在 Children Compare 过程中，如果找到了相似的 childVnode，那它们将递归进入新的打补丁过程。
源码解析
这次的源码解析写简洁一点，写太多发现自己都不愿意看 (┬_┬)
开始
先来看 patch() 函数：
function patch (oldVnode, vnode) {
var elm, parent;
if (sameVnode(oldVnode, vnode)) {
// 相似就去打补丁（增删改）
patchVnode(oldVnode, vnode);
} else {
// 不相似就整个覆盖
elm = oldVnode.elm;
parent = api.parentNode(elm);
createElm(vnode);
if (parent !== null) {
api.insertBefore(parent, vnode.elm, api.nextSibling(elm));
removeVnodes(parent, [oldVnode], 0, 0);
}
}
return vnode.elm;
}
patch() 函数接收新旧 vnode 两个参数，传入的这两个参数有个很大的区别：oldVnode 的 elm 指向真实 dom，而 vnode 的 elm 为 undefined… 但经过 patch() 方法后，vnode 的 elm 也将指向这个（更新过的）真实 dom。
判断新旧 vnode 是否相似的 sameVnode() 方法很简单，就是比较 tag 和 key 是否一致。
function sameVnode (a, b) {
return a.key === b.key && a.tag === b.tag;
}
打补丁
对于新旧 vnode 不一致的处理方法很简单，就是根据 vnode 创建真实 dom，代替 oldVnode 中的 elm 插入 DOM 文档。
对于新旧 vnode 一致的处理，就是我们前面经常说到的打补丁了。具体什么是打补丁？看看 patchVnode() 方法就知道了：
function patchVnode (oldVnode, vnode) {
// 新节点引用旧节点的 dom
let elm = vnode.elm = oldVnode.elm;
const oldCh = oldVnode.children;
const ch = vnode.children;
// 调用 update 钩子
if (vnode.data) {
updateAttrs(oldVnode, vnode);
updateClass(oldVnode, vnode);
updateEventListeners(oldVnode, vnode);
updateProps(oldVnode, vnode);
updateStyle(oldVnode, vnode);
}
// 判断是否为文本节点
if (vnode.text == undefined) {
if (isDef(oldCh) && isDef(ch)) {
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue)
} else if (isDef(ch)) {
if (isDef(oldVnode.text)) api.setTextContent(elm, ”)
addVnodes(elm, null, ch, 0, ch.length – 1, insertedVnodeQueue)
} else if (isDef(oldCh)) {
removeVnodes(elm, oldCh, 0, oldCh.length – 1)
} else if (isDef(oldVnode.text)) {
api.setTextContent(elm, ”)
}
} else if (oldVnode.text !== vnode.text) {
api.setTextContent(elm, vnode.text)
}
}
打补丁其实就是调用各种 updateXXX() 函数，更新真实 dom 的各个属性。每个的 update 函数都类似，就拿 updateAttrs() 举例看看：
function updateAttrs (oldVnode, vnode) {
let key, cur, old
const elm = vnode.elm
const oldAttrs = oldVnode.data.attrs || {}
const attrs = vnode.data.attrs || {}
// 更新 / 添加属性
for (key in attrs) {
cur = attrs[key]
old = oldAttrs[key]
if (old !== cur) {
if (booleanAttrsDict[key] && cur == null) {
elm.removeAttribute(key)
} else {
elm.setAttribute(key, cur)
}
}
}
// 删除新节点不存在的属性
for (key in oldAttrs) {
if (!(key in attrs)) {
elm.removeAttribute(key)
}
}
}
属性（Attribute）的更新函数的大致思路就是：
遍历 vnode 属性，如果和 oldVnode 不一样就调用 setAttribute() 修改；
遍历 oldVnode 属性，如果不在 vnode 属性中就调用 removeAttribute() 删除。
你会发现里面有个 booleanAttrsDict[key] 的判断，是用于判断在不在布尔类型属性字典中。
[‘allowfullscreen’, ‘async’, ‘autofocus’, ‘autoplay’, ‘checked’, ‘compact’, ‘controls’, ‘declare’, ……]eg: <video autoplay></video>，想关闭自动播放，需要移除该属性。
所有数据比较完后，就到子节点的比较了。先判断当前 vnode 是否为文本节点，如果是文本节点就不用考虑子节点的比较；若是元素节点，就需要分三种情况考虑：
新旧节点都有 children，那就进入子节点的比较（diff 算法）；
新节点有 children，旧节点没有，那就循环创建 dom 节点；
新节点没有 children，旧节点有，那就循环删除 dom 节点。
后面两种情况都比较简单，我们直接对第一种情况，子节点的比较进行分析。
diff 算法
子节点比较这部分代码比较多，先说说原理后面再贴代码。先看一张子节点比较的图：
图中的 oldCh 和 newCh 分别表示新旧子节点数组，它们都有自己的头尾指针 oldStartIdx，oldEndIdx，newStartIdx，newEndIdx，数组里面存储的是 vnode，为了容易理解就用 a,b,c,d 等代替，它们表示不同类型标签（div,span,p）的 vnode 对象。
子节点的比较实质上就是循环进行头尾节点比较。循环结束的标志就是：旧子节点数组或新子节点数组遍历完，（即 oldStartIdx > oldEndIdx || newStartIdx > newEndIdx）。大概看一下循环流程：
第一步 头头比较。若相似，旧头新头指针后移（即 oldStartIdx++ && newStartIdx++），真实 dom 不变，进入下一次循环；不相似，进入第二步。
第二步 尾尾比较。若相似，旧尾新尾指针前移（即 oldEndIdx– && newEndIdx–），真实 dom 不变，进入下一次循环；不相似，进入第三步。
第三步 头尾比较。若相似，旧头指针后移，新尾指针前移（即 oldStartIdx++ && newEndIdx–），未确认 dom 序列中的头移到尾，进入下一次循环；不相似，进入第四步。
第四步 尾头比较。若相似，旧尾指针前移，新头指针后移（即 oldEndIdx– && newStartIdx++），未确认 dom 序列中的尾移到头，进入下一次循环；不相似，进入第五步。
第五步 若节点有 key 且在旧子节点数组中找到 sameVnode（tag 和 key 都一致），则将其 dom 移动到当前真实 dom 序列的头部，新头指针后移（即 newStartIdx++）；否则，vnode 对应的 dom（vnode[newStartIdx].elm）插入当前真实 dom 序列的头部，新头指针后移（即 newStartIdx++）。
先看看没有 key 的情况，放个动图看得更清楚些！相信看完图片有更好的理解到 diff 算法的精髓，整个过程还是比较简单的。上图中一共进入了 6 次循环，涉及了每一种情况，逐个叙述一下：
第一次是头头相似（都是 a），dom 不改变，新旧头指针均后移。a 节点确认后，真实 dom 序列为：a,b,c,d,e,f，未确认 dom 序列为：b,c,d,e,f；
第二次是尾尾相似（都是 f），dom 不改变，新旧尾指针均前移。f 节点确认后，真实 dom 序列为：a,b,c,d,e,f，未确认 dom 序列为：b,c,d,e；
第三次是头尾相似（都是 b），当前剩余真实 dom 序列中的头移到尾，旧头指针后移，新尾指针前移。b 节点确认后，真实 dom 序列为：a,c,d,e,b,f，未确认 dom 序列为：c,d,e；
第四次是尾头相似（都是 e），当前剩余真实 dom 序列中的尾移到头，旧尾指针前移，新头指针后移。e 节点确认后，真实 dom 序列为：a,e,c,d,b,f，未确认 dom 序列为：c,d；
第五次是均不相似，直接插入到未确认 dom 序列头部。g 节点插入后，真实 dom 序列为：a,e,g,c,d,b,f，未确认 dom 序列为：c,d；
第六次是均不相似，直接插入到未确认 dom 序列头部。h 节点插入后，真实 dom 序列为：a,e,g,h,c,d,b,f，未确认 dom 序列为：c,d；
但结束循环后，有两种情况需要考虑：
新的字节点数组（newCh）被遍历完（newStartIdx > newEndIdx）。那就需要把多余的旧 dom（oldStartIdx -> oldEndIdx）都删除，上述例子中就是 c,d；
新的字节点数组（oldCh）被遍历完（oldStartIdx > oldEndIdx）。那就需要把多余的新 dom（newStartIdx -> newEndIdx）都添加。
上面说了这么多都是没有 key 的情况，说添加了:key 可以优化 v -for 的性能，到底是怎么回事呢？因为 v -for 大部分情况下生成的都是相同 tag 的标签，如果没有 key 标识，那么相当于每次头头比较都能成功。你想想如果你往 v -for 绑定的数组头部 push 数据，那么整个 dom 将全部刷新一遍（如果数组每项内容都不一样），那加了 key 会有什么帮助呢？这边引用一张图：
有 key 的情况，其实就是多了一步匹配查找的过程。也就是上面循环流程中的第五步，会尝试去旧子节点数组中找到与当前新子节点相似的节点，减少 dom 的操作！
有兴趣的可以看看代码：
function updateChildren (parentElm, oldCh, newCh) {
let oldStartIdx = 0
let newStartIdx = 0
let oldEndIdx = oldCh.length – 1
let oldStartVnode = oldCh[0]
let oldEndVnode = oldCh[oldEndIdx]
let newEndIdx = newCh.length – 1
let newStartVnode = newCh[0]
let newEndVnode = newCh[newEndIdx]
let oldKeyToIdx, idxInOld, elmToMove, before
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (isUndef(oldStartVnode)) {
oldStartVnode = oldCh[++oldStartIdx] // 未定义表示被移动过
} else if (isUndef(oldEndVnode)) {
oldEndVnode = oldCh[–oldEndIdx]
} else if (sameVnode(oldStartVnode, newStartVnode)) {// 头头相似
patchVnode(oldStartVnode, newStartVnode)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
} else if (sameVnode(oldEndVnode, newEndVnode)) {// 尾尾相似
patchVnode(oldEndVnode, newEndVnode)
oldEndVnode = oldCh[–oldEndIdx]
newEndVnode = newCh[–newEndIdx]
} else if (sameVnode(oldStartVnode, newEndVnode)) {// 头尾相似
patchVnode(oldStartVnode, newEndVnode)
api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm))
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[–newEndIdx]
} else if (sameVnode(oldEndVnode, newStartVnode)) {// 尾头相似
patchVnode(oldEndVnode, newStartVnode)
api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
oldEndVnode = oldCh[–oldEndIdx]
newStartVnode = newCh[++newStartIdx]
} else {
// 根据旧子节点的 key，生成 map 映射
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
// 在旧子节点数组中，找到和 newStartVnode 相似节点的下标
idxInOld = oldKeyToIdx[newStartVnode.key]
if (isUndef(idxInOld)) {
// 没有 key，创建并插入 dom
api.insertBefore(parentElm, createElm(newStartVnode), oldStartVnode.elm)
newStartVnode = newCh[++newStartIdx]
} else {
// 有 key，找到对应 dom，移动该 dom 并在 oldCh 中置为 undefined
elmToMove = oldCh[idxInOld]
patchVnode(elmToMove, newStartVnode)
oldCh[idxInOld] = undefined
api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm)
newStartVnode = newCh[++newStartIdx]
}
}
}
// 循环结束时，删除 / 添加多余 dom
if (oldStartIdx > oldEndIdx) {
before = isUndef(newCh[newEndIdx+1]) ? null : newCh[newEndIdx + 1].elm
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
} else if (newStartIdx > newEndIdx) {
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
}
}
最后
希望看完这篇对虚拟 dom 的比较会有一定的了解！如果有什么错误记得悄悄告诉我啊哈哈。
文笔还是不好，希望大家能理解 o(︶︿︶)o
4 篇文章写了两个月 …… 真是佩服自己的执行力！但发现写博客好像确实挺费时的 (┬_┬)，不过以后一定会经常写，先两周一篇？????