.13-Vue源码之patch（3）（终于完事）

怎么感觉遥遥无期了呀~这个源码，跑不完了。

这个系列写的不好，仅作为一个记录，善始善终，反正也没人看，写着玩吧！

 

　　接着上一节的cbs，这个对象在初始化应该只会调用create模块数组方法，简单回顾一下到哪了。

    // line-4944
    function invokeCreateHooks(vnode, insertedVnodeQueue) {
        // 遍历调用数组方法
        // emptyNode => 空虚拟DOM
        // vnode => 当前挂载的虚拟DOM
        for (var i$1 = 0; i$1 < cbs.create.length; ++i$1) {
            cbs.create[i$1](emptyNode, vnode);
        }
        i = vnode.data.hook; // Reuse variable
        if (isDef(i)) {
            if (isDef(i.create)) {
                i.create(emptyNode, vnode);
            }
            if (isDef(i.insert)) {
                insertedVnodeQueue.push(vnode);
            }
        }
    }

　　后面的暂时不去看，依次执行cbs.create中的方法：

一、updateAttrs

　　前面是对vnode的attrs进行更新，__ob__属性代表该对象被观测，可能会变动，后面是对旧vnode属性的移除。

    // line-5456
    // 因为是初始化
    // 此时oldVnode是空的vnode
    function updateAttrs(oldVnode, vnode) {
        // 老、新vnode都没属性就返回
        if (isUndef(oldVnode.data.attrs) && isUndef(vnode.data.attrs)) {
            return
        }
        var key, cur, old;
        var elm = vnode.elm;
        var oldAttrs = oldVnode.data.attrs || {};
        var attrs = vnode.data.attrs || {};
        // __ob__属性代表可能变动
        if (isDef(attrs.__ob__)) {
            attrs = vnode.data.attrs = extend({}, attrs);
        }
        // attrs => {id:app}
        for (key in attrs) {
            cur = attrs[key];
            old = oldAttrs[key];
            // 更改属性
            if (old !== cur) {
                setAttr(elm, key, cur);
            }
        }
        // IE9
        if (isIE9 && attrs.value !== oldAttrs.value) {
            setAttr(elm, 'value', attrs.value);
        }
        // 移除旧vnode的属性
        for (key in oldAttrs) {
            if (isUndef(attrs[key])) {
                if (isXlink(key)) {
                    elm.removeAttributeNS(xlinkNS, getXlinkProp(key));
                } else if (!isEnumeratedAttr(key)) {
                    elm.removeAttribute(key);
                }
            }
        }
    }

　　这里主要是最后遍历新vnode的属性，调用setAttr进行设置。

    // line-5492
    // el => div
    // key => id 
    // value => app
    function setAttr(el, key, value) {
        if (isBooleanAttr(key)) {
            // 处理无值属性 如：disabled 
            if (isFalsyAttrValue(value)) {
                el.removeAttribute(key);
            } else {
                el.setAttribute(key, key);
            }
        } else if (isEnumeratedAttr(key)) {
            el.setAttribute(key, isFalsyAttrValue(value) || value === 'false' ? 'false' : 'true');
        } else if (isXlink(key)) {
            if (isFalsyAttrValue(value)) {
                el.removeAttributeNS(xlinkNS, getXlinkProp(key));
            } else {
                el.setAttributeNS(xlinkNS, key, value);
            }
        } else {
            if (isFalsyAttrValue(value)) {
                el.removeAttribute(key);
            } else {
                el.setAttribute(key, value);
            }
        }
    }

    var isBooleanAttr = makeMap(
        'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' +
        'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +
        'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +
        'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +
        'required,reversed,scoped,seamless,selected,sortable,translate,' +
        'truespeed,typemustmatch,visible'
    );
    var isEnumeratedAttr = makeMap('contenteditable,draggable,spellcheck');
    var isXlink = function(name) {
        // 以xlink:开头的字符串
        return name.charAt(5) === ':' && name.slice(0, 5) === 'xlink'
    };
    var isFalsyAttrValue = function(val) {
        return val == null || val === false
    };

　　函数看似判断很多很复杂，其实很简单，只是根据属性的类别做处理。本例中，直接会跳到最后的setAttribute，直接调用原生方法设置属性，结果就是给div设置了id:app属性。

　　因为oldVnode是空的，所以没有属性可以移除。

 

二、updateClass

　　这个从名字看就明白了，就是类名更换而已。

    // line-5525
    function updateClass(oldVnode, vnode) {
        var el = vnode.elm;
        var data = vnode.data;
        var oldData = oldVnode.data;
        // 是否有定义class属性
        if (
            isUndef(data.staticClass) &&
            isUndef(data.class) && (
                isUndef(oldData) || (
                    isUndef(oldData.staticClass) &&
                    isUndef(oldData.class)
                )
            )
        ) {
            return
        }

        var cls = genClassForVnode(vnode);

        // handle transition classes
        var transitionClass = el._transitionClasses;
        if (isDef(transitionClass)) {
            cls = concat(cls, stringifyClass(transitionClass));
        }

        // set the class
        if (cls !== el._prevClass) {
            el.setAttribute('class', cls);
            el._prevClass = cls;
        }
    }

　　因为没有class，所有会直接返回了。

 

三、updateDOMListeners

　　这个是更新事件监听

    // line-6156
    function updateDOMListeners(oldVnode, vnode) {
        if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) {
            return
        }
        var on = vnode.data.on || {};
        var oldOn = oldVnode.data.on || {};
        target$1 = vnode.elm;
        normalizeEvents(on);
        updateListeners(on, oldOn, add$1, remove$2, vnode.context);
    }

　　很明显，本例中也没有事件，所以跳过

 

四、updateDOMProps

　　这个是更新组件的props值

    // line-6174
    function updateDOMProps(oldVnode, vnode) {
        if (isUndef(oldVnode.data.domProps) && isUndef(vnode.data.domProps)) {
            return
        }
        // code
    }

　　因为代码太长又不执行，所以简单跳过。

 

五、updateStyle

　　更新style属性~

    // line-6364
    function updateStyle(oldVnode, vnode) {
        var data = vnode.data;
        var oldData = oldVnode.data;

        if (isUndef(data.staticStyle) && isUndef(data.style) &&
            isUndef(oldData.staticStyle) && isUndef(oldData.style)) {
            return
        }

        // 跳过...
    }

 

六、_enter

　　这个enter函数有点长，但是直接return，所以具体代码就不贴出来了。

    // line-6934
    function _enter(_, vnode) {
        // 第一参数没有用
        if (vnode.data.show !== true) {
            enter(vnode);
        }
    }

 

七、create

    // line-4674
    create: function create(_, vnode) {
        registerRef(vnode);
    }

    // line-4688
    function registerRef(vnode, isRemoval) {
        var key = vnode.data.ref;
        if (!key) {
            return
        }

        // return了
    }

　　这个也return了。

 

八、updateDirectives

　　从名字来看是更新组件没错了！

    // line-5346
    function updateDirectives(oldVnode, vnode) {
        if (oldVnode.data.directives || vnode.data.directives) {
            _update(oldVnode, vnode);
        }
    }

　　先判断新旧节点是否有directives属性，没有直接跳过。

 

　　到这里，8个初始化方法全部调用完毕，函数返回createElm：

    // line-4802
    function createElm(vnode, insertedVnodeQueue, parentElm, refElm, nested) {

        // 获取属性
        // ...

        if (isDef(tag)) {

            // warning...

            vnode.elm = vnode.ns ?
                nodeOps.createElementNS(vnode.ns, tag) :
                nodeOps.createElement(tag, vnode);
            setScope(vnode);

            /* istanbul ignore if */
            {
                // 从这里出来
                createChildren(vnode, children, insertedVnodeQueue);
                if (isDef(data)) {
                    invokeCreateHooks(vnode, insertedVnodeQueue);
                }
                // 下一个
                insert(parentElm, vnode.elm, refElm);
            }

            if ("development" !== 'production' && data && data.pre) {
                inPre--;
            }
        } else if (isTrue(vnode.isComment)) {
            vnode.elm = nodeOps.createComment(vnode.text);
            insert(parentElm, vnode.elm, refElm);
        } else {
            vnode.elm = nodeOps.createTextNode(vnode.text);
            insert(parentElm, vnode.elm, refElm);
        }
    }

　　经过createChildren后，vnode的elm属性，也就是原生DOM会被添加各种属性，然后进入insert函数。

　　insert函数接受3个参数，父节点、当前节点、相邻节点，本例中对应body、div、空白文本节点。

    // line-4915
    // parent => body
    // elm => vnode.elm => div
    // ref => #text
    function insert(parent, elm, ref) {
        if (isDef(parent)) {
            if (isDef(ref)) {
                if (ref.parentNode === parent) {
                    nodeOps.insertBefore(parent, elm, ref);
                }
            } else {
                nodeOps.appendChild(parent, elm);
            }
        }
    }

　　这个函数前面也见过，简单说一下，三个参数，父、当前、相邻。

　　1、如果都存在，调用insertBefore将当前插入相邻前。

　　2、如果没有相邻节点，直接调用appendChild把节点插入父。

　　这个调用完，页面终于惊喜的出现了变化！

　　patch函数一阶段完成，页面已经插入的对应的DOM节点。

 

　　返回后，进入第二阶段，移除那个{{message}}：

    // line-5250
    function patch(oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {

        // isUndef(vnode)...

        var isInitialPatch = false;
        var insertedVnodeQueue = [];

        if (isUndef(oldVnode)) {

            // ...

        } else {
            var isRealElement = isDef(oldVnode.nodeType);
            if (!isRealElement && sameVnode(oldVnode, vnode)) {
                // patch existing root node
                patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly);
            } else {
                if (isRealElement) {

                    // SSR

                    // hydrating

                    oldVnode = emptyNodeAt(oldVnode);
                }
                var oldElm = oldVnode.elm;
                var parentElm$1 = nodeOps.parentNode(oldElm);

                // createElm => 生成原生DOM节点并插入页面

                if (isDef(vnode.parent)) {
                    // ...
                }

                // go!
                if (isDef(parentElm$1)) {
                    removeVnodes(parentElm$1, [oldVnode], 0, 0);
                } else if (isDef(oldVnode.tag)) {
                    invokeDestroyHook(oldVnode);
                }
            }
        }

        invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);
        return vnode.elm
    }

　　接下里会进入removeVnodes函数对模板样式进行移除，至于另外分支是对旧vnode移除，不属于页面初始化阶段。

    // line-4995
    // parentElm => body
    // vnodes => 挂载虚拟DOM集合
    // startIdx => endIdx =>1
    function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
        for (; startIdx <= endIdx; ++startIdx) {
            var ch = vnodes[startIdx];
            if (isDef(ch)) {
                if (isDef(ch.tag)) {
                    removeAndInvokeRemoveHook(ch);
                    invokeDestroyHook(ch);
                } else { // Text node
                    removeNode(ch.elm);
                }
            }
        }
    }

　　函数很简洁，一个分支处理DOM节点，一个分支处理文本节点。本例中进入第一个分支，将移除挂载的DOM节点。

　　有两个方法处理移除DOM节点：

1、removeAndInvokeRemoveHook

    // line-5009
    function removeAndInvokeRemoveHook(vnode, rm) {
        if (isDef(rm) || isDef(vnode.data)) {
            var i;
            var listeners = cbs.remove.length + 1;
            if (isDef(rm)) {
                rm.listeners += listeners;
            } else {
                // 返回一个函数
                rm = createRmCb(vnode.elm, listeners);
            }
            // recursively invoke hooks on child component root node
            if (isDef(i = vnode.componentInstance) && isDef(i = i._vnode) && isDef(i.data)) {
                removeAndInvokeRemoveHook(i, rm);
            }
            // 会直接返回
            for (i = 0; i < cbs.remove.length; ++i) {
                cbs.remove[i](vnode, rm);
            }
            if (isDef(i = vnode.data.hook) && isDef(i = i.remove)) {
                i(vnode, rm);
            } else {
                // 最后跳这
                rm();
            }
        } else {
            removeNode(vnode.elm);
        }
    }

    // line-4782
    function createRmCb(childElm, listeners) {
        // 这是rm
        function remove$$1() {
            if (--remove$$1.listeners === 0) {
                removeNode(childElm);
            }
        }
        remove$$1.listeners = listeners;
        return remove$$1
    }

    // line-6934
    remove: function remove$$1(vnode, rm) {
        /* istanbul ignore else */
        if (vnode.data.show !== true) {
            // 由于没有data属性 直接返回vm()
            leave(vnode, rm);
        } else {
            rm();
        }
    }

　　这个方法非常绕，处理的东西很多，然而本例只有一个DOM节点需要移除，所以跳过很多地方，直接执行rm()函数。

　　即rm => removeNode() => parentNode.removeChild()。

　　最后成功移除原有的div。

 

　　但是没完，移除DOM节点后，还需要处理vnode，于是进行第二步invokeDestroyHook：

    // line-4981
    function invokeDestroyHook(vnode) {
        var i, j;
        var data = vnode.data;
        if (isDef(data)) {
            // destroy钩子函数?
            if (isDef(i = data.hook) && isDef(i = i.destroy)) {
                i(vnode);
            }
            // 主函数
            for (i = 0; i < cbs.destroy.length; ++i) {
                cbs.destroy[i](vnode);
            }
        }
        // 递归处理子节点
        if (isDef(i = vnode.children)) {
            for (j = 0; j < vnode.children.length; ++j) {
                invokeDestroyHook(vnode.children[j]);
            }
        }
    }

　　这里与上面的cbs.create类似，也是遍历调用对应的数组方法，此处为destroy。

1、destroy

　　这里没有ref属性，直接返回了。

    // line-4683
    destroy: function destroy(vnode) {
        registerRef(vnode, true);
    }

    function registerRef(vnode, isRemoval) {
        var key = vnode.data.ref;
        if (!key) {
            return
        }

        // more
    }

2、unbindDirectives

　　直接返回了。

    // line-5341
    destroy: function unbindDirectives(vnode) {
        updateDirectives(vnode, emptyNode);
    }

    function updateDirectives(oldVnode, vnode) {
        if (oldVnode.data.directives || vnode.data.directives) {
            _update(oldVnode, vnode);
        }
    }

　　

　　后面也没有什么，直接返回到patch函数进行最后一步。

    // line-5341
    function patch(oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
        // 插入移除节点

        invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);
        return vnode.elm
    }

　　这里的invokeInsertHook处理钩子函数的插入，由于不存在，所以也直接返回了。

　　

　　接下来会一直返回到mountComponent方法：

    // line-2374
    function mountComponent(vm, el, hydrating) {
        vm.$el = el;

        // warning

        callHook(vm, 'beforeMount');

        var updateComponent;

        if ("development" !== 'production' && config.performance && mark) {
            // warning
        } else {
            updateComponent = function() {
                // 渲染DOM
                vm._update(vm._render(), hydrating);
            };
        }

        vm._watcher = new Watcher(vm, updateComponent, noop);
        hydrating = false;

        // 调用mounted钩子函数 
        if (vm.$vnode == null) {
            vm._isMounted = true;
            callHook(vm, 'mounted');
        }
        return vm
    }

　　最后调用钩子函数mounted，返回vue实例。

 

　　到此，流程全部跑完了。

　　啊~不容易。