Virtual DOM
为什么要用虚拟DOM
1 var div=document.createElement(‘div’)
Var str=’‘；
for(var key in div){
str=str+” ”+key
}
console.log(str);
打印出div元素的原生属性，非常庞大
2
相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来：
diff算法，同级对比(因为节点层级很少改变)，生成patch对象，去更新页面
diff算法遍历
在深度优先遍历的时候，每遍历到一个节点就把该节点和新的的树进行对比。如果有差异的话就记录到一个对象里面patch对象。
因为dom节点有用的只有tagName,atrribute列表，和样式无关，所以只需要这几个属性对比存储为vNode即可。
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
1 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
2 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了
