虚拟DOM (virtual DOM)

Posted 2020-11-27 annie211

1、定义

虚拟dom就是一个简单的对象，包含标签名（tag）、属性（attr）、子元素（children），通过js操作virtual DOM，最终映射到真实的dom上。

2、为什么要用虚拟dom：

频繁地操作dom，会造成页面的回流和重绘，增加性能开销，降低页面的渲染速度。

把dom的操作放到js中，js运算速度快，提高效率；

跨平台优势，不依赖真实的环境，浏览器、node都可以实现。

3、虚拟dom在Vue中的应用：

vue.js通过编译将模板转换成渲染函数render，执行渲染函数就得到一个虚拟节点树，虚拟DOM与旧节点进行比对，记录之间的差异，只对发生变化的节点进行更新，最后返回真实的dom元素。

// patch 对比新旧节点（vnode、newVnode）
    function updateChildren(vnode,newVnode){
        var children=vnode.children||[];
        var newChildren=newVnode.children||[];
        children.forEach(function(childVnode,index){
            var newChildVnode=newChildren[index];
            if(childVnode.tag==newChildren.tag){
                //深层递归
                updateChildren(childVnode,newChildVnode)
            }else{
                //不一样则更新
                replaceNode(childVnode,newChildVnode)
            }
        });
    }


    //将Vnode渲染成真正的dom
    function createElement(vnode){
        var tag=vnode.tag;
        var attrs=vnode.attrs || {};
        var children=vnode.children || [];
        if(!tag)return null;
        //创建真实的dom元素
        var elem=document.createElement(tag);
        //属性
        var attrName
        for(attrName in attrs){if(attrs.hasOwnProperty(attrName)){
            //添加属性
            elem.setAttribute(attrName,attrs[attrs])
        }
        //子元素
        children.forEach(function(childVnode){
            //给elem添加子元素，若还有子节点，则递归生成子节点
            elem.appendChild(createElement(childVnode))
        });

        }
        //返回真实的dom元素
        return elem;
    }