vue diff

摘自 https://juejin.cn/post/6844903607913938951

virtual DOM 是将真实的 DOM 的数据抽取出来，以对象的形式模拟树形结构

1
2
3
<div>
    <p>123</p>
</div>

对应的 js

1
2
3
4
var Vnode = {
  tag: "div",
  children: [{ tag: "p", text: "123" }],
};

当数据发生改变时，set 方法会让调用 Dep.notify 通知所有订阅者 Watcher，订阅者就会调用 patch 给真实的 DOM 打补丁，更新相应的视图。

diff流程图

patch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function patch(oldVnode, vnode) {
  // some code
  if (sameVnode(oldVnode, vnode)) {
    patchVnode(oldVnode, vnode);
  } else {
    const oEl = oldVnode.el; // 当前oldVnode对应的真实元素节点
    let parentEle = api.parentNode(oEl); // 父元素
    createEle(vnode); // 根据Vnode生成新元素
    if (parentEle !== null) {
      api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)); // 将新元素添加进父元素
      api.removeChild(parentEle, oldVnode.el); // 移除以前的旧元素节点
      oldVnode = null;
    }
  }
  // some code
  return vnode;
}
  • 判断两节点是否值得比较，值得比较则执行 patchVnode
  • 不值得比较则用 Vnode 替换 oldVnode

isSameVnode

如果两个节点都是一样的，那么就深入检查他们的子节点。如果两个节点不一样那就说明 Vnode 完全被改变了，就可以直接替换 oldVnode。

1
2
3
4
5
6
7
8
9
10
function sameVnode(a, b) {
  return (
    a.key === b.key && // key值
    a.tag === b.tag && // 标签名
    a.isComment === b.isComment && // 是否为注释节点
    // 是否都定义了data，data包含一些具体信息，例如onclick , style
    isDef(a.data) === isDef(b.data) &&
    sameInputType(a, b) // 当标签是<input>的时候，type必须相同
  );
}

patchVnode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
patchVnode (oldVnode, vnode) {
    const el = vnode.el = oldVnode.el
    let i, oldCh = oldVnode.children, ch = vnode.children
    if (oldVnode === vnode) return
    if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
        api.setTextContent(el, vnode.text)
    }else {
        updateEle(el, vnode, oldVnode)
     if (oldCh && ch && oldCh !== ch) {
            updateChildren(el, oldCh, ch)
     }else if (ch){
            createEle(vnode) //create el's children dom
     }else if (oldCh){
            api.removeChildren(el)
     }
    }
}
  • 找到对应的真实dom，称为el
  • 判断Vnode和oldVnode是否指向同一个对象，如果是，那么直接 return
  • 如果他们都有文本节点并且不相等，那么将el的文本节点设置为Vnode的文本节点。
  • 如果oldVnode有子节点而Vnode没有，则删除 el 的子节点
  • 如果oldVnode没有子节点而Vnode有，则将Vnode的子节点真实化之后添加到el
  • 如果两者都有子节点，则执行updateChildren函数比较子节点，这一步很重要

updateChildren

  • 将Vnode的子节点Vch和oldVnode的子节点oldCh提取出来
  • oldCh和vCh各有两个头尾的变量StartIdx和EndIdx，它们的 2 个变量相互比较，一共有 4 种比较方式。如果 4 种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和vCh至少有一个已经遍历完了，就会结束比较。

具体步骤

  • 如果是 oldS 和 E 匹配上了，那么真实 dom 中的第一个节点会移到最后

  • 如果是 oldE 和 S 匹配上了，那么真实 dom 中的最后一个节点会移到最前，匹配上的两个指针向中间移动

  • 如果四种匹配没有一对是成功的，分为两种情况

    • 如果新旧子节点都存在 key，那么会根据 oldChild 的 key 生成一张 hash 表，用 S 的 key 与 hash 表做匹配，匹配成功就判断 S 和匹配节点是否为 sameNode，如果是，就在真实 dom 中将成功的节点移到最前面，否则，将 S 生成对应的节点插入到 dom 中对应的 oldS 位置，S 指针向中间移动，被匹配 old 中的节点置为 null。
    • 如果没有 key,则直接将 S 生成新的节点插入真实 DOM（ps：这下可以解释为什么 v-for 的时候需要设置 key 了，如果没有 key 那么就只会做四种匹配，就算指针中间有可复用的节点都不能被复用了）
  1. OldS 与 S 相等则插入，都往中间移一格。 不相等，则 new 移到对应的 index，往中间移一格
  2. oldS 与 E
  3. oldE 与 E
  4. 计算结束条件 oldS 与 oldE， S 与 E

结束条件

  • oldS > oldE 表示 oldCh 先遍历完，那么就将多余的 vCh 根据 index 添加到 dom 中去（如上图）
  • S > E 表示 vCh 先遍历完，那么就在真实 dom 中将区间为[oldS, oldE]的多余节点删掉