Vue源码后记-vFor列表渲染（3）

Z时代
2024-01-10
分类：综合

vue

　　这一节肯定能完！

　　经过DOM字符串的AST转化，再通过render变成vnode，最后就剩下patch到页面上了。

　　render函数跑完应该是在这里：

    function mountComponent(vm, el, hydrating) {
        vm.$el = el;
        if (!vm.$options.render) {
            vm.$options.render = createEmptyVNode; {
                // warning
            }
        }
        // beforeMount
        var updateComponent;
        /* istanbul ignore if */
        if ("development" !== 'production' && config.performance && mark) {
            updateComponent = function() {
                // dev render
            };
        } else {
            updateComponent = function() {
                vm._update(vm._render(), hydrating);
            };
        }
        // code...
        // mounted
        return vm
    }

　　vm._render()会生成一个vnode看，接下来调用_update渲染页面，如下：

    Vue.prototype._update = function(vnode, hydrating) {
        var vm = this;
        // beforeUpdate
        // code...
        if (!prevVnode) {
            // initial render
            vm.$el = vm.__patch__(
                vm.$el, vnode, hydrating, false /* removeOnly */ ,
                vm.$options._parentElm,
                vm.$options._refElm
            );
        } else {
            // updates
            vm.$el = vm.__patch__(prevVnode, vnode);
        }
        // code...
    };
    Vue$3.prototype.__patch__ = inBrowser ? patch : noop;
    var patch = createPatchFunction({
        nodeOps: nodeOps,
        modules: modules
    });
    function createPatchFunction(backend) {
        var i, j;
        var cbs = {};
        var modules = backend.modules;
        var nodeOps = backend.nodeOps;
        for (i = 0; i < hooks.length; ++i) {
            // hook...
        }
        // fn...
        return function patch(oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
            // code...
            if (isUndef(oldVnode)) {
                // component...
            } else {
                var isRealElement = isDef(oldVnode.nodeType);
                if (!isRealElement && sameVnode(oldVnode, vnode)) {
                    // patch existing root node
                } else {
                    // SSR or hydrating
                    var oldElm = oldVnode.elm;
                    var parentElm$1 = nodeOps.parentNode(oldElm);
                    createElm(
                        vnode,
                        insertedVnodeQueue,
                        oldElm._leaveCb ? null : parentElm$1,
                        nodeOps.nextSibling(oldElm)
                    );
                    //code...
                }
            }
            invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);
            return vnode.elm
        }
    }

　　由于是初始化页面，所有在update的过程中，oldVNode被设置为空的div虚拟DOM，然后与生成的虚拟DOM进行替换。

　　核心细节在上述代码中的createElm函数：

    // vnode => 生成的vnode
    // insertedVnodeQueue => []
    // parentElm => body
    // refElm => #text
    // nested => undefined
    function createElm(vnode, insertedVnodeQueue, parentElm, refElm, nested) {
        vnode.isRootInsert = !nested; // for transition enter check
        if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
            return
        }
        var data = vnode.data;
        var children = vnode.children;
        var tag = vnode.tag;
        if (isDef(tag)) {
            // pre...
            vnode.elm = vnode.ns ?
                nodeOps.createElementNS(vnode.ns, tag) :
                // 调用这个生成一个tag标签
                nodeOps.createElement(tag, vnode);
            setScope(vnode);
            {
                // 处理子节点
                // 子节点是5个vnode组成的数据 因此会循环调用本函数
                createChildren(vnode, children, insertedVnodeQueue);
                if (isDef(data)) {
                    // 生成DOM节点的属性
                    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);
        }
    }