虚拟DOM：将真实DOM树上的结构、属性信息等用JavaScript 对象的形式来表示
栗子：
HTML写法：
<ul id='list'>
<li class='item'>Item 1</li>
<li class='item'>Item 2</li>
<li class='item'>Item 3</li>
</ul>
对应JavaScript 对象表示
var element = {
tagName: 'ul', // 节点标签名
props: { // DOM的属性，用一个对象存储键值对
id: 'list'
},
children: [ // 该节点的子节点
{tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
]
}
Virtual DOM 算法：当状态变更时，比较两棵新旧虚拟DOM树的差异（核心部分：diff算法)，将找出的差异部分进行DOM操作
简单总结：
1、构建虚拟DOM
2、通过虚拟DOM构建真实DOM
3、生成新的虚拟DOM
4、diff算法比较两颗虚拟DOM的差异
1）只会对同一个层级的元素进行对比
2）深度优先遍历，记录差异
3）差异类型
可能出现的DOM操作：节点替换、删除、新增、修改、更改列表顺序等
因为节点是可重复的，所以需要给子节点加上唯一标识key，列表对比的时候，使用key进行对比，这样才能复用老的 DOM 树上的节点，记录下每个节点的差异
