虚拟 DOM 和 DOM diff

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