Vue源码后记-vFor列表渲染

Posted QH-Jimmy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue源码后记-vFor列表渲染相关的知识,希望对你有一定的参考价值。

  这一节肯定能完!

  

  经过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);
        }
    }

  其实,这个普通的patch没有区别,只是由于是多个标签,所以会有兄弟元素,在插入节点会调用insertBefore进行插入,最后5个a标签依次插入生成的div,然后div插入body标签完成页面渲染。

  虽然循环生成a标签以及其属性比较麻烦,但是由于整个标签是一次性插入body中,所以对于性能也没有什么影响。

 

  完事,确实没什么好说的,至于v-if、v-show那些,有空一次性写完。

以上是关于Vue源码后记-vFor列表渲染的主要内容,如果未能解决你的问题,请参考以下文章

v-if和v-for谁的优先级更高

使用带有渲染功能的 Vue.js 3 片段

Vue源码后记-其余内置指令

Vue方向:v-for循环中的key属性

Vue3 v-for中无key和有key实现的简单解读

Vue源码探究-虚拟DOM的渲染