什么是Virtual DOM？

Virtual DOM——虚拟节点，听名字挺牛的，其实很简单，它其实就是个js对象，这个对象把真实dom节点做了描述，用装逼点的字眼说，也就是对DOM进行了抽象，所以叫虚拟节点。还是不明白？得，直接上代码：

//创建vnode
function Vnode(tag,data,text){
    this.tag = tag
    this.data = data
    this.text = text
}

//<a href="http://www.baidu.com" target="_bank">百度一下</a>

var tagA = new Vnode('a',{href:'http://www.baidu.com',target:'_bank'},'百度一下')

console.log(tagA)
/* Vnode {
    tag: 'a',
    data: { href: 'http://www.baidu.com', target: '_bank' },
    text: '百度一下'
   }
*/

再把虚拟节点跟真实的dom做一个映射即可：

    function Vnode(tag,data,text){
        this.tag = tag
        this.data = data || ''
        this.text = text || ''
    }
    Vnode.prototype.patch = function(){
        var node = document.createElement(this.tag)
        for(var key in this.data){
            node.setAttribute(key,this.data[key])
        }

        var textNode = document.createTextNode(this.text)
        node.appendChild(textNode)
        return node
    }

这样做有啥好处呢？
众所周知，前端的性能瓶颈都集中在dom操作上，dom的开销是最大的，要想让网页变得嗖嗖的，就要最大化利用dom，切忌频繁创建销毁dom。怎么做呢？
我们可以在更新页面时，先不操作dom，先来对比一下：
新状态和旧状态下的virtual dom有哪些改变？
通过对比，我们只更新局部差异的那一部分dom元素即可，其他地方不动，这样就会大大节省dom的开销了。