Vue2.0-diff算法

vue2.0-diff算法

vue2.0加入了virtual dom，虚拟dom对应真实dom节点（使用document.CreateElement和document.CreateTextNode创建的节点。）虚拟dom为解决每次更改都会重新生成新元素，对性能造成浪费应运而生。 通俗理解virtual dom，用一个简单的对象去替代复杂的dom对象。

// body下的 <div id="v" class="classA"><div> 对应的 oldVnode 就是
{
  el:  div  //对真实的节点的引用，本例中就是document.querySelector('#id.classA')
  tagName: 'DIV',   //节点的标签
  sel: 'div#v.classA'  //节点的选择器
  data: null,     // 一个存储节点属性的对象，对应节点的el[prop]属性，例如onclick , style
  children: [], //存储子节点的数组，每个子节点也是vnode结构
  text: null,    //如果是文本节点，对应文本节点的textContent，否则为null
}

diff算法

diff的过程，就是调用patch函数，像打补丁一样修改真实dom。通过比较新旧两个虚拟节点，进行对应的操作。

1. 通过key和节点选择器对新旧dom进行比较，如果不同新节点直接把老节点整个替换掉；
2. 如果是相似节点，先比较引用是否一致，一致则说明没有变化，直接返回；
3. 再比较文本节点，需要修改，则调用Node.textContent = vnode.text；
4. 再比较两个子节点，若只有新节点有子节点，则通过createEle创建新的子节点，若只有旧节点有子节点，则直接删除老节点，若新旧节点都有子节点，且不一样，调用updateChildren更新。

function patch (oldVnode, vnode) {
    if (sameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode)
    } else {
    	//不是相似节点，新节点直接把老节点整个替换。
        const oEl = oldVnode.el   //取到旧节点的真实dom
        let parentEle = api.parentNode(oEl)  //取到旧节点的父节点，真实dom
        createEle(vnode)	//创建新的真实dom，令新节点的el = 真实dom
        if (parentEle !== null) {  //移除旧节点，插入新节点
            api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
            api.removeChild(parentEle, oldVnode.el)
            oldVnode = null
        }
    }
    return vnode
}
//sameVnode函数 是看新旧节点的key和sel是否相同，相同才会继续比较，不同则会执行else中的插入移除等操作
function sameVnode(oldVnode, vnode){
    return vnode.key === oldVnode.key && vnode.sel === oldVnode.sel
}
//是相似节点
patchVnode (oldVnode, vnode) {
    const el = vnode.el = oldVnode.el  //让vnode.el引用到现在的真实dom，当el修改时，vnode.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)  //文本节点比较，需要修改，则调用Node.textContent = vnode.text
    }else {
        updateEle(el, vnode, oldVnode)
        if (oldCh && ch && oldCh !== ch) { //两个节点都有子节点，且不一样，调用updateChildren
            updateChildren(el, oldCh, ch)
        }else if (ch){  //只有新节点有子节点，调用createEle(vnode)，vnode.el已经引用了老的dom节点
            createEle(vnode) //create el's children dom  在老的dom节点上添加子节点
        }else if (oldCh){	//只有老节点有子节点，直接删除老节点。
            api.removeChildren(el)
        }
    }
}

//两个相似节点，都有子节点且不一样时调用
updateChildren (parentElm, oldCh, newCh) {
    let oldStartIdx = 0, 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
    let idxInOld
    let elmToMove
    let before
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
            if (oldStartVnode == null) {   //对于vnode.key的比较，会把oldVnode = null
                oldStartVnode = oldCh[++oldStartIdx] 
            }else if (oldEndVnode == null) {
                oldEndVnode = oldCh[--oldEndIdx]
            }else if (newStartVnode == null) {
                newStartVnode = newCh[++newStartIdx]
            }else if (newEndVnode == null) {
                newEndVnode = newCh[--newEndIdx]
            }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.el, api.nextSibling(oldEndVnode.el))
                oldStartVnode = oldCh[++oldStartIdx]
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldEndVnode, newStartVnode)) {
                patchVnode(oldEndVnode, newStartVnode)
                api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el)
                oldEndVnode = oldCh[--oldEndIdx]
                newStartVnode = newCh[++newStartIdx]
            }else {
               // 使用key时的比较
                if (oldKeyToIdx === undefined) {
                    oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表
                }
                idxInOld = oldKeyToIdx[newStartVnode.key]
                if (!idxInOld) {
                    api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    newStartVnode = newCh[++newStartIdx]
                }
                else {
                    elmToMove = oldCh[idxInOld]
                    if (elmToMove.sel !== newStartVnode.sel) {
                        api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    }else {
                        patchVnode(elmToMove, newStartVnode)
                        oldCh[idxInOld] = null
                        api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el)
                    }
                    newStartVnode = newCh[++newStartIdx]
                }
            }
        }
        if (oldStartIdx > oldEndIdx) {
            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el
            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
        }else if (newStartIdx > newEndIdx) {
            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
        }
}
//oldCh和newCh 各有两个头尾的变量StartIdx和EndIdx，他们的两个变量相互比较。一共有四种比较方式，如果四种都没匹配且设置了key，就会用key进行比较。在比较过程中，变量会往中间靠，一旦startIdx>endIdx，表明新旧子节点（oldCh和newCh）至少有一个遍历完了，就会结束比较。
//不设key，新旧子节点只会进行头尾两端的相互比较，设key后，除了头尾两端外，还会从用key生成的对象oldKeyToIdx中查找匹配的节点，所以为节点设置key可以更高效的利用dom。