js react/vue虚拟dom

在js中，真实dom属性太多，如果进行比对需要的空间和时间都比较多，所以用对象来代表一个真实dom，一般是包含以下属性的对象

<div>
        hello<span>world!</span>
</div>

{
  tag:'div',
  data:{},
  children:[],
  text:undefined, //文本
  ele:undefined, //真实节点
  key: undefined,
  attrs:[]
}

真实dom可以和虚拟dom之间转换

新旧dom比较

image.png

比较新旧虚拟dom相似方法很简单

function sameVnode(oldNode, newNode){
  return oldNode.key === newNode.key && oldNode.tag === newNode.tag
}

不相似则创建新的dom,相似则对oldNode打补丁，先比较class, style, attrs, events, props等，不同则调用update函数，oldNode如果没有新节点属性则增加新节点属性，子节点的比较用到了 diff算法，子节点比较递归打补丁。
参考文档 虚拟dom比较原理