sameVnode

function sameVnode(vnode1, vnode2) {
    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
}

用來比較兩個vnode是否相似。
如果新舊vnode的key和sel都相同，說明兩個vnode相似，我們就可以保留舊的vnode節(jié)點，再具體去比較其差異性，在舊的vnode上進行"打補丁",否則直接替換節(jié)點。這里需要說的是如果不定義key值，則這個值就為undefined，undefined===undefined //true，所以平時在用vue的時候，在沒有用v-for渲染的組件的條件下，是不需要定義key值的，不會影響其比較。

createElm
創(chuàng)建vnode對應(yīng)的真實dom，并將其賦值給vnode.elm，后續(xù)對于dom的修改都是在這個值上進行

    //將vnode創(chuàng)建為真實dom
    function createElm(vnode, insertedVnodeQueue) {
        var i, data = vnode.data;
        if (isDef(data)) {
            //當(dāng)節(jié)點上存在hook而且hook中有beforeCreate鉤子時，先調(diào)用beforeCreate回調(diào)，對剛創(chuàng)建的vnode進行處理
            if (isDef(i = data.hook) && isDef(i = i.beforeCreate)) {
                i(vnode);
                //獲取beforeCreate鉤子修改后的數(shù)據(jù)
                data = vnode.data;
            }
        }
        var elm, children = vnode.children,
            sel = vnode.sel;
        if (isDef(sel)) {
            //解析sel參數(shù)，例如div#divId.divClass  ==>id="divId"  class="divClass"
            var hashIdx = sel.indexOf("#");
            //先id后class
            var dotIdx = sel.indexOf(".", hashIdx);
            var hash = hashIdx > 0 ? hashIdx : sel.length;
            var dot = dotIdx > 0 ? dotIdx : sel.length;
            var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;
            //創(chuàng)建一個DOM節(jié)點引用，并對其屬性實例化
            elm = vnode.elm = isDef(data) && isDef(i = data.ns) ? api.createElementNS(i, tag) : api.createElement(tag);
            //獲取id名 #a --> a
            if (hash < dot) elm.id = sel.slice(hash + 1, dot);
            //獲取類名，并格式化  .a.b --> a b
            if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/./g, " ");
            //如果存在子元素Vnode節(jié)點，則遞歸將子元素節(jié)點插入到當(dāng)前Vnode節(jié)點中，并將已插入的子元素節(jié)點在insertedVnodeQueue中作記錄
            if (is.array(children)) {
                for (i = 0; i < children.length; ++i) {
                    api.appendChild(elm, createElm(children[i], insertedVnodeQueue));
                }
            } else if (is.primitive(vnode.text)) { //如果存在子文本節(jié)點，則直接將其插入到當(dāng)前Vnode節(jié)點
                api.appendChild(elm, api.createTextNode(vnode.text));
            }
            //當(dāng)創(chuàng)建完畢后，觸發(fā)全局create鉤子回調(diào)
            for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
            i = vnode.data.hook; // Reuse variable
            if (isDef(i)) { //觸發(fā)自身的create鉤子回調(diào)
                if (i.create) i.create(emptyNode, vnode);
                //如果有insert鉤子，則推進insertedVnodeQueue中作記錄，從而實現(xiàn)批量插入觸發(fā)insert回調(diào)
                if (i.insert) insertedVnodeQueue.push(vnode);
            }
        }
        //如果沒聲明選擇器，則說明這個是一個text節(jié)點
        else {
            elm = vnode.elm = api.createTextNode(vnode.text);
        }
        return vnode.elm;
    }

patchVnode

如果兩個vnode相似，則會對具體的vnode進行‘打補丁’的操作

   function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
        var i, hook;
        //在patch之前，先調(diào)用vnode.data的beforePatch鉤子
        if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.beforePatch)) {
            i(oldVnode, vnode);
        }
        var elm = vnode.elm = oldVnode.elm,
            oldCh = oldVnode.children,
            ch = vnode.children;
        //如果oldnode和vnode的引用相同，說明沒發(fā)生任何變化直接返回，避免性能浪費
        if (oldVnode === vnode) return;
        //如果oldvnode和vnode不同，說明vnode有更新
        //如果vnode和oldvnode不相似則直接用vnode引用的DOM節(jié)點去替代oldvnode引用的舊節(jié)點
        if (!sameVnode(oldVnode, vnode)) {
            var parentElm = api.parentNode(oldVnode.elm);
            elm = createElm(vnode, insertedVnodeQueue);
            api.insertBefore(parentElm, elm, oldVnode.elm);
            removeVnodes(parentElm, [oldVnode], 0, 0);
            return;
        }
        //如果vnode和oldvnode相似，那么我們要對oldvnode本身進行更新
        if (isDef(vnode.data)) {
            //首先調(diào)用全局的update鉤子，對vnode.elm本身屬性進行更新
            for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
            //然后調(diào)用vnode.data里面的update鉤子,再次對vnode.elm更新
            i = vnode.data.hook;
            if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
        }
        /*
         分情況討論節(jié)點的更新： new代表新Vnode old代表舊Vnode
         ps:如果自身存在文本節(jié)點，則不存在子節(jié)點 即:有text則不會存在ch，反之亦然

         1 new不為文本節(jié)點
             1.1 new不為文本節(jié)點,new還存在子節(jié)點    
               1.1.1 new不為文本節(jié)點,new還存在子節(jié)點,old有子節(jié)點
               1.1.2 new不為文本節(jié)點,new還存在子節(jié)點,old沒有子節(jié)點
                  1.1.2.1 new不為文本節(jié)點,new還存在子節(jié)點,old沒有子節(jié)點,old為文本節(jié)點

            1.2 new不為文本節(jié)點,new不存在子節(jié)點
              1.2.1 new不為文本節(jié)點,new不存在子節(jié)點,old存在子節(jié)點
              1.2.2 new不為文本節(jié)點,new不存在子節(jié)點,old為文本節(jié)點

         2.new為文本節(jié)點
             2.1 new為文本節(jié)點,并且old與new的文本節(jié)點不相等
             ps：這里只需要討論這一種情況，因為如果old存在子節(jié)點，那么文本節(jié)點text為undefined，則與new的text不相等
             直接node.textContent即可清楚old存在的子節(jié)點。若old存在子節(jié)點，且相等則無需修改
        */
        //1
        if (isUndef(vnode.text)) {
            //1.1.1
            if (isDef(oldCh) && isDef(ch)) {
                //當(dāng)Vnode和oldvnode的子節(jié)點不同時，調(diào)用updatechilren函數(shù)，diff子節(jié)點
                if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
            }
            //1.1.2
            else if (isDef(ch)) {
                //oldvnode是text節(jié)點，則將elm的text清除
                //1.1.2.1
                if (isDef(oldVnode.text)) api.setTextContent(elm, "");
                //并添加vnode的children
                addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
            }
            //如果oldvnode有children，而vnode沒children，則移除elm的children
            //1.2.1
            else if (isDef(oldCh)) {
                removeVnodes(elm, oldCh, 0, oldCh.length - 1);
            }
            //1.2.2
            //如果vnode和oldvnode都沒chidlren，且vnode沒text，則刪除oldvnode的text
            else if (isDef(oldVnode.text)) {
                api.setTextContent(elm, "");
            }
        }
        //如果oldvnode的text和vnode的text不同，則更新為vnode的text，
        //2.1
        else if (oldVnode.text !== vnode.text) {
            api.setTextContent(elm, vnode.text);
        }
        //patch完，觸發(fā)postpatch鉤子
        if (isDef(hook) && isDef(i = hook.postpatch)) {
            i(oldVnode, vnode);
        }
    }

removeVnodes

/*
        這個函數(shù)主要功能是批量刪除DOM節(jié)點，需要配合invokeDestoryHook和createRmCb
        主要步驟如下：
        調(diào)用invokeDestoryHook以觸發(fā)destory回調(diào)
        調(diào)用createRmCb來開始對remove回調(diào)進行計數(shù)
        刪除DOM節(jié)點
     *
     *
     * @param parentElm 父節(jié)點
     * @param vnodes  刪除節(jié)點數(shù)組
     * @param startIdx  刪除起始坐標(biāo)
     * @param endIdx  刪除結(jié)束坐標(biāo)
     */
    function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
        for (; startIdx <= endIdx; ++startIdx) {
            var i, listeners, rm, ch = vnodes[startIdx]; //ch代表子節(jié)點
            if (isDef(ch)) {
                if (isDef(ch.sel)) {
                    //調(diào)用destroy鉤子
                    invokeDestroyHook(ch);
                    //對全局remove鉤子進行計數(shù)
                    listeners = cbs.remove.length + 1;
                    rm = createRmCb(ch.elm, listeners);
                    //調(diào)用全局remove回調(diào)函數(shù)，并每次減少一個remove鉤子計數(shù)
                    for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
                    //調(diào)用內(nèi)部vnode.data.hook中的remove鉤子（只有一個）
                    if (isDef(i = ch.data) && isDef(i = i.hook) && isDef(i = i.remove)) {
                        i(ch, rm);
                    } else {
                        //如果沒有內(nèi)部remove鉤子，需要調(diào)用rm，確保能夠remove節(jié)點
                        rm();
                    }
                } else { // Text node
                    api.removeChild(parentElm, ch.elm);
                }
            }
        }
    }

invokeDestroyHook

/*
    這個函數(shù)用于手動觸發(fā)destory鉤子回調(diào)，主要步驟如下：
    先調(diào)用vnode上的destory
    再調(diào)用全局下的destory
    遞歸調(diào)用子vnode的destory
    */
    function invokeDestroyHook(vnode) {
        var i, j, data = vnode.data;
        if (isDef(data)) {
            if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode); //調(diào)用自身的destroy鉤子
            for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode); //調(diào)用全局destroy鉤子
            if (isDef(i = vnode.children)) {
                for (j = 0; j < vnode.children.length; ++j) {
                    invokeDestroyHook(vnode.children[j]);
                }
            }
        }
    }

addVnodes

//將vnode轉(zhuǎn)換后的dom節(jié)點插入到dom樹的指定位置中去
function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {
    for (; startIdx <= endIdx; ++startIdx) {
        api.insertBefore(parentElm, createElm(vnodes[startIdx], insertedVnodeQueue), before);
    }
}

createRmCb

/*
remove一個vnode時，會觸發(fā)remove鉤子作攔截器，只有在所有remove鉤子
回調(diào)函數(shù)都觸發(fā)完才會將節(jié)點從父節(jié)點刪除，而這個函數(shù)提供的就是對remove鉤子回調(diào)操作的計數(shù)功能
*/
function createRmCb(childElm, listeners) {
    return function() {
        if (--listeners === 0) {
            var parent = api.parentNode(childElm);
            api.removeChild(parent, childElm);
        }
    };
}

還有一個最核心的函數(shù)updateChildren，這個留到下篇文章再說；

我們這邊簡單的總結(jié)一下：
對比渲染的流程大體分為
1.通過sameVnode來判斷兩個vnode是否值得進行比較
2.如果不值得，直接刪除舊的vnode，渲染新的vnode
3.如果值得，調(diào)用模塊鉤子函數(shù)，對其節(jié)點的屬性進行替換，例如style,event等；再判斷節(jié)點子節(jié)點是否為文本節(jié)點，如果為文本節(jié)點則進行更替，如果還存在其他子節(jié)點則調(diào)用updateChildren，對子節(jié)點進行更新，更新流程將會回到第一步，重復(fù)；