在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比较原理
网友评论