什么是虚拟DOM

虚拟DOM：用JS对象描述DOM的层次解构。DOM中的一切属性都在虚拟DOM中有对应的属性

例如我们的真实DOM为：

<div class="box">
	<h3>我是一个标题</h3>
	<ul>
		<li>牛奶</li>
		<li>咖啡</li>
		<li>可乐</li>
	</ul>

此时我们对应的虚拟DOM结构为（以snabbdom为例）：

其中的属性：

export VNode{
	sel: String//选择器
	data: VNodeData//节点属性，样式
	children: Array//子节点数组
	text: String//节点的文本
	elm: Node//对应的真正的DOM节点。如果为undefined表示虚拟节点还没有上树
	key: Key//唯一标识
}

为什么需要虚拟DOM

1. 减少dom操作（虚拟dom可以将多次操作合并为一次操作。比如你添加1000个节点，传统方法是一个接一个的操作。虚拟dom借助dom diff可以把多余的操作步骤省略掉，比如你添加1000个节点，其实只有10个节点是新增的。）
2. 跨平台渲染（虚拟dom不仅可以变成真实dom，还可以变成小程序、IOS应用、安卓应用，因为虚拟dom的本质只是一个js对象。）
3. 服务端渲染（SSR）

也就是说。虚拟DOM可以进行模拟新旧节点的精细化比较。可以算出如何最小量更新。最后映射到真实OM身上使其渲染出来。我们熟知的diff算法就是发生在新旧虚拟DOM之间的。

那我们首次渲染的时候肯定是没有旧虚拟DOM的，那么此时的DOM如何变为虚拟DOM。这个就属于模板编译原理的范畴。暂时不作讨论。但是编译之前我们可以通过h函数来变成

diff算法的特点

1. key是节点的唯一标识。告诉diff算法，在更改前后它们是同一个DOM节点。
2. 只有是同一个虚拟节点（
   
   选择器相同且key相同
   
   ），才进行精细化比较，否则就是暴力删除旧的，插入新的。
3. 只是同层比较。并不会进行跨层比较。不然就是暴力删除旧的，然后插入新的

patch函数