1.虚拟 DOM
与页面DOM元素对应的对象。包含标签名、标签上的属性、事件监听及其子元素。本质是一个JS对象。
2.优点
- 减少DOM操作（次数和范围）
虚拟DOM可以将多次操作合并为一次，比如添加1000个节点，不是一次次添加DOM节点。（次数）
借助DOM diff将多余的操作省略，比如添加1000个节点，根据DOM diff对比，其实只有10个是新的。（范围） - 跨平台
虚拟DOM应用在小程序、iOS系统、安卓应用
3.缺点
需要额外的创建函数来创建，React使用createElement，Vue使用h函数，依赖打包工具构建js文件
4.DOM diff
一个函数，运行DOM的操作,对比新旧DOM 树然后更新。
patches = patch(oldVNode,newVNode)
Tree diff
将新旧两棵树逐层进行对比，查找更新节点
更新节点为组件-Component diff
更新节点为标签-Element diff
Component diff
如果节点是组件，就先看组件类型
类型不同直接替换（删除旧的）
类型相同则只更新属性
然后深入组件做 Tree diff（递归）
Element diff
如果节点是原生标签，则看标签名
标签名不同直接替换，相同则只更新属性
然后进入标签后代做 Tree diff（递归）
5.DOM diff 的优点
可以减少DOM操作
6.DOM diff 的问题（key）
在同级节点对比有bug，在同级节点更新时无法判断是删除了子节点p，还是更新了子节点p，给他们添加唯一值key来标识就可以解决。不要用index来作为key值，在增删DOM节点时，index作为数组的下标是不变的，比如[1,2,3]变成[1,3],下标2始终存在。
实际是删除节点p，代码会认为更新节点p且删除节点span.png
