Vue diff原理

灵感来源

GitHub - snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance.GitHub

Vitrual DOM与真实DOM

真实DOM

<div>
    <p>123</p>
</div>

Virtual DOM（伪代码)

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

详解

仅在同层比较，不会跨层级比较

流程图

代码部分

patch

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;
}

patch函数主要进行了两个分支流程

判断两节点是否是一样的，如果是则执行 patchVnode
不一样则用 Vnode 替换 oldVnode

patchVnode

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 函数比较子节点，这一步很重要

updateChildern(核心)

我们将它们取出来并分别用 s 和 e 指针指向它们的头 child 和尾 child

现在分别对 oldS、oldE、S、E 两两做 sameVnode 比较，有四种比较方式，当其中两个能匹配上那么真实 dom 中的相应节点会移到 Vnode 相应的位置，这句话有点绕，打个比方

如果是 oldS 和 E 匹配上了，那么真实 dom 中的第一个节点会移到最后
如果是 oldE 和 S 匹配上了，那么真实 dom 中的最后一个节点会移到最前，匹配上的两个指针向中间移动
如果四种匹配没有一对是成功的，分为两种情况
- 如果新旧子节点都存在 key，那么会根据 oldChild 的 key 生成一张 hash 表，用 S 的 key 与 hash 表做匹配，匹配成功就判断 S 和匹配节点是否为 sameNode，如果是，就在真实 dom 中将成功的节点移到最前面，否则，将 S 生成对应的节点插入到 dom 中对应的 oldS 位置，oldS 和 S 指针向中间移动。
- 如果没有 key,则直接将 S 生成新的节点插入真实 DOM（ps：这下可以解释为什么 v-for 的时候需要设置 key 了，如果没有 key 那么就只会做四种匹配，就算指针中间有可复用的节点都不能被复用了）