sameVnode

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

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

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

    //將vnode創(chuàng)建為真實(shí)dom
    function createElm(vnode, insertedVnodeQueue) {
        var i, data = vnode.data;
        if (isDef(data)) {
            //當(dāng)節(jié)點(diǎn)上存在hook而且hook中有beforeCreate鉤子時(shí)，先調(diào)用beforeCreate回調(diào)，對(duì)剛創(chuàng)建的vnode進(jìn)行處理
            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)建一個(gè)DOM節(jié)點(diǎn)引用，并對(duì)其屬性實(shí)例化
            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);
            //獲取類(lèi)名，并格式化  .a.b --> a b
            if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/./g, " ");
            //如果存在子元素Vnode節(jié)點(diǎn)，則遞歸將子元素節(jié)點(diǎn)插入到當(dāng)前Vnode節(jié)點(diǎn)中，并將已插入的子元素節(jié)點(diǎn)在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é)點(diǎn)，則直接將其插入到當(dāng)前Vnode節(jié)點(diǎn)
                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鉤子，則推進(jìn)insertedVnodeQueue中作記錄，從而實(shí)現(xiàn)批量插入觸發(fā)insert回調(diào)
                if (i.insert) insertedVnodeQueue.push(vnode);
            }
        }
        //如果沒(méi)聲明選擇器，則說(shuō)明這個(gè)是一個(gè)text節(jié)點(diǎn)
        else {
            elm = vnode.elm = api.createTextNode(vnode.text);
        }
        return vnode.elm;
    }

patchVnode

如果兩個(gè)vnode相似，則會(huì)對(duì)具體的vnode進(jìn)行‘打補(bǔ)丁’的操作

   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的引用相同，說(shuō)明沒(méi)發(fā)生任何變化直接返回，避免性能浪費(fèi)
        if (oldVnode === vnode) return;
        //如果oldvnode和vnode不同，說(shuō)明vnode有更新
        //如果vnode和oldvnode不相似則直接用vnode引用的DOM節(jié)點(diǎn)去替代oldvnode引用的舊節(jié)點(diǎn)
        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相似，那么我們要對(duì)oldvnode本身進(jìn)行更新
        if (isDef(vnode.data)) {
            //首先調(diào)用全局的update鉤子，對(duì)vnode.elm本身屬性進(jìn)行更新
            for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
            //然后調(diào)用vnode.data里面的update鉤子,再次對(duì)vnode.elm更新
            i = vnode.data.hook;
            if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
        }
        /*
         分情況討論節(jié)點(diǎn)的更新： new代表新Vnode old代表舊Vnode
         ps:如果自身存在文本節(jié)點(diǎn)，則不存在子節(jié)點(diǎn) 即:有text則不會(huì)存在ch，反之亦然

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

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

         2.new為文本節(jié)點(diǎn)
             2.1 new為文本節(jié)點(diǎn),并且old與new的文本節(jié)點(diǎn)不相等
             ps：這里只需要討論這一種情況，因?yàn)槿绻鹢ld存在子節(jié)點(diǎn)，那么文本節(jié)點(diǎn)text為undefined，則與new的text不相等
             直接node.textContent即可清楚old存在的子節(jié)點(diǎn)。若old存在子節(jié)點(diǎn)，且相等則無(wú)需修改
        */
        //1
        if (isUndef(vnode.text)) {
            //1.1.1
            if (isDef(oldCh) && isDef(ch)) {
                //當(dāng)Vnode和oldvnode的子節(jié)點(diǎn)不同時(shí)，調(diào)用updatechilren函數(shù)，diff子節(jié)點(diǎn)
                if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
            }
            //1.1.2
            else if (isDef(ch)) {
                //oldvnode是text節(jié)點(diǎn)，則將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沒(méi)children，則移除elm的children
            //1.2.1
            else if (isDef(oldCh)) {
                removeVnodes(elm, oldCh, 0, oldCh.length - 1);
            }
            //1.2.2
            //如果vnode和oldvnode都沒(méi)chidlren，且vnode沒(méi)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

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

invokeDestroyHook

/*
    這個(gè)函數(shù)用于手動(dòng)觸發(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é)點(diǎn)插入到dom樹(shù)的指定位置中去
function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {
    for (; startIdx <= endIdx; ++startIdx) {
        api.insertBefore(parentElm, createElm(vnodes[startIdx], insertedVnodeQueue), before);
    }
}

createRmCb

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

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

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