sameVnode

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

用来比较两个vnode是否相似。
如果新旧vnode的key和sel都相同，说明两个vnode相似，我们就可以保留旧的vnode节点，再具体去比较其差异性，在旧的vnode上进行"打补丁",否则直接替换节点。这里需要说的是如果不定义key值，则这个值就为undefined，undefined===undefined //true，所以平时在用vue的时候，在没有用v-for渲染的组件的条件下，是不需要定义key值的，不会影响其比较。

createElm
创建vnode对应的真实dom，并将其赋值给vnode.elm，后续对于dom的修改都是在这个值上进行

    //将vnode创建为真实dom
    function createElm(vnode, insertedVnodeQueue) {
        var i, data = vnode.data;
        if (isDef(data)) {
            //当节点上存在hook而且hook中有beforeCreate钩子时，先调用beforeCreate回调，对刚创建的vnode进行处理
            if (isDef(i = data.hook) && isDef(i = i.beforeCreate)) {
                i(vnode);
                //获取beforeCreate钩子修改后的数据
                data = vnode.data;
            }
        }
        var elm, children = vnode.children,
            sel = vnode.sel;
        if (isDef(sel)) {
            //解析sel参数，例如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;
            //创建一个DOM节点引用，并对其属性实例化
            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节点，则递归将子元素节点插入到当前Vnode节点中，并将已插入的子元素节点在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)) { //如果存在子文本节点，则直接将其插入到当前Vnode节点
                api.appendChild(elm, api.createTextNode(vnode.text));
            }
            //当创建完毕后，触发全局create钩子回调
            for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
            i = vnode.data.hook; // Reuse variable
            if (isDef(i)) { //触发自身的create钩子回调
                if (i.create) i.create(emptyNode, vnode);
                //如果有insert钩子，则推进insertedVnodeQueue中作记录，从而实现批量插入触发insert回调
                if (i.insert) insertedVnodeQueue.push(vnode);
            }
        }
        //如果没声明选择器，则说明这个是一个text节点
        else {
            elm = vnode.elm = api.createTextNode(vnode.text);
        }
        return vnode.elm;
    }

patchVnode

如果两个vnode相似，则会对具体的vnode进行‘打补丁’的操作

   function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
        var i, hook;
        //在patch之前，先调用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的引用相同，说明没发生任何变化直接返回，避免性能浪费
        if (oldVnode === vnode) return;
        //如果oldvnode和vnode不同，说明vnode有更新
        //如果vnode和oldvnode不相似则直接用vnode引用的DOM节点去替代oldvnode引用的旧节点
        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)) {
            //首先调用全局的update钩子，对vnode.elm本身属性进行更新
            for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
            //然后调用vnode.data里面的update钩子,再次对vnode.elm更新
            i = vnode.data.hook;
            if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
        }
        /*
         分情况讨论节点的更新： new代表新Vnode old代表旧Vnode
         ps:如果自身存在文本节点，则不存在子节点 即:有text则不会存在ch，反之亦然

         1 new不为文本节点
             1.1 new不为文本节点,new还存在子节点    
               1.1.1 new不为文本节点,new还存在子节点,old有子节点
               1.1.2 new不为文本节点,new还存在子节点,old没有子节点
                  1.1.2.1 new不为文本节点,new还存在子节点,old没有子节点,old为文本节点

            1.2 new不为文本节点,new不存在子节点
              1.2.1 new不为文本节点,new不存在子节点,old存在子节点
              1.2.2 new不为文本节点,new不存在子节点,old为文本节点

         2.new为文本节点
             2.1 new为文本节点,并且old与new的文本节点不相等
             ps：这里只需要讨论这一种情况，因为如果old存在子节点，那么文本节点text为undefined，则与new的text不相等
             直接node.textContent即可清楚old存在的子节点。若old存在子节点，且相等则无需修改
        */
        //1
        if (isUndef(vnode.text)) {
            //1.1.1
            if (isDef(oldCh) && isDef(ch)) {
                //当Vnode和oldvnode的子节点不同时，调用updatechilren函数，diff子节点
                if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
            }
            //1.1.2
            else if (isDef(ch)) {
                //oldvnode是text节点，则将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完，触发postpatch钩子
        if (isDef(hook) && isDef(i = hook.postpatch)) {
            i(oldVnode, vnode);
        }
    }

removeVnodes

/*
        这个函数主要功能是批量删除DOM节点，需要配合invokeDestoryHook和createRmCb
        主要步骤如下：
        调用invokeDestoryHook以触发destory回调
        调用createRmCb来开始对remove回调进行计数
        删除DOM节点
     *
     *
     * @param parentElm 父节点
     * @param vnodes  删除节点数组
     * @param startIdx  删除起始坐标
     * @param endIdx  删除结束坐标
     */
    function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
        for (; startIdx <= endIdx; ++startIdx) {
            var i, listeners, rm, ch = vnodes[startIdx]; //ch代表子节点
            if (isDef(ch)) {
                if (isDef(ch.sel)) {
                    //调用destroy钩子
                    invokeDestroyHook(ch);
                    //对全局remove钩子进行计数
                    listeners = cbs.remove.length + 1;
                    rm = createRmCb(ch.elm, listeners);
                    //调用全局remove回调函数，并每次减少一个remove钩子计数
                    for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
                    //调用内部vnode.data.hook中的remove钩子（只有一个）
                    if (isDef(i = ch.data) && isDef(i = i.hook) && isDef(i = i.remove)) {
                        i(ch, rm);
                    } else {
                        //如果没有内部remove钩子，需要调用rm，确保能够remove节点
                        rm();
                    }
                } else { // Text node
                    api.removeChild(parentElm, ch.elm);
                }
            }
        }
    }

invokeDestroyHook

/*
    这个函数用于手动触发destory钩子回调，主要步骤如下：
    先调用vnode上的destory
    再调用全局下的destory
    递归调用子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); //调用自身的destroy钩子
            for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode); //调用全局destroy钩子
            if (isDef(i = vnode.children)) {
                for (j = 0; j < vnode.children.length; ++j) {
                    invokeDestroyHook(vnode.children[j]);
                }
            }
        }
    }

addVnodes

//将vnode转换后的dom节点插入到dom树的指定位置中去
function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {
    for (; startIdx <= endIdx; ++startIdx) {
        api.insertBefore(parentElm, createElm(vnodes[startIdx], insertedVnodeQueue), before);
    }
}

createRmCb

/*
remove一个vnode时，会触发remove钩子作拦截器，只有在所有remove钩子
回调函数都触发完才会将节点从父节点删除，而这个函数提供的就是对remove钩子回调操作的计数功能
*/
function createRmCb(childElm, listeners) {
    return function() {
        if (--listeners === 0) {
            var parent = api.parentNode(childElm);
            api.removeChild(parent, childElm);
        }
    };
}

还有一个最核心的函数updateChildren，这个留到下篇文章再说；

我们这边简单的总结一下：
对比渲染的流程大体分为
1.通过sameVnode来判断两个vnode是否值得进行比较
2.如果不值得，直接删除旧的vnode，渲染新的vnode
3.如果值得，调用模块钩子函数，对其节点的属性进行替换，例如style,event等；再判断节点子节点是否为文本节点，如果为文本节点则进行更替，如果还存在其他子节点则调用updateChildren，对子节点进行更新，更新流程将会回到第一步，重复；